.check_this_out baby {tenemos: 'tremendo_lio';}

March 17, 2006 3:23 PM

IE CSS Bug #65536: This page works fine in a real browser, but breaks in IE6. The boxes containing "Article 1" and "Article 2" should be to the right of the menu, but instead the text wraps around, and the black border stretches out as if the menu wasn't there. Please hope me. Here's the CSS.
posted by signal to Computers & Internet (11 answers total)

This isn't quite a bug, it's partially expected behavior. You need to set the main column to float as well.
posted by o2b at 3:56 PM on March 17, 2006

Response by poster: O2B: in the the 1 step foward 2 steps back spirit of CSS, that breaks it in FF and Opera, making the entire main column duck under the menu. HTML and CSS.
posted by signal at 4:10 PM on March 17, 2006

signal: I think the problem is that you need to set the column width on both floats. But in your case, if you want the design to stretch to the right-most corner of the screen, it isn't as easy—you could either use percentages for both (which means changing your left column, which is set in ems), or use ems for both (which means the main content won't stretch to the rightmost side of the viewport once the viewport width exceeds the unit value). You could also use pixels for both, but this is by far the most restrictive on page width of course.

I'd suggest you take a look at this example layout—it seems to be what you're after, with the exception of the right column which I think you could work around (you may also want to consider setting your left column width in pixels, instead of using ems, as in the example):
http://www.alistapart.com/d/holygrail/example_1.html

The source article, which explains how it works, is here:
http://www.alistapart.com/articles/holygrail

You should be able to modify the design to suit your purposes, and it has the added bonus of taking IE's layout horrors into account.
posted by ads at 4:56 PM on March 17, 2006

Your current version doesn't work in IE 5/win2000 or in Opera 5/win2000, either (though it does in Opera 8/win2000).

I'd be sorely tempted to do away with the float altogether and to have both the menu and the content positioned absolutely, like so:


.menu1 {
width:12em;
background:#B8D4AE url(imgs/bgMenu1.jpg) repeat-y;
padding: 0.5em;
/* float: left; */
/* margin-right: 1em; */
position:absolute;
overflow: auto;
display: block;
}

.content {
background:#fff;
overflow: auto;
border: solid;
position:absolute;
margin-left: 13.1em;
}

That said: this change makes it a bit ugly in all browsers (except IE, which misinterprets paddings on divs) so it would still need some tinkering. The right border of .content doesn't line up neatly, and the gap between .menu1 and .content is inconsistent.

Paddings and margins on block-level elements are generally a bad idea. The browsers don't treat them the same; for instance, IE 5 assumes that paddings are inside the divs, in contradiction of the W3C standard; and it also doubles left-margins on left-floated divs and right-margins on right-floated divs.

It's more tedious, but I think tends to get more consistent results, for the webmaster to put paddings and margins on every expected element within each div (p, blockquote, h1, h2, h3...).
posted by Tuwa at 5:04 PM on March 17, 2006

Response by poster: ads: the holy grail approach is intriguing, I wonder if I could use a 1px wide right div or just get rid of it? I shall investigate.

Tuwa: thanks for the browser testing. I agree that padding on divs can be tricky, your approach is probably better.

I'll post my final version for future reference.
posted by signal at 8:43 PM on March 17, 2006

(For the record) I just realized I didn't explain the IE/padding thing well with the "inside" comment--IE thinks that a div with a width of 450 px and padding of 50 px is 450 px wide with 350 px left over for content. The W3C (and Firefox) say that the width refers to the content itself and that the padding is extra--so the div would be 550 px wide.

You've no doubt found that out, since you've called CSS padding tricky, but I didn't want to confuse or mislead anyone finding the thread later. ^_^

At any rate, best of luck with it. So far, at least, cross-browser compliance is a bear.
posted by Tuwa at 9:10 PM on March 17, 2006

I've developed this page in beta (or alpha really) but what i did was make sure that the content block had a large left margin so that it would clear the space used by the side menu, like this:

#content {
padding: 5px 0;
margin: 0 40px 0 260px;
}

#side_menu {
float: left;
margin: 5px 5px 0 40px;
_margin: 0 5px 0 20px; /* IE6 Hack */
width: 180px;
padding-right: 15px;
}

I had to put in an IE hack to reduce the left margin of the side menu to match how it appears in Firefox. Perhaps something like this may help.
posted by juiceCake at 10:08 PM on March 17, 2006

Response by poster: juiceCake: your page looks great, unfortunatly when I try to apply it to mine it breaks in FF, the same as ads's suggestion did before.
posted by signal at 8:07 AM on March 18, 2006

Response by poster: For now, I'm using a IE hack to turn the float on and off accordingly, like so:

.content {
overflow: auto;
float: left;
border-top: solid #eee 4px;
padding: 0em 0em 0em 1em;
}
body>.content {
float: none;
}

posted by signal at 8:08 AM on March 18, 2006

Try out /IE7/, it's a JavaScript library that fixes most of the IE CSS bugs.
posted by Sharcho at 9:54 AM on March 18, 2006

Response by poster: Sharcho: I'd already tried it, and it didn't remedy the issue, alas.
posted by signal at 2:03 PM on March 18, 2006