I’ve been working on a three column layout for the first time
using HTML5 and CSS3 where possible. Everything floats nicely
in Firefox, Chrome and Safari [ATTACH]see here[/ATTACH] but
in ie7 the third column breaks and appears below the first
[ATTACH]see here[/ATTACH]. Below is the CSS I’m using.
Any ideas as to what I’m doing wrong?
Perhaps have another try at posting the links above, as they didn’t work, but would be quite handy. Ideally, post a live link. Some of those styles won’t be recognized by IE7 (and even 8) you realize?
If for example you have a missing or corrupt doctype then it’s probably the double margin bug on floats which occur in IE6 and under but in ie6+ if in quirks mode (no doctype)
Then you have a column at 30% width and 5% margin. What pixel width is that then exactly ?
It will be rounded up in IE and may be rounded up too large to fit if all your other columns fill the full width. Use pixel widths for your columns and margins when the parent is in pixel widths.
Add display:inline to your floats anyway to cure the ie6 double margin bug. It applies to any floats that have side edges adjacent to the containing block and have margins applied on that side.
@Paul O’B I originally had pixel widths but when that didn’t work experimented with
percentage widths thinking that ie may round percentages more loosely than pixels.
Anywhoo…you can see the full html/css here 3 Column Test
@Paul O’B I originally had pixel widths but when that didn’t work experimented with
percentage widths thinking that ie may round percentages more loosely than pixels.
Exactly what I was thinking. When you did pixels, why didn’t you lower the widths of the boxes until it fit in IE? Then you can use the IE developer toolbar to see if there’s maybe a child inside causing the issue.
When I float three things, I wil use 30% width (instead of 33%) but I wouldn’t then also use a 5% margin. I’d either be really careful use no margin or a px margin. Browsers have lots of fun adding two %'s and their total results will not match each other. Esp as Paul pointed out, they are floated inside a fixed-width px container.
Now the broadest width I can get away with is 275px on section div. 276px, IE7 wraps.
Now, this only happens in IE7… when the margin-right: 45px is a margin.
Change it to padding-right. Suddenly, Firefox is just as intolerant as IE7.
This tells me that some child (and I’m strongly suspecting the form) is making that last div wider than you think in IE7. When we use padding, this is added to the total width of the box itself, so 275+45=320px.
When we use margin, the total width of the box is still 270px, but the amount of space it claims for itself is +45px = 320px. But I’m thinking somehow a wider child is being counted in IE7, meaning that last box is 45px margin + 275px + something from a child stretching the width of that box.
I’d just make the inputs less wide.
And I’d ditch the tranny doctype, I dunno what that’s doing in there… (has nothing to do with this problem tho)
@Stomme poes nice one mate. That does the trick. It’s a shame I can’t broaden
the width a little more than the 275px though to fill the 960 wrapper. You mentioned
that you think the form is causing the last div to be wider in IE7. Do you think the
input & text area both 270px with a 5px border and 5px padding might be the cause?
could I add an “if IE” statement to the stylesheet so that I could keep the width
to 290px for all other browsers or would this be pushing web standards?
I realise you must have changed things since you posted the link but all I see is 3 columns at 275px width and a a 45px right margin all fitting nicely into the 960px width in all browsers.
You can increase the width of the final column in Firefox because you have removed the last margin of 45px so you have 45px more to play with.
but all I see is 3 columns at 275px width and a a 45px right margin all fitting nicely into the 960px width in all browsers.
Yeah that was the smallest I could do and not have wrapping in IE7. The original link was something wider… 300px? Which worked in everyone but IE.
could I add an “if IE” statement to the stylesheet so that I could keep the width
to 290px for all other browsers or would this be pushing web standards?
Though if it were me, I’d reduce the form a bit. Make the inputs somewhat smaller and then see if I could widen those divs.
Though I like Paul’s idea: remove the right-margin on the last guy and more stuff fits in everyone. If you’re willing to add a class to that last one, you can do this down to IE6 if you want.
then if could be
section div.last {
margin-right: 0;
}
or something. Then less worry about :last-child or :nth-child() not being cross-browser yet.
