OK, can anyone tell me why this looks like dog-poopoo under IE6 for Windows, but seems to look fine on most other browsers?
I've included some extra classes to show how I'm doing the dual-column layout and make sure that isn't part of the problem. I've spend COUNTLESS hours on this problem and I'm rather frustrated at this point. Any help will be greatly appreciated. This being my first CSS project it has been extremely frustrating. Thanks!
Here is the link to the sample:
The big question is, why does IE6 sees the absolute right of podtitle be where the "right" edge is (the right edge of rightcol) is, and not where the margin is set at (50px in from the right and left)? Seems like in all other browsers an absolute right only goes as far as the margin edge.
I've created a second example so something that kinda works on most browsers, but now a width of 80% means two different things for IE6 and other browsers:
In IE6 80% width means 80% of the rightcol, but for others it seems to mean 80% of the body. What gives?
Oh yeah, and my DOCTYPE is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
There is already a thread going on here:
Weird layout on IE6 for Windows and rounded corners
The doctype you are using is causing the browsers to render in quirks mode, which means they display like old browsers.
If you use
<!DOCTYPE htm PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> you should get better results with IE6.
Hope that helps