Mac IE 5.2 positioning glitch

I'm just taking the plunge from tables to CSS. So far, so good (I think.) Anyway, the site I'm working on looks fine in IE/Mozilla/Opera/Safari, but in IE 5.2 for the Mac, the div containing the text shifts off-center to the right. Any help on correcting this or improving the page is appreciated. I've included a link to the page & the stylesheet is included below.


Website Link

#about {
position: absolute;
left: 181px;
top: 110px;
width: 181px;
height: 141px;
}

#aboutcont {
background-color: #FFFFFF;
position: relative;
height: 600px;
width: 724px;
border: 1px solid #000000;
margin: 0px auto;
top: 30px;
padding: 0px;
overflow: visible;
}

body {
background-color: #999999;
background-image: url(images/bg.jpg);
text-align: center;
}

#contact {
position: absolute;
left: 543px;
top: 110px;
width: 181px;
height: 141px;
}

#contactcont {
background-color: #FFFFFF;
position: relative;
height: 580px;
width: 724px;
border: 1px solid #000000;
margin: 0px auto;
top: 30px;
padding: 0px;
overflow: visible;
}

#contacttext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
top: 265px;
position: absolute;
background-color: #E5E2E2;
border: double;
height: 265px;
left: 3%;
right: 3%;
padding: 3px;
}

#client {
position: absolute;
left: 362px;
top: 110px;
width: 181px;
height: 141px;
}

#disclaimer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: left;
top: 290px;
position: absolute;
padding: 3px;
left: 3%;
right: 3%;
border: 1px dotted;
}

#ftr {
position: absolute;
top: 518px;
left: 45px;
}

#ftrabout {
position: absolute;
top: 578px;
left: 45px;
}

#ftrcontact {
position: absolute;
top: 558px;
left: 45px;
}

#ftrindex {
position: absolute;
top: 365px;
left: 45px;
}

#main {
background-color: #FFFFFF;
position: relative;
height: 540px;
width: 724px;
border: 1px solid #000000;
margin: 0px auto;
top: 30px;
padding: 0px;
overflow: visible;
}

h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-variant: small-caps;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #000000;
}

h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-variant: small-caps;
color: #000000;
text-align: right;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #000000;
}

#hdr {
position: absolute;
left: 25px;
top: 25px;
width: 282px;
height: 74px;
}

#index {
background-color: #FFFFFF;
position: relative;
height: 400px;
width: 724px;
border: 1px solid #000000;
margin: 0px auto;
top: 30px;
padding: 0px;
overflow: visible;
}

input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}

input.button {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
border: 1px solid #000000;
background-color: #FFCC99;


}

#noel {
float: right;
}

#noelp {
text-align: right;
}

#practice {
position: absolute;
left: 0px;
top: 110px;
width: 181px;
height: 141px;
}

#robert {
float: left;
}

table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}

#text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
top: 265px;
position: absolute;
background-color: #E5E2E2;
border: double;
height: 225px;
padding: 3px;
left: 3%;
right: 3%;
}

#textabout {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
top: 265px;
position: absolute;
background-color: #E5E2E2;
border: double;
height: 285px;
left: 3%;
right: 3%;
padding: 3px;
}

textarea {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}

ul {
list-style-type: circle;
line-height: 18px;
text-align: center;
}

It would be a suggestion not to bother with it at all. Honestly, designing a law firms website to be compatible with an antiquated browser, that is known to have one of the worst page rendering engines in the browser world.

and I quote: http://lists.evolt.org/archive/Week...825/147529.html



Here are some known issues... that have been documented at least semi-formally

http://www.l-c-n.com/IE5tests/sitemap/

If you need an explanation of why it's so shaboinked go here:

http://www.hut.fi/u/hsivonen/soup-dom.html

If it works in Safari, let it be... oh let it be.

I noticed some bugs in IE 5.2 for the Mac on another site I've made. The bugs are completely baffling.


The content is still legible, which is the most important thing. I'll just forget it. Thanks!

Keep in mind though that depending on who your end-users are, there might be a lot of Mac users who haven't made the jump to OS X yet. And they're probably all using Mac IE. What I do is use PHP to detect Mac IE and load up an *additional* style sheet for those users. In other words, everybody gets the same style sheet, but Mac IE users get a 2nd one which re-defines some of the classes. It's not sexy, but it works well -- makes it possible to have perfect layout in other browsers *and* Mac IE at the same time



Then in your header do this: