Ok, I did my first site from scratch with CSS/HTML, and was very happy to finish it. I figured there would be no problems with it as it is pretty straight forward CSS code(it even validates!), but just for the heck of it I’ll try to look at it with IE..
Well, guess what, whole positioning was messed. Nothing was centered like it was supposed to.
All help appreciated!
you need to do this because IE 6 and below doesnt understand auto margins and doesn’t center them, but fortunately (in this case) it doesnt understand text-aligns that well so this trick should fix it, if i said something wrong then someone please correct me.
Thanks, that did the trick with centering. But positioning is still messed, looks like Position:relative isn’t working well with anything earlier than IE7 (IE7 itself excluded).. Anyway to fix that as well?
EDIT: The positioning problem is caused by the Unit PNG Fix. :( But my whole design is based on PNG’s transparency so it’s pretty bad news. Any way to alter the Unit PNG Fix to make it work?
EDIT2: Ok, deleting the "es.position="static"" part from the PNG Fix’s script did it. (it is at the end of the script ), so now it works with anything newer than IE5.5! :) (everything still works even with IE5.5, except the transparency. But the positioning is still correct .
What I had to do to make the site work in all browsers was the fix rayishu posted in the post above, to make the centering work. Then I had to add 2 more div’s "Content-text" and "Footer-text" to make the padding work. As FF made the div larger as padding grew, and IE didn’t. So my "Content" and "Footer" div’s are just for background and the "*-text" ones are for the text inside them. And finally I had to alter the PNG fix JS to make it not mess up the Position: relative.
My conclusion is that different browsers SUCK! Everybody start using Firefox, Safari… anything not IE really. Or at least update it to latest version if you really want to use it.