[tikki]

Greetings,

I am working on a troubleshooting page using PHP, XHTML, and CSS. I am trying to be as standards compliant as possible, but it seems that IE for the mac doesnt like my CSS image positioning. can someone please take a look at tell me how I can hack/fix it so IE and Safari give me the same output.

On IE for Windows, it looks fine. Just the Mac OS X version sucks.

http://www.carpeaqua.com/agcomm/
http://www.carpeaqua.com/style.css

thanks for your help.

[tikki]

Please?

[ism]

tikki,

I've taken a quick look. Gecko rendering and ie-mac rendering look pretty similar to me


Camino


Mac IE


Looking at the html though, you've used an id of form twice, ids should only be used once, i.e using ids for right and left colums makes sense. However, your stylesheet uses classes, so I don't see why you got both ids and classes of rightcolumn, leftcolumn.

Personally i'd change it so the header, and column divs all use ids.

Then there are a couple of options on positioning.

1) Relative positioning

Code:
#leftcolumn {
position: relative;
top: 10em;
float: left;
left: 0px;
width: 50%;
}

#rightcolumn {
position: relative;
width: 300px;
margin-left: 50%;
top: 10em;
}

.header {
position: relative;
top: 0px;
width: 80%;
text-align: center;
margin-left: auto;
margin-right: auto;
}

Play about with widths, padding and margins. etc. I'd personally use ems for positioning and text so if anyone changes the size of their text everything stays nice

Here the width of the left column is set and the right hand column moved over by that width using margin-left. The left hand column is floated

2) Absolute positioning
With this floats aren't necessary. Specify it something like this:

Code:
#leftcolumn {
position: absolute;
left: 0px;
top: 10em;
}

.header {
position: absolute;
top: 0px;
width: 100%;
text-align: center;
left: 0px;
}

#rightcolumn {
position: absolute;
top: 10em;
right: 0px;
width: 310px;
}

This seems better since the size of the right hand column is set and eveything else is fluid from that, i.e everything is driven from the right hand side. Although theoretically possible to achieve with floats and relative positioning it's probably harder to do.

Hope this is some help.