CSS problem firefox vs IE

need your help!

[BethInAK]

i have a website I'd like to roll out but my layout is hosed in firefox. I'm not an expert at CSS and could use some assistance to troubleshoot it.

The style in question is this:

/* Layout */
#layout{width: 968px; margin: 0 auto; border-left: 1px solid #a3a3a3; border-right: 1px solid #a3a3a3; background-color: #ffffff; margin-bottom: 10px; border-bottom: 2px solid #a3a3a3; overflow: auto; }
#layout1{width: 968px; margin: 0 auto; clear: both; height: 600px;}
.date{width: 945px; margin: 0 auto; height: 1em; font-family: tahoma; font-size: 11px; color: #000000; clear: both;}
.left_layout{width: 626px; float: left; margin-left: 8px; margin-top: 8px; margin-bottom: 8px; height: inherit; background-color: #ffffff; height: inherit; }
.right_layout{width: 316px; float: right; margin-right: 8px; margin-top: 8px; margin-bottom: 8px; height: inherit; background-color: #ffffff; height: inherit;}

The website is here; <snip>

Any assistance anyone can offer would be greatly appreciated.

Thanks in advance,

Beth in AK

[edited by: DrDoc at 6:14 am (utc) on Mar. 26, 2008]
[edit reason] No links, please. [webmasterworld.com] [/edit]

[swa66]

Most of us start in Firefox and make it work there without bothering with the bugs in IE. Then we add a conditional comments to fix it for IE.

Going the other way around is a whle lot harder.

Also try to make sure the HTMl and CSS validate (at least the HTML didn't when I looked at it))

The div#mainlayout is inside the div#main_menu . The div.main_menu is floated and the div#layout is positioned next to it (as it should be for all I can tell). I presume you want it under it (a clear:right or other nesting of your divs would do the trick.