Support » Fixing WordPress » IE breaks my blog

  • Resolved mkgago


    In Firefox 1.0, my blog, which uses WP 1.5 and the default Kubrik theme, looks fine:

    In IE 6.0 , however, several things are screwed up: the main content is too far to the left, and the sidebar is pushed down to the bottom of the page, and the main content is pushed to the left.

    I have a guess as to why this is happening: I recently added “Recent Comments” to my sidebar, and one of the comments has an extremely long URL in it. To fix that, I created a custom class called “.recent-comments” and set the overflow to hidden in the style sheet, and surrounded the recent comments in a div that calls the custom class.

    I’m guessing that it’s the long URL that is throwing everything off, and that the overflow css tag works in Firefox but not in IE.

    Am I right?

    And if so, what is the solution to this problem.

    Thanks for your help!

Viewing 9 replies - 1 through 9 (of 9 total)
  • starting to find some explanation for this. From this site:

    what happens to text that is tool long to fit in your DIV

    How this is handled depends on the browser being used to view it.

    Firefox, and similarly standards-compliant browsers, will allow the long url string to simply spill out of the div. It will overlap whatever is in the next box, but it does not affect the width of the box it is actually contained in.

    IE, on the other hand, uses an auto-enclosing behavior. Should the content of a given element exceed the width of it’s container, IE stretches the container to keep the content inside.

    Note how this is different from FF’s handling. FF simply allows the content to exit the confines of the box, but leaves the box alone. IE actually makes the box bigger. This can be very problematic since a bigger box frequently means a broken layout as floated elements suddenly no longer fit in their allocated space, absolutely positioned elements no longer match to their coordinates, etc.

    Sadly, there is no known way (oh please, someone prove me wrong!) to make IE stop auto-enclosing.


    still don’t know how to fix it, though…

    If anyone else is running into this problem (text in the sidebar is too big for the div–in Firefox, you can set the overflow to hidden, which hides it, but in IE, content that is too big simply widens the sidebar and screws up the layout of the page) here is what I’m doing to fix it:

    1. workaround #1. I set recent-comments to display only 8 (instead of 10) comments, which takes out the one with the too-long URL. This is just a temporary solution.

    2. What I’m thinking about doing is adding a new column to the comments table in the database. The default for the new column will be 0. But if the comment contains an overlong URL, I will manually change that 0 to a 1. And then, in the recent-column script, I will set it so that it does not display any comment with a 1 instead of a 0.

    Does that make sense? can anyone thing of a better or simpler solution?


    You’ll find a link to the plugin I used there. It’s the best (and easiest!) solution I’ve found so far.

    Moderator James Huff


    You’re having the same problems I was. First, do you have any tracker code in the side bar? For me, it was my StatCounter code. I had to move to the footer. Also, try removing all images (if any) from your sidebar. That’ll get your sidebar back in the right place. For the pushed over content, open the Header Template (header.php) and look for:
    #header { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; }

    remove margin: 0 0 0 1px;

    You should have:
    #header { margin: 0 !important; padding: 1px; height: 198px; width: 758px; }

    thanks (belatedly) for the help, guys. macmanx, I don’t see those lines in header.php (using default kubrick in 1.5)….

    Moderator James Huff


    It should be in this block:

    /* Because the template is slightly different, size-wise, with images, this needs to be set here
    If you don't want to use the template's images, you can also delete the following two lines. */

    #header { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; }
    #headerimg { margin: 7px 9px 0; height: 192px; width: 740px; }
    /* END IMAGE CSS */

    lol. looks like I took this advice to heart, which is why the lines don’t appear in my header.php:

    “If you don’t want to use the template’s images, you can also delete the following two lines.”

    Should I put them back in?

    Moderator James Huff



    weird. I put the lines back in, and which screwed up the image a bit (it looked fine in Firefox, but IE put a little white line above the header image).

    I changed the padding to “0 px,” which helped, but now in both Firefox and IE, the background of the header doesn’t exactly meet up with the background of the main content. Any ideas?

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘IE breaks my blog’ is closed to new replies.