Har dragit mig i håret ett antal gånger nu. Designen jag gjort funkar bra i IE7 och Firefox men inte i IE6. Menyn hamnar på ett helt annat ställe. Vet inte hur jag ska ta mig vidare då jag suttit hela gårdagen med detta. Får det inte att funka.
Sidan: http://frip.dk/rikard81/
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Kostkontoret</title>
<link rel="stylesheet" href="stilmall.css" type="text/css">
</head>
<body>
<div id="design">
<div id="wrapper">
<div id="menycontainer">
<ul>
<li>
<a class="meny" href="index.htm" id="current">
<div class="roundtop">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<span class="menycontent">Om oss</span></a>
</li>
<li>
<a class="meny" href="sida2.htm"">
<div class="roundtop">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<span class="menycontent">Erbjudande</span></a>
</li>
<li>
<a class="meny" href="sida3.htm">
<div class="roundtop">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<span class="menycontent">Priser</span></a>
</li>
<li><a class="meny" href="sida4.htm">
<div class="roundtop">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<span class="menycontent">Kontakt</span></a>
</li>
</ul>
</div>
\<div id="messagebox"\>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body { background: #99d420; padding: 0; margin: 0;}
p {color: #000000; font-family: "Trebuchet MS"; font-size: 8pt; text-decoration: none; letter-spacing: 0.07em;}
td {color: #000000; font-family: "Trebuchet MS"; font-size: 8pt; text-decoration: none; letter-spacing: 0.07em;}
#wrapper {
width: 600px;
height: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 0%;
}
#design {
width: 700px;
height: 650px;
margin-left: auto;
margin-right: auto;
margin-top: 2%;
background: url(designtest.jpg);
background-repeat: no-repeat;
}
#messagebox {
width: 550px;
height: 560px;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
background-color: transparent;
border: 1px solid transparent;
}
#content{margin: 2em; padding: 0;}
#menycontainer {padding: 3em 0 0 1em; margin: 0; background: transparent; margin-top: -8.3%; float: right;}
#menycontainer ul {margin: 0; padding: 5px 0 0 0; background: transparent; height: 1.5em;}
#menycontainer li {display: block; float: left; padding: 0 1em 0 0; font: 70% Verdana, Arial, Helvetica, sans-serif; color: #000000;}
.menycontent {display: block; padding: 0 0 0.5em 0; background: #c9d3d6; color: #000000; text-align: center;}
a.meny, a.meny:visited {width: 8em; display: block; text-decoration:none;}
a.meny:hover {background: transparent;}
a#current .menycontent, a#current .r1, a#current .r2, a#current .r3, a#current .r4 {background: #ffffff; }
a#current .menycontent {border-bottom: none}
a.meny:hover .menycontent, a.meny:hover
.r1, a.meny:hover
.r2, a.meny:hover
.r3, a.meny:hover
.r4 {background:#a7b8bc;}
.roundtop {background: transparent;}
.r1 {margin: 0 5px; height: 1px; overflow: hidden; background: #c9d3d6;}
.r2 {margin: 0 3px; height: 1px; overflow: hidden; background: #c9d3d6;}
.r3 {margin: 0 2px; height: 1px; overflow: hidden; background: #c9d3d6;}
.r4 {margin: 0 1px; height: 2px; overflow: hidden; background: #c9d3d6;}
.prislista {color: #000000; font: 100% Verdana, Arial, Helvetica, sans-serif; font-weight: bold;}
.tabellplacering {margin-top: 23%;}