Hej jeg har et problem med min hjemmeside som jeg er ved at lave.
Navigationen forrykker sig i FireFox ift. IE7... Jeg har prøvet både at positionere absolut samt give margin men intet virker... Kan nogen fortælle mig hvad der er galt og hvad jeg skal gøre.. Er det noget med et separat stylesheet for IE ??
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>olefrank.dk</title>
<Style type="text/css">
div {
border: 1px solid #FFF;
}
ul, li {
border: 1px solid #00F;
}
body {
margin: 0;
padding: 0;
font-family: 'Lucida Grande', Verdana, sans-serif;
color: #FFF;
background: url(img/backgrnd.gif);
}
#container {
position: absolute;
top: 50%;
left: 50%;
width: 870px;
height: 600px;
margin-left: -440px;
margin-top: -300px;
}
#header {
margin: 0 0 8px 0;
height: 157px;
background: url(img/header.jpg) no-repeat bottom;
}
#logo {
position: absolute;
top: 0px;
left: 680px;
}
img {
border: 0;
}
/* Layout of the Navigation */
#navbar {
margin-top: 118px;
margin-left: 0px;
list-style-type: none;
}
#navbar li {
float: left;
padding-right: 20px;
}
#navbar a {
display: block;
text-decoration: none;
text-indent: -9999px;
}
#navbar #hits {
width: 120px;
height: 27px;
background: transparent url(img/btn_hits.png) no-repeat -120px 0;
}
#navbar #hits:hover {
background: transparent url(img/btn_hits.png) no-repeat;
}
#navbar #jazz {
width: 120px;
height: 27px;
background: transparent url(img/btn_jazz.png) no-repeat -120px 0;
}
#navbar #jazz:hover {
background: transparent url(img/btn_jazz.png) no-repeat;
}
#navbar #tpt {
width: 120px;
height: 27px;
background: transparent url(img/btn_tpt.png) no-repeat -120px 0;
}
#navbar #tpt:hover {
background: transparent url(img/btn_tpt.png) no-repeat;
}
#navbar #pno {
width: 120px;
height: 27px;
background: transparent url(img/btn_pno.png) no-repeat -120px 0;
}
#navbar #pno:hover {
background: transparent url(img/btn_pno.png) no-repeat;
}
#main {
float: left;
width: 662px;
height: 356px;
background: url(img/main.jpg) no-repeat;
}
#right {
float: right;
width: 200px;
height: 356px;
background: url(img/right.jpg) no-repeat;
}
a {
outline: none;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
header...
<div id="logo">
<a href=""><img src="img/logo.png" /></a>
</div>
<ul id="navbar">
<li><a href="#" id="hits">Hits Only</a></li>
<li><a href="#" id="jazz">All That Jazz!</a></li>
<li><a href="#" id="tpt">Trompetist</a></li>
<li><a href="#" id="pno">Pianist</a></li>
</ul>
</div>
<div id="main">
main...
</div>
<div id="right">
right...
</div>
</div>
</body>
</html>