Support » Themes and Templates » WordPress looks fine in Firefox, not in IE

  • When I open up my wordpress blog in Internet Explorer, the sidebar always falls below whatever is on the left side(post side) of the screen. In Firefox, it is fine, the sidebar stays right at the top next to the newest post.

    I’ve read on these forums that the problem most likely lies within the CSS and that I should use * html so that IE specifically calls that and not what firefox is calling.

    However, I’m not sure where the problem lies in my CSS, so I don’t know where to throw in the * hmtl. If someone could look at my sourecode/CSS ( and decipher what the problem is, I would really appreciate it.


Viewing 15 replies - 1 through 15 (of 20 total)
  • well, can you post a url so we can see what you’re talking about?

    And all you can really do is play with your coding, pulling things out and sticking things back in, until you encounter what’s causing the problem.

    Sidebar drops in IE are generally the result of graphics which are too wide for their containers. Can also happen sometimes with huge long links.

    I don’t think it has to do with the image size in the posts, because I’ve tried posting without images and the same thing happens. Even when there is no post, it still drops lower.

    Here is a link to my CSS.

    I’m guessing it’s the archive link. Try taking it out. If your sidebar is OK, then that link is too long.

    I just tried taking the archive link out. The sidebar stayed in the same place. I also took out the ‘Blog Links’ and any other links that seemed long, but that didn’t work either.

    Any other ideas?

    I have a couple of things to note.

    1) You have multiple instances of things in your stylesheet. For example, you have two “body”, “#header” and “#page” elements. I didn’t read it (I skimmed) enough to see if you have multiple calls for the same thing – like margins set so in one and differently in another – but the last one mentioned will override anything you have in the first.

    2) IE views margins and padding differently than IE. For example, if you have a div that’s 200 pixels wide, with 20 pixels of padding, Firefox will render it as such:

    200px + 20px (on left) + 20px (on right) = 240px total width.

    IE will add in the padding, but still make the content div only 200 pixels wide, so that content is actually 160 pixels wide with 20px padding.

    Then, on top of that, IE also likes to add in a nice 3 pixel margin to stuff like images and divs. The 3 pixels doesn’t seem like much, until you try to adjust your math to what you have added it up to be – not knowing about the 3 pixel difference in IE.

    Now, what’s happening is you probably have the 3 pixel issue showing up, and it makes your divs too wide, and therefore causes it to drop. Also, if your margins and padding are off, the same thign will happen because of the differences in the way the two browsers render margins and padding.

    Do NOT use the *html thing. It’s a hack. Avoid hacks at all costs. When IE7 comes out, most hacks will be rendered useless and your site will fall apart in IE7, causing you to go back through with the same headaches all over again.

    In between the <head></head> of your document, put this in:

    <!–[if IE ]>
    <style type=”text/css”>
    * {

    It’s called a “conditional comment”. It will target IE browsers only, and leave the others to ignore it completely. What the above says: “*” is a wildcard – saying “absolutely everything on the page should have a margin, padding and border of 0”. Anything that specifically states a margin, padding or border will still have it – but by default, it’s all removed.

    If you still have the drop, then your math is off on a div and you need to add the adjustment to the conditional comment above.

    That will fix your issues in IE.

    And don’t forget to validate your website:

    Currently, you have 11 errors which should be addressed, if you’re commited to providing standards-compliant XHTML.


    thanks a lot for the help. i installed that code in the sidebar section of my css and it brought the sidebar back up to where it should be.

    however, i can’t figure out what to change in order for the sidebar and left side(post side)to have space inbetween them. i changed the values insides that IE code you gave me, but nothing changed. can you help me out again with this?

    thanks so much.

    no, no.

    You don’t put the conditional comment inside your stylesheet. It won’t work there. You put it between the <head> and </head> tags of your PHP file. It’s to call in the stylesheets for your document – you can’t call a stylesheet in from within another stylesheet. Doesn’t work that way.

    As for “space between the content and sidebar” just set your padding for the content:

    .post {
    margin: 0 0 40px;
    text-align: justify;
    padding: 0 10px;

    (and by the way, pizdin has a point – validation is important!)

    I wasn’t sure which PHP file to throw it into so I tried a bunch and none worked. However, I put it back in the sidebar section of the CSS and altered the .post padding and it seems to be A-OK in internet explorer.

    The only problem is that when you go into the top 3 of my 4 ‘pages,’ the part of the sidebar that is under the text in ‘contact us’ ‘legal policies’ and ‘advertise with us’ shifts over to the left column. don’t know if that has to do with me putting the conditional comment inside the stylesheet or not.

    any tips to clear that up?

    >>I wasn’t sure which PHP file to throw it into<<

    That would be your header file in whatever template you’re using. That’s where the <head></head> tags are.

    as for the sidebar falling under the short content, it’s because your narrowcolumn class is set to float left. Any text longer than the floating div is going to move under the narrowcolumn div.

    However, this is where validation is important: you have a *lot* of closing div tags, but not enough divs openeing them. So you’re closing tags that you probaby don’t want closed in the first place, which causes the weirdness.

    So, the conditional comment doens’t belong in the stylesheet, and you need to validate. Once that’s done and fixed, you’ll prbably have everything cleared up.

    Thanks a lot everybody. I’m all set as far as the sidebar now. I appreciate it.

    me too!!! 🙂

    Hey Everyone,

    Im having some terrible trouble. My site looks great in firefix, but looks terrible in IE and I am not sure why. You can see yourself at

    Any ideas of how to fix this?

    Thanks, Brad

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘WordPress looks fine in Firefox, not in IE’ is closed to new replies.