CSS - underlig opførsel i Firefox 3
Har et problem med følgende html-skabelon.. I FF vises den venstre menu midt på siden, i IE vises den korrekt i venstre side.. Er der nogle der kan se hvad jeg kan gøre for at afhjælpe problemet?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
/*#PAGE STRUCTURE#*/
html, body {
margin:0;
padding:0;
height:100%;
font-family: "Lucida Grande",Verdana,Arial,Sans-serif;
font-size: 12px;
}
body {
background: #2f322c url("/gfx/bg.png") repeat-x;
}
#container {
min-height:100%;
position:relative;
}
#main {
width: 960px;
margin: 10px auto auto auto;
background-color: White;
}
#header {
padding:10px;
background-color: White;
}
#mainmenu {
height: 30px;
background: url("/gfx/mainmenubg.png") repeat-x;
}
#left {
float:left;
width: 200px;
margin: 0;
padding: 0px 0px 0px 0px;
height: 100%;
}
#right {
float: right;
width: 200px;
height: 100%;
margin:0;
padding:10px 0 0 0;
}
#middle {
width: 540px; /* 560 - 2*padding */
margin: 0;
padding: 10px;
margin-left: 200px;
vertical-align:top; /*IE FIX*/
}
#cleaner {
clear:both;
visibility:hidden;
}
#footer {
clear:both;
/*padding-top: 10px;*/
color: Silver;
font-size: 10px;
background-color: #2f322c;
}
/*# MAINMENU #*/
#mainmenu ul {
list-style: none;
margin:0; padding:0;
height: 30px;
}
#mainmenu ul li {
float:left;
padding: 0 10px 0 10px;
line-height: 30px;
}
#mainmenu ul li a {
color: white;
font-family: arial;
font-size: 16px;
font-weight: bold;
text-decoration: none;
}
#mainmenu ul li a:hover
{
text-decoration: underline;
}
#mainmenu ul li a:visited
{
color: white;
}
/*
LEFTMENU
*/
div#leftmenu
{
padding: 20px;
}
div#leftmenu ul
{
list-style: none;
margin: 0; padding: 0;
border-bottom: 1px solid #DDDDDD;
}
div#leftmenu ul li
{
border-top: 1px solid #DDDDDD;
}
div#leftmenu ul li a
{
display: block;
height: 20px;
padding: 5px 0 4px 10px;
text-decoration: none;
color: #333333;
}
div#leftmenu ul li a:link
{
}
div#leftmenu ul li a:visited
{
}
div#leftmenu ul li a:hover
{
background-color: #f3f3f3;
}
div#leftmenu ul li a:active
{
}
div#leftmenu ul li ul
{
border-bottom: 0;
}
div#leftmenu ul li ul li
{
border-top: 0;
}
div#leftmenu ul li ul li a
{
padding-left: 30px;
}
div#breadcrumb {
font-size: 10px;
color: gray;
border-bottom: 1px solid #8fc73e;
}
div#breadcrumb a {
text-decoration: none;
}
div#breadcrumb a:visited {
color: gray;
}
div#breadcrumb .CMSBreadCrumbsCurrentItem {
font-weight: bold;
}
</style>
<title>Kontakt</title>
</head>
<body>
<form method="post" action="/Kontakt.aspx" id="form1">
<div id="container">
<div id="main">
<div id="header"></div>
<div id="mainmenu">
<ul id="menuElem">
<li><a href="/Forside.aspx" >Forside</a></li>
<li><a href="/Aktiviteter.aspx" >Aktiviteter</a></li>
<li class="highlighted"><a href="/Kontakt.aspx" >Kontakt</a></li>
</ul>
</div>
<div id="left">
<div id="leftmenu">
<ul id="menuElem">
<li><a href="/Kontakt/Bank.aspx" >Bank</a></li>
</ul>
</div>
</div>
<div id="right">
<div style="text-align: center;">Højre side</div>
</div>
<div id="middle">
<div id="breadcrumb"><a href="/Kontakt.aspx" title="Kontakt" class="CMSBreadCrumbsCurrentItem">Kontakt</a></div>
<h1></h1>
</div>
<div id="cleaner"> </div>
<div id="footer">Sidefod....</div>
</div>
</div>
</form>
</body>
</html>
