Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

12

Margins change depending on browser?!

  1. 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.

  2. 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

  3. 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?

  4. 1tess
    Moderator

    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/

  5. 1tess
    Moderator

    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…

  6. 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

  7. 1tess
    Moderator

    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?

  8. 1tess
    Moderator

    ~~~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

  9. 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.

  10. 1tess
    Moderator

    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.

  11. 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

  12. 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.

  13. 1tess
    Moderator

    @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

  14. 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. :(

  15. 1tess
    Moderator

    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).

  16. 1tess
    Moderator

    @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.\…

  17. timethief
    Member

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

  18. 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.

  19. 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.

  20. 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.

  21. imaprile
    Member

    Oh, sorry. I completely missed that. Take your time. I'm just thankful for your help. Thanks again.

  22. cvanhasselt
    Member

    "Do you know how I can fix the 'box model'?" That is really, really funny. I mean hilariously funny. Seriously, I'd say at least 75% of the banter back and forth on the web about CSS over, oh, the past 10 years, has been about the fact that all the browsers (especially older ones from certain large companies) really mangle the box model, but they all mangle it in their own peculiar ways.

    For what my opinion is worth, look at the relative popularity of all browsers, and aim for getting things right in the most popular browsers. If you get that much right, count your blessings. If you end up fiddling with getting it right in every browser, you'll never have time to write your blog!

    Good luck, again!

  23. timethief
    Member

    @cvanhasselt
    I'm liking your attitude and laughing as I read what you type because it validates what I know. w00t!

  24. imaprile
    Member

    @cvanhasselt Thank you very much for the info. I designed my blog entirely in Firefox, and happy I did so as I'm told it's the best to use. There is only 1 area that is majorly troubling me with this whole "box model" thing and I wouldn't care much however, it's the fact that something, "box model" or something else, has my menu bar scrunched up into my header image and I have white space above the entire wrapper area. It's like the whole thing is scrunched up more than the margins are set for in Firefox?

    It looks A-OK in Firefox and IE 8.0 ONLY. It's the same (off) in Chrome, Windows Safari, Opera, IE 7.0-, and from what I'm told, Mac OS.

    So, as you can see it's not just one browser. If it was I'd gladly leave it alone. I've heard of CSS "hacks" but nothing I do seems to work. I know devblog said he'd look into it when he had time. I'm crossing my fingers.

    Thanks again.

  25. imaprile
    Member

    OK, due to my very nature and being addicted to my computer, I have "tinkered" with the problem I was having where my menu bar was scrunched up into the header img in Safari & Opera, Chrome, IE 7.0, but looked perfect in IE 8.0 & Firefox ONLY....

    the only way I could (on my own) figure out how to fix this was to re-design the header, header title, and menu bar alltogether. I decided to move the menu bar above the header itself. LOVE it this way. Margins great, and I think it even looks better. One problem.... it's not scrunched up in the problematic browsers anymore, now the menu bar just doesn't show up at all. Looks the same (great) in IE 8.0 (XP & WIN 7) & Firefox (XP & WIN 7) only. Help?

    Any help would be very, very appreciated. :)

    http://imaprile.com (please don't be stern about design over function... it's my OCD!) :)

  26. cvanhasselt
    Member

    hello, finally getting round to check things out in IE. What it looks like you've done is specify a line-height (or perhaps you are inheriting it) for the DIV with id="nav" .
    I can't point you to anything explaining why, perhaps DevBlog or others can, but after looking with the IE Developer Toolbar, I experimented and found that if you set the height of the div to 250px, it should show up correctly in IE. I'm using IE 7.0. I tried, using Firebug, to see what happens with this in Firebox, and it didn't seem to have any ill effects.

    I see you've moved the div#nav above the header by using a negative top margin, and that, I think, may be the root of the problem. Because of the different box model interpretations (or misinterpretations, if you prefer) negative margins can cause problems. But, try setting the height of the div, as in
    height: 250px;
    and then see what happens

  27. cvanhasselt
    Member

    P.S. Noticed you are a North Carolinian, too! Go Heels! (hope you aren't a pack fan, or, god forbid, a dookie!)

  28. ztstar
    Member

    Hello,

    I have been all over WORDPRESS to learn how to do this simple thing. No, I don't know any of this stuff! I can navigate however around the computer. I just don't know CSS. All I want to do is increase the width of the area that contains what I have posted. It is too small. I am using the PressRow theme. I was able to add my custom header. I know this a simple request, and somthing I should know how to do, and perhaps after someone helps me, I will. I have tried going thru changing the css, but haven't quite got the positioning down yet. I was able to place the left closer to the edge of the screen but the overall width remained the same. can anyone help? Send me a reply and I will check tomorrow. Going to bed now. Thanks

  29. imaprile
    Member

    @cvanhasselt Thanks for getting back with me! I had the margin/alignment issue before I moved the menu/bar up. I only did that after trying a few things to see if I could figure it out. After tinkering I realized I liked it like this, but again, can't figure out why it's not showing up at all on Safari or IE 7.0, Chrome.

    I'm not sure if any of my current #nav code is correct, but it worked on the 'live' Firebug CSS ad-on. This might be obvious to someone else, yet I'm still somewhat a newbie... where should I put the height: 250px; and will this make the menu appear on Safari? I appreciate your help!

    ps. My husband went to UNC & NCSU so we're split. But, then again we're not really sports fanatics! It's safer that way. :)

  30. imaprile
    Member

    I still have the unresolved issue of my navigation/menu bar not appearing in Safari, Opera, Chrome, and IE 7.0. It ONLY appears correctly in Firefox & IE 8.0.

    Can someone please let me know if there is a fix to possibly the "box model" of if my CSS is just completely wrong and the other browsers hate me for it? :)

    Everything else is perfect, except the nav bar. ANY help is appreciated. Thanks!
    http://imaprile.com

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags