Firefox vs IE

Help please!

Firstly thanks to Kuroi for reviewing my site and pointing out that it looks not so good in firefox! and for saying that my site looks nice!

so what I have done to try and find the problem is to change some background colours.... url is http://beadmobile.com.au/

and this is what I have in my stylesheet (based on default_template)

....

#mainWrapper {
background-color: #DDDDDD; (that's light grey background)
text-align: center;
width: 60%;
vertical-align: top;
border: 1px solid #663366;
}

AND

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #FFEAFF; (that's the pale pink nav bars)
padding: 0.2em 0.2em;
font-weight: bold;
color: #000000;
height: 1%;
width: 100%;
}

AND

#navColumnOne, #navColumnTwo {
background-color: #999999; (that's the dark grey vertical bars)
}

....

I can't for the life of me figure why IE and firefox look different. And neither of them actually look exactly like I would expect!

any help would be greatly appreciated!

Oh, and Kuroi, I checked my css for that doubled float margin bug you mentioned, but it seems to me you would have to have 'float' and 'margin' on the same thing, and i can't seem to find where it might be a problem. any ideas?

beadmobile.com.au:

I checked my css for that doubled float margin bug you mentioned, but it seems to me you would have to have 'float' and 'margin' on the same thing, and i can't seem to find where it might be a problem. any ideas?Sometimes floats sneak in via classes so the float and margin may not always appear together in the CSS. However I have an laternative theory about your site.

The bulk of the site is contained in a layout table with one row and three cells - one each for the left, center and right columns. Here is the HTML generated for the right column (the left column cell has the same structure.> <td id="navColumnTwo" class="columnRight" style="width: 0">

<div id="navColumnTwoWrapper" style="width: 10px"></div></td>You've probably achieved this through setting the widths in the Admin > Configure section. But what this does is firstly tell the browsers that the cells have no width, but then force them open to a width of 10px. This shouldn't really happen and I suspect that the browsers are coping with it in different ways, i.e. Firefox trusts the cell widths that you have given it to calculate the table width, whilst Internet Explorer looks at the actual result.