Ich muss ein Menu mit einer Liste machen, wobei die Links untereinander sein und eine Hintergrundgrafik haben sollen. In den neueren IE's und FF geht das, nicht aber im IE7. Der IE7 macht nach dem zweiten Element plötzlich doppelt so grosse Abstände wie davor? Weiss jemand was man da tun kann? Es scheint ein Problem mit dem Positioning zu sein..
Hier der Html-Code:
HTML-Code:
<!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>
<link type="text/css" href="layout.css" rel="stylesheet" media="screen" />
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="page-container">
<div id="banner">
<div id="bereichsnav">
<ul>
<li><a href="" class="active">Schweiz</a></li>
<li><a href="">International</a><li>
<li><a href="">Training</a><li>
<li><a href="">Training</a><li>
</ul>
</div>
</div>
</div>
</body>
</html>
Und hier noch das CSS:
HTML-Code:
/******************************************************
Kalibrierung
*******************************************************/
/* Reset - alle Abstände auf NULL */
* { padding: 0; margin: 0; }
/******************************************************
Html-Type Styles
*******************************************************/
body {
background-color: #dddddd;
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
line-height: 1.3em;
}
/******************************************************
Layout Styles
*******************************************************/
#page-container{
background-color: white;
}
/* -- Banner und Nav */
#banner{
margin: 0;
padding: 0;
background-image: url(img/hgbanner.png);
height: 220px;
position: relative;
}
#bereichsnav{
position: absolute;
top: 90px;
left: 75px;
color: black;
margin: 0;
padding: 0;
font-family:lobster;
font-size:150%;
display:block;
}
#bereichsnav li{
list-style-type: none;
}
#bereichsnav a{
color: black;
background-image:url(img/bereichnavi.png);
display:block;
text-align:center;
padding-top: 10px;
width: 145px;
height: 30px;
}
15.06.2011, 09:35
IE7: Menus als Listen funktionieren nicht
Ähnliche Themen
Linear-Darstellung
