[Ehab]

after finally double-checking everything, testing in firefox and ie7 as i thought most sane ppl would do, zipping everything together and sending it over to the client and getting half-paid, i was told yesterday that the website does not work in IE6 as it should. and surely enough, i checked it and it looks like crap. i wanted to make the argument that not too many ppl use ie6 anymore and then i checked the w3school statistics on it and theres a considerable percentage of ppl out there still using that shit-rendering browser. so i think im gonna have to fix this. the thing is, i have no idea what i coded wrong, it is my first attempt at hand-coding xhtml and css. i was wondering if anybody here can give me a hand or point me in the right direction ?? or do i just trial and error different things until i get it right ?? the website i need to fix is here. everything is thrown very nicely to the right in ie6 and a lot of divs are not aligned properly and some are pushed all the way down to the next line making it all very abstract looking..

[Shiro]

You can use the Internet Explorer Web Developer Toolbar to see what is going on on the page. It's not as good as the web developer toolbar for FF, but it's better than nothing.

Then, you can use conditional comments to create an IE6 only stylesheet, making whatever changes necessary to make your site work in IE6. By using conditional comments, anything you put in that stylesheet will only affect IE6 and nothing else (as long as you make it an IE6 conditional comment).

[karmedic]

I seem to recall margin: auto not getting computed correctly in some modes for IE6. Getting around that (with CSS) involved setting the text-align to center. Could be wrong on that ...

More importantly, though, is the float: left on each container. Any particular reason for that? All containers are block (i see you are not floating the li's in the ul's so the i think the ul should still be inline) so you should get a natural wrap of content. This might be more palatable to IE6 - it needs all the help it can get

Those are my guesses ... hope it helps.

[Shiro]

text-align is deprecated and as such shouldn't be used.

[roto]

Browsershots will be your friend through this process. Good luck!

[karmedic]

@haku - text-align is deprecated? I see that <center> and <div align="center> is deprecated on the W3C (Alignment, font styles, and horizontal rules in HTML documents) but they do list the CSS property of text-align as valid for 2.1 (Text and on preceding link).

[Shiro]

I don't know what I was talking about when I wrote that post! Text-align isn't deprecated, and I actually use it a fair bit myself!

Chalk it up to a temporary attack of stupidity.

[Ehab]

thanks for the input guys, i think i figured it out. IE6 was doubling all the margins i put on for some reason, it doesnt do good with margins i think. so i padded the main containers instead and took the margin settings off. looks ok for now, good enough for the client. good call on that unreasonable floating of everything, karmedic.. i got a little trigger happy with the 'float' thing thought i needed it for every div. i took it off most of them and they still look fine. and that browsershots website was very usefull too, thanks roto. i actually had to install ms virtual pc and downloaded a 1.3GB windows xp image loaded with ie6 just so i could test everything locally. but i guess all i need with browsershots is a little hosting space somewhere, signed up for some on 110mb.com. thanks again guys, this forum continues to prove very helpful indeed

[karmedic]

Excellent! For different flavours of IE on the same machine you can also try:

evolt.org - Browser Archive

browsershots + 110mb is certainly a great way to go too.