Margins change depending on browser?!

  • Author
    Posts
  • #443482

    imaprile
    Member

    Fonts I can understand, but not margins. I changed some margins last night on my header and menu to attempt to “de-clutter”. It worked succussfully on IE & Firefox (which I mostly use). I awoke this am to find my margins were all over the place in Safari, which I don’t use but have for test purposes. So… I got fed up with it and decided to just change out my header as it was the header that was too big, and wouldn’t (couldn’t) center my blog title correctly.

    I edited the new header in, lined up the margins, and voila… everything looks great. Except when you look at it in Safari. The blog title is supposed to be center/center, the menu bar is supposed to be directly under the header aligned to the far right. What can I do to fix this? Or can I?

    BTW: I would honestly appreciate knowing is this NEW header and margins (in Firefox) are in fact better. Please let me know. Thanks.

    http://imaprile.com

    The blog I need help with is imaprile.com.

    #443626

    timethief
    Member

    Hell there,
    Did you know that you can check cross browser compatibility free of charge? You can see how your blog displays in different browsers that you choose here
    http://browsershots.org

    #443628

    imaprile
    Member

    Hey there! Yes, I knew of this, but didn’t use it this go round. Thing is, is the margins are way off in Safari. How can I edit the margins where they look somewhat reasonable in all browsers?

    #443629

    1tess
    Moderator Emeritus

    Yes, you must remember that things you see online are not set to look one way only as you would see something printed. In print, you can layout exactly what you want to see. But online, what any one sees is dependent on may factors: their browser, and browser version, screen resolution, screen size, mobile viewing, operating system of the viewer’s computer, and which version of the os they are using.

    What you are aiming at is sort of a moving target. Or more like you are trying to set up relationships between the elements on your site that will look good in the most possible places. (or if you don’t care, then lay it out to please yourself and readers can sink or swim)

    That all said you could use something like this to peek at what other people might see:
    http://browsershots.org/

    #443630

    1tess
    Moderator Emeritus

    I have been working with several non CSS upgrade things related to absolute position and relative position and I can attest to the large difference between Safari and Firefox. Some more recent versions of msie are not to bad, but a lot of stuff fail in explorer…

    #443632

    timethief
    Member

    When you are making decisions about which browsers to make changes for, you may want to check these browser stats: http://www.w3schools.com/browsers/browsers_stats.asp

    Note that support for IE6 which is problematic and has driven most web designers crazy so they simply ignore trying to make their themes “work” in IE6 has finally been discontinued http://tim-stanley.com/post/IE-6-Support-Discontinued.aspx

    #443633

    1tess
    Moderator Emeritus

    Setting a precise number may not be the best approach for getting things to look the way you want. Remember, even standard fonts render differently!
    Sometimes using percentages has worked better for making things look “right” for me.

    I don’t know if you can use percentage widths and sizes in CSS?

    #443635

    1tess
    Moderator Emeritus

    ~~~timethief, I have not forgotten you, if you are still interested, but work is being a bear. If you still are interested let me know???
    tess

    #443644

    devblog
    Member

    Yes, margins “change” depending on browsers, it’s called the “box model” which IE interprets differently to other browsers; however, after checking your blog there must be something going on in your code that is messing things up in Safari. Safari and Fx are not too different in how they render styles, so there may be other factors affecting how things are styled in Safari.

    #443646

    1tess
    Moderator Emeritus

    Just curious, and off this topic, but am I correct in reasoning % works well in Safari, FireFox, and maybe even in msie?
    For widths of tables, divs, paragraphs,
    and font size or line height, column width float right, float left
    margins, padding, indents

    eee…
    I think I’m confusing myself here. It’s an unfocused question. some things above I have tried, some not.

    #443683

    imaprile
    Member

    @devblog – HI!

    I made some major changes tonight including, changing my header to one that would allow a centered blog title (moved my tagline in the header img to clear up space), and then changed the background to match (of course!). I even FINALLY figured out how to get Typekit to work, as it became evident that even the font, “Freestyle Script”, a pretty common font, wasn’t appearing on any Mac PC’s and Google Chrome, among others.

    I also realized that the fonts were translating better with px’s, rather than their original em’s, so I changed the code.

    So… my margin issue still stands. It’s off in Chrome & Safari in Windows. I don’t know about Mac.

    I LOVE the way it looks now. (minus of course the above)

    What can I do to the code that will enable it to look correctly? I would truly appreciate it. :)

    http://imaprile.com

    #443768

    devblog
    Member

    Tess,

    To answer your question it would take a fair long post. Unfortunately I don’t have the time right now since I’m working on a project whose deadline is coming soon, so i’ll address your question later.

    April,

    I also realized that the fonts were translating better with px’s, rather than their original em’s, so I changed the code.

    Do not do that. Using pixel units for text is of bad practice and frowned upon. It is your blog, and you can do with it whatever you want, but I would strongly recommend you not using px units. For text either use “em” or “%” units.

    If you want “pixel perfect” fonts, then I’d recommend you adding this (if it doesn’t have it) to your “body” definition:

    font-size: 62.5%;

    Then in your font values, if you wanted to use a size of 12px, instead of writing this:

    font-size: 12px;

    write this:

    font-szie: 1.2em;

    So, to “represent” a font size of 10px, you’d write 1em; 16px, you’d write 1.6em; etc.

    I can’t look into your code right now since I have other projects to take care of, next week, whenever I have a chance, I’ll see what I can do for you if you’re still interested.

    Thanks.

    #443774

    1tess
    Moderator Emeritus

    @devblog
    No worries. You are kind to even respond. My questions are vague, and I really should do some more experiments
    I do understand about work pressure. Seems people who pay me suddenly think everything should have been done yesterday… lol

    #443775

    timethief
    Member

    @tess
    I’m definitely still interested. I just completed a contract job and will be starting another one so I know what you mean about work. I either have too much or too little. :(

    #443776

    1tess
    Moderator Emeritus

    I don’t remember who linked my attention to this site
    http://www.thesug.org/Blogs/kyles/archive/2009/04/17/CSS_FontSize_em_vs_px_vs_pt_vs_percent.aspx.aspx
    and I’m not sure it’s useful for the OP, but it did sort of clear up some things for me. I’d forgotten I’d bookmarked it. Now would be a good time to reread it (when time allows).

    #443777

    1tess
    Moderator Emeritus

    @timethief!!
    I’ll email you but I’m taking a break and working on a post just now. even though I should be madly working.\…

    #443781

    timethief
    Member

    Okay. I have a mountain of dishes to wash and a house to clean before I get to read email – whoopee!

    #443791

    devblog
    Member

    Thank you for understanding, Tess.

    That article is excellent. In fact, that’s one of the articles I’m planning to link to in a short post I’m planning to write.

    #443800

    imaprile
    Member

    @devblog, I changed them back to em’s. (all text)

    Do you know how I can fix the “box model” so my blog looks correct in Safari and Chrome? I’ve tried to find some codes online, but haven’t had any luck.

    Thanks.

    #443802

    devblog
    Member

    April,

    I’ll gladly look into your code but unfortunately I can’t right now. Like I said in one of my previous posts:

    I can’t look into your code right now since I have other projects to take care of, next week, whenever I have a chance, I’ll see what I can do for you if you’re still interested.

    Thanks.

The topic ‘Margins change depending on browser?!’ is closed to new replies.