<ul> verschillend in firefox en IE

Status
Niet open voor verdere reacties.
S

Sven2007

Gebruiker
Lid geworden
8 feb 2007
Berichten
113
Ik heb als menu een UL gemaakt met 6 vaste items. Deze UL staat in de DIV "nav"
Hieronder vindt u mijn CSS bestand. In IE krijg ik een mooie lijst met elke LI in het wit met een zwarte background.

Bij firefox is dit ook maar daar is een ruimte tussen elke LI met als gevolg dat het meer lijkt op 6 aparte knoppen...

CSS Bestand:

Code: 
*{
	padding:0px;
	margin:0px;
}

#header{
	background-color:#FDBB63;
	color:white;
	text-align:center;
	height: 130px;
}

#nav{
	background-color:#666;
	height:46px;
	margin-top:-21px;
}
#nav ul{
	padding-left: 85px;
	padding-top:5px;
	padding-bottom: 5px;
}

#nav li{
	display:inline;
	list-style:none;
	color: white;	
	font-size: 14pt;
	background-color: black;  
	border: solid 1px white;  
	padding-left: 5px;
	padding-right: 5px;
}

#main{
	background-color:#ccc;
	float:left;
	width: 850px;
	height: 500px;
	margin-top:-16px;
}

html>body #sidebar{
	width:250px;
}

#footer{
	background-color:#666;
	color:#ff0;
	clear:both;
}

#nav a{
	color: #ff0;
}

body{
	text-align:center;
}

#wrap{
	margin: 0px auto;
	width: 850px;
	text-align:left;
}
 
Dit soort vragen smeekt om de html-code of liever nog een online voorbeeld van de code. Vaak kun je dit soort problemen vermijden door eerst voor ul, li, a de margin en padding op nul te zetten (alles resetten) en dan bij elk element de juist paddings/margins opnieuw toe te voegen.
 
Dit is de html van de pagina:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
   <head>
      <title>De Lootsche Boys</title>
      <link rel="stylesheet" type="text/css" href="opmaak.css">
   </head>
   <body>
   		<div id="wrap">
   			<div id = "header"><img src="images/logo.JPG" alt="logo" /></div>
   			<div id = "nav">
   				<ul>
   					<li>Home</li>
					<li>item1</li>
   					<li>item2</li>
   					<li>item3</li>
   					<li>item4</li>
					<li>item5</li>
					<li>item6</li>
   				</ul>
   			</div>
   			<div id = "main">
   				<h2>Intro</h2>
   				<p>

   					<ul>
   						<li>Computerproblemen: Alle problemen en/of vragen in verband met je computer</li>
   						<li>item2</li>
   						<li>item3</li>
   						<li>item4</li>
   					</ul>
   					Meer informatie over de verschillende diensten vind je op de desbetreffende pagina.

   				</p>
   			</div>
   			
   			<div id = "footer">
   				<p>Footer</p>
   			</div>
   		</div>

   </body>
</html>
 
Oplossingsmethode 1:
Plak al je li-elementen vlak achter elkaar:
HTML: 
<ul><li>bla</li><li>bla</li></ul>

Oplossingsmethode 2 (misschien iets simpeler):
Bij #nav li, vervang daar "display: inline;" eens door "float: left;".
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan