Hi guys! Hope all is well, I’m currently debugging a client’s site for IE6/7 again, and seeing that I don’t have a PC its’ been a bit tricky. I’ve been trying to keep everything clear and easily updatable to HTML5.
http://bit.ly/dCvSUu
Here is the link. When I open it in IE6 via browserlab, the first paragraph looks fine, then everything else goes a bit wonky only one word per line.
IE7 however, pushes everything to the left w/ a huge margin on the left.
If someone could help find the issues, with the CSS that’d be great!
Thanks! for the help again guys!
Hi,
even though the container called “section” is already getting floated, they’ve additionally floated all the p’s inside. Why?
IE sees a float without a width and is shrink-wrapping them. Floats shrink-wrap. I don’t think there are explicit rules for vendors anywhere that says where a browser must start wrapping text, so IE does it as soon as possible while other browsers don’t.
Either remove the float: left on the p’s (don’t see what that’s doing for the author anyway… kind of dangerous to set on just “all p’s on the website”) OR set a width on them (of course you can’t use 100% because they have side padding… you know, that could go on the box they are in instead).
If the whole site depends on p’s floating all over the site, then you’ll have to do something like
#section p {
float: none;
}
or
#section p {
width: 375px; /385 is the container, minus the 10px right padding on p/
}
Remember IE6 has a double-margin float bug on floats in a certain direction hitting that side of their containers, if that wasn’t already taken care of.
hey man! thanks for everything! Looks good now!
I’ve been doing web design / development for the past 2 years, still learning the ins-and-outs, is there anything I can read in regards to all the issues with IE6/7? I keep noticing different issues with every site I do.
Hm, even though it mostly targets IE6, positioniseverything.net is one place to read up on various bugs (most of them I don’t actually hit though).
Then there’s haslayout: http://www.satzansatz.de/cssd/onhavinglayout.html
and Paul’s got a Floats thread in the stickies: http://www.sitepoint.com/forums/showpost.php?p=1374925&postcount=15
and clearing them (also in IE): http://www.search-this.com/2007/09/05/lets-be-clear-about-this/
and Gary’s got a page about enclosing floats (since that’s also got Haslayout involved): http://gtwebdev.com/workshop/floats/enclosing-floats.php
I have a series of example pages you can look at floats and enclosing/clearing in a MOdern Browser and IE6 or 7 (I am hitting some IE6 bugs there so the demo works better in 7 lawlz).
http://stommepoes.nl/floaties.html
Margin collapse (again, IE does it r0nG): http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/
and this
if the white box has Layout, you get this. If it doesn’t, IE looks like moderns.