Joho the BlogThis page is broken in IE - Joho the Blog

This page is broken in IE

My switch from a tables-based layout to CSS has worked pretty well in Firefox but in Internet Explorer 6.0 the entire right-hand column is missingpushed down the page. Hmm. I’m stumped. But it doesn’t take much to stump me.

[Note: The following problem was fixed, thanks to Yaron’s comment, below.] Plus, in both Firefox and IE, clicking on the “archive” or “search” link right below the “Colorblind?” style links causes something very unpleasant to happen. Here’s a the default css style sheet.

I know I’m doing something obviously dumb, but it’s just not obvious to me. That’s the thing about what’s obviously dumb – the dumbness consists of the fact that the obvious isn’t.

20 Responses to “This page is broken in IE”

  1. Hi,

    The problem with the search and archive links is related to the property overflow:hidden in the #wrapper style in your CSS.

    viewing your site with a user style sheet containing:

    #wrapper {
    overflow: visible;
    }
    solves the problem.

    This is listed in an area of your stylesheet with comments about IE5 compatibility. So whatever it’s supposed to solve, consider solving it differently.

    BTW, the main page still has lots of style tags and style-related HTML attributes (e.g. FONT) embedded in it… If you really want to switch styling to CSS, consider moving all of those to the CSS files as well.

  2. Yaron, thanks for the tip. It’s fixed now.

    And, yes, sigh, I do use the font tag. My high-minded excuse is that there is room for both procedural and declarative markup. My actual excuse is that it’d be a pain in the ass to fix it. But I’ll make some strides, i.e., using a CSS style for oft-used font tags such as those that format the footers of my posts.

  3. The column falling to the bottom is a consequence of two things. You have frozen the width of the layout, so the browser can’t compensate for over-wide things by making the page wider. So my expanding my browser width doesn’t fix anything. I also still see it on your main page.

    The over-wide case, for your current main page, is the large video frame. This causes the central column to be so wide that the right sidebar doesn’t fit and the browser pushed it to the bottom. The tip-off: Go down to notice where the right sidebar appears and notice the overlap with the body column just above. The culprit is always something in the central column that won’t fit and can’t be word-wrapped/flowed.

    Second tip: Put the column with a flexible width on the far right and put fixed-width sidebars that you can manage the width of on the left.

    Third tip: Let us adjust what the width for viewing is. ‘Tis not a magazine page. We have the tools at hand. That might also help with accessibility, especially enlarging the default font sizes by readers who need that.

    Snarky tip: Tables don’t have this problem. Maybe simplifying the tables you had would be better.

  4. Dennis, I tried to set it up so that the left and right sidebars would be a fixed width but the center column would size as a percentage of the page. But I couldn’t figure out how to do it.

    I’m not quite sure what your second tip is suggesting. I have three columns, called for now LeftSideBar, RightSideBar and Content. I want LSB on the left, RSB on the right and Content in the middle. I don’t want RSB to be flexible and Content inflexible. I want Content to be flexible and positioned in the middle. Is that possible? Any hints on the parameters?

    In any case, thanks for the help so far.

  5. Oh, sure! Send us late readers on a fool’s errand looking for a flaw which has been fixed! Ya coulda mentioned that back in the original thread. [pouting]

  6. The internal linking problem is fixed, thanks to Yaron. The IE problem is still a problem, although I’m getting closer thanks to Orcmid.

    I’ll update the main post. Sorry for the foolish errand, Charlie.

  7. OK, I think the problem is that you have too many constraints: LSB fixed, RSB fixed, Content flexible, page fixed. When Content has to be a certain width because of something that can’t be shrunk or flowed, IE does what it can to honor the constraints. (I don’t know what FireFox and others do under the same conditions.)

    My recommendation is to find a way to unconstrain the full width. You might want to set a preferred width for the Content in a way where it can expand only if it has to (that might be default behavior, I don’t know).

    I don’t know enough about CSS to know how to do all of this (and I notice many other sites that have the same troubles). I bet Yaron knows, though.

  8. I miss your right column. But I still have your left column. How is the fifth column?

  9. Max Design’s Floatorial has what I’m looking for. I’m trying it out, with some luck and with some weird anomalies (the left and right columns extend forever), but there’s hope…

  10. If it doesn’t work out, there’s a different solution that will allow the columns to look like they are now, with fixed sizes. Not as good as having a flexible content column, though.

    The problem with the column is because IE and Firefox (and other browsers) have a slightly different box model, meaning that when it comes to sizes of elements they treat what is inside the width, and outside width, differently.

    You gave exact sizes for all your three columns, and the wrapper. In Firefox it looks fine as is, but the left-padding you have for the content column makes it wider in IE, and so doesn’t leave enough room for the right column.

    If, for example, you’d remove the padding, sticking the text to the left, you’ll see the columns align properly in IE, but a gap between the columns in FF.

    So a possible hack is to increase the width of the wrapper, allowing that gap to be formed. And in order to hide the gap, create another smaller div as a secondary wrapper, that goes only around the three columns, and give it the same background colour as the content column (and make it float left, or it won’t expand to fill the area).

    This will make everything look alright in IE, and will just make the content column seem slightly wider to the right in FF, which is not really noticeable.

  11. I really like the floatutorial that you found, especially the layout’s stretching to accomodate my browser window (and shrinking as well as it can) are both good. I’m not sure about freezing the width (I prefer to control it by sizing my browser) and how that interacts with something that is wider and inflexible in the content (such as an image). I look forward to seeing your results.

    PS: After lobbying about wanting to be able to size the fonts from my browser, I checked and see that my Blogger-formatted blog doesn’t allow it either. Arghh.

  12. Ctl++ increases font sizes in Firefox.

    Anyway, I’ve been meaning to put in a larger size style sheet as an option, although that only gives one more choice.

    Yaron, I’m working on your suggestions. Thank you.

  13. And geeks wonder why we ordinary mortals don’t use CSS much more . . .

  14. David,

    It’s not that you’re doing something obviously wrong; it’s that the programmers of IE did something unobviously wrong. They misinterpreted the way the box model should be implemented. Basically, what’s happening is this: you have specified widths for each column and then added padding. The specification states that when you add padding, this padding is counted as part of the set width. So Mozilla/Firefox will set the width of your left column to 150 pixels, and then subtract the 8 pixels of padding that you’ve set from that to leave 142 pixels of available width for text.

    IE doesn’t work this way. It takes the 8 pixels of padding and adds it to the 150 pixel column width, giving you an available text width of 150 pixels, but a complete column width of 158 pixels.

    There are two possible fixes. You could adjust the width of #wrapper so that IE sees a width of 734 pixels plus 24 pixels, or 758 pixels. That would make #wrapper wide enough to fit all three columns in it in IE. One way to do this is as follows:

    #wrapper {
    width: 734px !important;
    width: 758px;
    }

    The !important qualifier is ignored by IE but honored by correctly-written browsers. So IE will see a width of 758 pixels, and Mozilla, Firefox, Opera, and Safari (among others) will see the correct width of 734 pixels.

    The other approach, if you want the site to look identical in IE and other browsers, is to do this same thing on each div:

    #block1 {
    width: 150px !important;
    width: 142px;
    }
    #content {
    width: 400px !important;
    width: 392px;
    }
    #block2 {
    width: 160px !important;
    width: 152px;
    }

    I hope this helps.

  15. One thing I forgot to mention; the order of the two directives is important. Because IE doesn’t respect the !important qualifier, it uses the last value it sees. If you put the IE-only value before the value marked !important, IE will use the !important value.

  16. Exceptionally clear explanation, ralph. But I’ve tried it and FF works fine, but IE is still addled.

    I’m knocking off for the weekend…I’m going to a no-connectivity spot. I’ll play with it after that. Thanks for all your help.

    (Note to burglars: While we’re away, Chuck Norris is living in our house, and he’s in a mean steroid-withdrawal phase.)

  17. Exceptionally clear, but backward. IE puts the padding inside the width, and correctly-written browsers add it to the width. I really should know this by heart by now; I’ve only done this several hundred times at this point….

    Corrected code:

    #wrapper {
    width: 758px !important;
    width: 734px;
    }

    or

    #block1 {
    width: 142px !important;
    width: 150px;
    }
    #content {
    width: 392px !important;
    width: 400px;
    }
    #block2 {
    width: 152px !important;
    width: 160px;
    }

    Also, note that the !important has to come inside the semi-colon; your current code has it after the semi-colon, where it has no effect.

  18. Thank you, Ralph! I’ll fix it when I’m not on borrowed dial up…

  19. Hmm. A little bit broken-er. Now the FF version has a gap between the 2nd and 3rd columns, and the IE version has the same old problem…

  20. The problem is that the YouTube videos on the page are slightly wider than your center column. IE expands the column so they fit, making the center column too wide to allow the right column to fit. The area in the center column available for content is 392 pixels wide, but the videos are 425 pixels wide.

    I downloaded the page on to my PC and tested with these values and got it to work in both Firefox and IE by making the center column wide enough to fit the YouTube videos:

    #content {
    width: 433px !important;
    width: 425px;
    }
    
    #wrapper {
    width: 767px !important;
    width: 765px;
    }

    This makes the center column wide enough to contain the YouTube videos, and there are no gaps between columns in either IE or Firefox.

    What I did here was to increase the width of the center column so that the width available to content is 425 pixels; add the 8 pixels of padding on the left and you get 433 pixels for FF etc., and 425 pixels for IE.

    I then had to increase the width of the container so that everything would fit. The value for FF is 433 + 160 + 150 = 767 pixels. For IE, the correct value is 765 pixels, but I’ll be damned if I can explain why. It should also be 767 pixels, but something is collapsing 2 pixels, and I’m not sure what it is. Go figure.


Web Joho only

Comments (RSS).  RSS icon