I have a site. I developed it using CSS without tables. I had tested it on IE7 and firefox and it did come out the way i wanted. But in IE6,the whole site is different, especially the layout containing floats. I tried with the width sizes but in vain. So some css gurus, please help me find out where the problem lies. The website
It's a nice attempt but you are doing a few things wrong. First and foremost, you have id's used more than once. Classes can be used multiple times per page but not id's. You have an id of "maincontent" at least twice. Your IE6 issue isn't that bad. First, IE6 has some float bugs. The most popular is called the double-margin float bug. I don't think that's your problem here since each side is floated either left or right, but you should be aware of it. When there are two floats next to each other going in the same direction (like, a float left and then another one), the one by the edge of the container gets its side margins doubled. The solution is adding display:inline to that float-- floats are automatically blocks, and display:inline is ignored by all other browsers cause they're smart. IE6 for some reason sees it and corrects the extra margins. Another popular bug is called the 3-pixel jog. This is three pixels-worth of margin added when you have either a float next to something static or relatively positioned. I don't think this is your problem this time either because quickly looking at your page it seems there's really only two main floats-- the main left content and the right sidebar. Usually people float only one thing if they have two columns. But if you really want to keep this with the two floats, know that IE6 is much pickier about how much room there is in the floats' holding container for the two floats. While every other browser may add (for example) 300px + 500px and get 800px and you may have a container of 810px, that's great. IE6 may add just enough extra margins or padding to make that total be something like 815px or so and then you get "float drop" (what you have) where the left float stays but the rest of the page is pushed down below. If you don't have the universal reset (sets all browsers margins and padding to zero which is a good thing because every browser has different defaults), add it. CSS * { margin: 0; padding: 0; } The star means "everything" though it doesn't quite get everything (insides of lists seem to still keep their paddings and margins, so they often get zero'd out seperately). So now you're starting at zero. Next you add up the total widths of your two floats-- this includes padding, margins and borders!! See if it is greater than the width of your container. If not, you're doing okay. Next thing to consider with IE6 is that if something inside one of the floats is actually wider than the float and sticking out, IE6 adds that to the width. Alt text is an example (text should wrap but IE6 lets it keep going and then counts its width). If your widths fit inside the container, try adding (just in case) display: inline to each float, and give one of them a negative inner margin of -3px (inner meaning, for the left float, give it a negative right margin... for the right float, it would be its left side). Usually is only needed for one but you need to make each change and check in IE6!! If one thing works don't add anything else. This is a very good thread about floats: http://www.sitepoint.com/forums/showpost.php?p=1374925&postcount=15 Good luck.
I know that exact problem. IE6 has some padding issues. In your CSS file do the following. For width put _width: x px; where x is the width you want in IE6. This is an IE6 hack and will only make it that width for IE6, therefore showing up perfect in all browsers. When will they phase it out!?
Seriously, avoid using hacks. The above is incorrect. There is probably something wrong with the code. Floats are something that is a bit tough to wrap your brain around, but once you figure it out, you will be much better for it. Listen to Stomme poes and learn how to do it the right way.
Hacks sometimes are efficient. When using a float layout there are a lot of problems with IE6. However, when IE6 fades out then we, as web developers, won't have to worry about width differences. If you suggest not using hacks how would you fix the fact that IE6 interprets padding and width differently when using floats? What would you recommend to do to fix it?
^ Most likely a double margin bug which can be easily fixed. And I'd avoid padding like the plague, and instead use margins on the inner elements. Since then, haven't run into any issues like this.
I dislike IE 6 as much as everyone else, but many people resort to hacks WAY TOO OFTEN. In fact, in previous years, when ever I used a hack, it often time had adverse affects on other areas of the site. You can often spend HOURS trying to troubleshoot just to find out that the problem is the hack you used. I recommend reading Stomme Poes's post above, anything I say here would just be a reflection of what she has already stated. Try reading the post she linked to here: http://www.sitepoint.com/forums/showpost.php?p=1374925&postcount=15 Sure IE6 will eventually phase out, but it won't for quite some time. Some people are still using IE5! Just learn to do it correctly the first time without hacks, and your life will be much easier. Now that is out of the way. Here are some things that will make your page work better. 1-I recommend taking care of the 21 HTML validation errors. 2-You have conflicting CSS styles. You have declared width twice on your plantitle class. Also, you probably don't need to define a width at all on this class. In fact, I would remove all unnecessary width declarations that are in the .rightcolumn class. IE6 treats width as minimum-width, and these width declarations are probably pushing your right column a bit wide in IE6. 3-You have padding declared twice in your .plantitle class. They have conflicting values. 4-You don't need both #wrapper and #innerwrapper. They are doing the same thing. 5-You have padding in your .plan and .planlist classes. Adding padding to a fixed width div makes the div wider. In fact, this could be the main issue that is making your float drop below the rest of the content. 6-Ditch the inline styles. They are nothing but headaches.
Actually, LeetPCUser mentioned the padding and (s)he's right-- that is actually more likely than any of the actual float bugs. As far as I know, you don't get double margin with one left and one right float... do you? I've never used any of the _width ot w/idth hacks but IF they are only ever seen by IE6 (and I dunno), they may be pretty safe. I wouldn't recommend them in this case though, because there's waay too much other stuff going on here and as Foo mentioned, all those conflicting CSS lines probably can't be repaired with _width. If margins replace padding, _width would not be necessary. Though if I were asked to build this page, I'd only have one float. The other side (whichever) would be a static div, especially since this page doesn't have liquid width.
For instance, with my website I used the _width because it wasn't going to affect the overall layout of any of the other pages. Also, it looked 100% identical in all browsers tested (IE6, IE7, Firefox, Safari, Opera).
IE6 has some issues regarding on padding and width... also try to look on floats there you might find the answer
Well I've glanced through your portfolio, LeetPCUser, and the graphics are gorgeous. Code wise, though, you've got a moderate case of divitis and a few other things... it's likely that the _width could've been thrown out and the rest of the page set up a little different instead. Now IE5.5 and 5, that box model is so totally broken than I believe you MUST use width hacks to make it match up with modern browsers. You really don't for 6. So unless you're willing to support 5.5/5/IEMac or have a client who specifically requests it, I'd leave it out. When I do resort to hacks, I look at it and ask myself, why am I using that? It's usually either to trigger haslayout (height: 1%; type thing) or lately it's with flexwidth setups, where IE6 and under don't understand "min-width" or "max-width" or "min-height". If something's off by a few pixels in IE6 and I care, I go back through my code to see why it's there and work around with still-valid CSS. (This means I don't see display: inline; on floats as a real hack).
I agree. Your graphics are awesome, and your code is valid (many people don't even care about valid code). One thing that will cut down on your divitus is sliding doors and CSS sprites. I found a really cool tutorial here: http://www.fiftyfoureleven.com/weblog/web-development/css/doors-meet-sprites