[css] rare padding in menu - Softwareontwikkeling

maandag 3 mei 2004 10:51

Acties:

Verwijderd

Topicstarter

Ik heb het volgende script:

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>
<title>PatrickLangendoen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript" type="text/javascript">
<!--
function toggleLayer(id){
   theLayer = document.getElementById(id).style;
   theLayer.visibility = (theLayer.visibility=='visible')? "hidden": "visible";
}
//-->
</script>
<style type="text/css">
<!--
body{
   background-color: #F4F4F4;
   margin: 0px;
   padding: 5px;
}
body,p,div,span,input,select,textarea{
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #006699;
}   

/* menu stylesheet */
#mainMenu{
   position: absolute;
   visibility: visible;
   z-index: 1;
   width: 200px; 
   border: 1px solid #000000; 
   background-color:#FFFFFF;
   padding: 0px;
}

#mainMenu ul{
   list-style: none;
   margin: 0px;
   padding: 0px;
}

#mainMenu li{
    margin: 0px;
    padding: 0px;
}

#mainMenu li a {
    display: block; 
    padding: 5px;
    margin: 0px;
    color: #006699;
    text-decoration: none;
}

#mainMenu li a:hover{
    background-color: #E4E4E4;
}

.menuCaption{
   padding: 5px;
   background-color:#006699;
   color: #FFFFFF;
   font-weight: bolder;
}
-->
</style>
</head>

<body>
<div id="mainMenu">
 <div id="mainHeader" class="menuCaption">Hoofdmenu</div>
 <ul>
  <li><a href="javascript:void(0);" class="menuTag" accesskey="1">onderwerp 1</a></li>
  <li><a href="javascript:void(0);" class="menuTag" accesskey="2">onderwerp  2</a></li>
  <li><a href="javascript:void(0);" class="menuTag" accesskey="3">onderwerp 3</a></li>
  <li><a href="javascript:void(0);" class="menuTag" accesskey="4">onderwerp 4</a></li>
  <li><a href="javascript:void(0);" class="menuTag" accesskey="5">onderwerp 5</a></li>
  <li><a href="javascript:void(0);" class="menuTag" accesskey="6">onderwerp 6</a></li>
 </ul>
</div>
</body>

Dit script werkt netjes op:
Firefox 0.8, Netscape 6+ en Mozilla (duh)
Maar in IE6 krijg ik onder de menu-items een padding (lijkt het) van ongeveer 5 pixels. Ik krijg deze op geen enkele manier weg.

Heeft iemand enig idee hoe ik die padding wegkrijg in IE?

maandag 3 mei 2004 10:55

Acties: