Weird bug in IE5/Mac

Now this must be the weirdest bug I’ve ever seen. A random word seems to push the width of a p tag one pixel further out which pushes my left hand column down the page. To check for yourself, open IE5 on your Mac.

This is the page that pushes the left hand column down.

This is the page that looks like it should.

The difference? A space in the word develop in the first paragraph. That’s all. Guess how long it took me to find that one.

If anybody has experienced this as well, or can point me to another reason why this might occur, I’d be very grateful to hear.

3 Responses to “Weird bug in IE5/Mac”

  1. Iwein Says:

    From Christian Wach on underscore (http://www.under-score.org.uk/

    Hmm, yeah. However, it only occurs when I push the font size up.

    What’s the logic of floating the wheelchair image div left, then
    floating the sidebar right, then floating the rest of the content left?
    Why not have all the LHS content in a single div (floated left) then
    the sidebar with a margin-left defined? That way you wouldn’t encounter
    the issue, methinks.

    Another IE5 gotcha is that if you have line-breaks in the code, then IE
    assumes that the items do not sit side-by-side, but that there is a new
    line. Crazy, I know, but that’s the way it is, IME. Mac IE5 requires
    (pseudo-code):

    ….

    Left content, where you *can* have line-
    breaks, but then the following tags…

    …must be on the same line.
    Sidebar content

    ….

    Someone correct me if I’m wrong, but I’ve found this to solve a lot of
    Mac IE5 weirdness.

  2. jon b Says:

    why not ignore such a useless piece of shite??

    Why worry about getting things looking right for a browser which has such a small market share on, though I hate to admit it, a very small installed base?? And of that installed base, how many will actually be using IE 5 on OS X, the OS 9 versions are actually better?

    on another note, it’s always worth floating div’s the same way, even if they are to sit next to each other (one on the left, one on the right) - this way you can use clears without interferring with the columns.

    j

  3. jon b Says:

    try changing…

    .leftCol {
    margin:0;
    padding:0;
    width:475px;
    float:left;
    }

    .rightCol {
    margin:15px 0 0 25px;
    padding:0;
    width:250px;
    float:right;
    text-align:left;
    }

    to

    .leftCol {
    float:left;
    margin:0;
    padding:0;
    width:475px;
    }

    .rightCol {
    float: left;
    margin:15px 0 0 25px;
    padding:0;
    width:250px;
    text-align:left;
    }

Leave a Reply