Margins in Firefox vs IE

  • I’m new to WordPress and blogging in general and I’m having trouble making my blog look right on both IE and Firefox. IE and Chrome look correct and the same but on Firefox, everything is shifted to the left. I’m assuming something is different with the way the browsers handle CSS, specifically margins, but I don’t know what to do to fix it.

    A lot of the code is from a theme I started with but I’ve made a lot of changes since. Therefore, there may be some code that is not well-formed as I haven’t taken a look at that yet.

    Basically, I’m trying to get all the content centered, with the sidebar off to the side. Any help on why my content isn’t centering on Firefox would be great.

    This is my blog: https://eatsmilesleep.com

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)

  • Firefox will respect and enforce declared widths of outer objects much more strictly than IE does. Your sidebar is narrower than the objects inside it, IE allows the inner objects to make room for themselves, Firefox doesnt.

    change 

    div.left-navi-blog {
float:left;
margin-right:155px;
width:130px;
}

    to

    div.left-navi-blog {
float:left;
margin-right:155px;
width:240px;/*adjust this to suit*/
}

    Thread Starter sweetflame

    (@sweetflame)

    Thanks for the response – I think I’m still missing something though. I changed the width to fit the elements inside, and adjusted the right margin a bit, but it’s still very different between IE/Chrome and Firefox. Can you take another look and tell me if I’m doing something else wrong?

    Thanks again for your help.

    change the margin a back to margin-right:155px;

    looks about the same to me now in IE7/FF3.6

    z

    Thread Starter sweetflame

    (@sweetflame)

    I’ve realized the problem – it looks fine on some monitors but when you re-size the browser (as would happen on a larger monitor), the background does what is expected – moves with the browser. However, the content doesn’t and therefore doesn’t fit into the background.

    Is there a way to make the center div act like the background – kind of “fix” it or “attach” it to the background so it moves with it? I hope this makes sense.

    Thanks again for your help.

    Thread Starter sweetflame

    (@sweetflame)

    In case this doesn’t make sense, here’s an example of what I would like the behavior to be: https://annabelleleetv.blogspot.com/ . If you try resizing the browser, the content still remains in the white part of the background. If you try that on my blog, it doesn’t.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Margins in Firefox vs IE’ is closed to new replies.

Tags