CSS strangeness in Safari only!?

Hi there,

I have been developing a liquid css layout webpage that can be viewed at:

http://www.oneworldmarket.org/demo-corporate/

After lots of pain, and a lot of CSS hacking it now looks good in IE's, Opera, and the Mozilla family... but not Safari. For some reason Safari bunches up the main content into the left hand side.

The css has been validated by w3 as has the XHTML.

I dont want to list endless css at you, but some of the more pertinent stuff is:

div#maincontent
{
display: table;
height: 1%;
margin: 0em 10em 2em 1.5em;
clear: left;
}

#index {
float:left;
width: 95%;
}

div#index div.indeximage
{
float:left;
width: 100%;
height: 182px;
margin-top: 3px;
border: 1px solid #FFFFFF;
background-image: url(../../../var/corporate/storage/packages/corporate_blue/files/default/file/design/corporate/images/navbar/home-image.jpg);
}

#index2 {
float:left;
width: 100%;
margin-top: 20px;
}

div#index2 div.indextitle
{
float:left;
border: 0px solid #FFFFFF;
width: 23.5%;
}

div#index2 div.indextitleinner
{
float:none;
color: #006699;
width: 100%;
font-weight: bold;
font-size: 75%;
padding: 3%;
margin-top: 5px;
border: 1px solid #FFFFFF;
background-color: #66ccff;
}

div#index2 div.indexintro
{
float:left;
border: 0px solid #FFFFFF;
width: 32%;
margin-left: 3%;
}

div#index2 div.indexintroinner
{
float:none;
width: 100%;
padding: 3%;
margin-top: 5px;
border: 1px solid #FFFFFF;
background-color: #66ccff;
}

div#index2 div.indexbody
{
float:right;
border: 0px solid #FFFFFF;
width: 32%;
margin-left: 2.5%;
}

div#index2 div.indexbodyinner
{
float:none;
width: 100%;
padding: 3%;
margin-top: 5px;
border: 1px solid #FFFFFF;
background-color: #66ccff;
}

div#index2 div.indexboxtitle
{
float:none;
color: #66ccff;
font-weight: bold;
font-size: 65%;
padding-left: 3%;
padding-right: 3%;
padding-top: 0.2em;
padding-bottom: 0.2em;
border: 1px solid #FFFFFF;
width: 100%;
background-color: #006699;

}

which controls the main content area.

Any ideas as to why Safari alone is falling over would be greatly appreciated (admitedly I havent looked at IE5/MAC)

Anyway, many thanks. Steve.

I don't see the bunching up of text in safari that yer talking about.


The general rule of thumb is that if it looks good in Mozilla all other browsers should fall in line. Positioning can get irritating b/c mozilla / ie can be slightly off, or very very off, depending on how you positioned things.

Like I said I don't see anything wrong right now with the problem u said u were having with safari, but best thing to do when positioning is messing up, I'd comment each section out, and start from scratch, by just rebuilding each class. Sometimes the 2nd time around you realize something stupid you did, or a better way to position it.