WordPress.org

Ready to get started?Download WordPress

Forums

WordPress looks fine in Firefox, not in IE (21 posts)

  1. postmen
    Member
    Posted 8 years ago #

    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 (www.wearethepostmen.com) and decipher what the problem is, I would really appreciate it.

    Thanks.

  2. zombieee
    Member
    Posted 8 years ago #

    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.

  3. vkaryl
    Member
    Posted 8 years ago #

    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.

  4. postmen
    Member
    Posted 8 years ago #

    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.

    http://www.wearethepostmen.com/wp-content/themes/default/style.css

  5. jabecker
    Member
    Posted 8 years ago #

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

  6. postmen
    Member
    Posted 8 years ago #

    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?

  7. Doodlebee
    Member
    Posted 8 years ago #

    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">
    * {
    margin:0;
    padding:0;
    border:0;
    }
    </style>
    <![endif]-->

    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.

  8. pizdin_dim
    Member
    Posted 8 years ago #

    And don't forget to validate your website:

    http://validator.w3.org/

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

  9. postmen
    Member
    Posted 8 years ago #

    doodlebee-

    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.

  10. Doodlebee
    Member
    Posted 8 years ago #

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

  11. postmen
    Member
    Posted 8 years ago #

    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?

  12. Doodlebee
    Member
    Posted 8 years ago #

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

  13. postmen
    Member
    Posted 8 years ago #

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

  14. chillbilly
    Member
    Posted 8 years ago #

    me too!!! :)

  15. Modernnomad84
    Member
    Posted 8 years ago #

    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 http://www.thehookahlounge.org.

    Any ideas of how to fix this?

    Thanks, Brad

  16. yosemite
    Member
    Posted 8 years ago #

  17. sickink2
    Member
    Posted 8 years ago #

    I'm having the same problem with validation. I have _most_ of the CSS working in IE6, using the underscore hack. If I want to eliminate hacks using IE conditionals, do I need to copy all of the hacks into a new style sheet and link that in the conditional comment? And if I do need to copy them into the comment, I'm assuming I write it as a regular style sheet, without the underscores? Or will simply undoing all the margins, padding, and borders in the conditional comment eliminate the need for all those margin, width, and padding hacks?

  18. yosemite
    Member
    Posted 8 years ago #

    From the link in my post, using:
    <!–[if lt IE 7]>
    <link rel="stylesheet" title="Barthelme" xhref="http://www.NOOBblog.com/wordpress/wp-content/themes/Barthelme/iestyles.css" type="text/css" media="all" />
    <![endif]–>
    (for example)

    will redirect all IE versions prior to 6 to the iestyles.css sheet where ALL setting are only seen by IE.

  19. sickink2
    Member
    Posted 8 years ago #

    But in the IE-specific style sheet, how should I write the code? For example, if I had to use _width: 740px in my primary style sheet to make it work in IE, would I format it the same way (with the underscore) in the new iestyle.css file? Or do I just format it as I would normally?

  20. yosemite
    Member
    Posted 8 years ago #

    Format it normally, no hacks (no _,* or \).

  21. dtclarinet
    Member
    Posted 7 years ago #

    doodlebee- with that header code you suggested, am I supposed to un-comment it? (right now it's commented out, and with other code, that means it's skipped over.

    Also, with IE 7, my colors are not showing up, no matter what theme I use. The layout is fine, just no background colors or background anything.

    http://glitteringstew.com/muse

    thanks,
    david

Topic Closed

This topic has been closed to new replies.

About this Topic