Beheerder |
|
Hey,
ik heb een css menu gemaakt. Deze wil ik over de hele breedte van het menu hebben. Deze heb ik dus een display block gegeven. In Firefox gaat dit wel goed. Maar in IE komt er een blauwe rand aan de linker kant.
Er staat nergens een padding-left. Zowel in de menu items niet en ook niet in de bovenliggende div's als het menu of de container.
De volgende afbeelding is goed:
http://194.123.100.201/test/marten/goed.jpg
De volgende afbeelding is fout:
http://194.123.100.201/test/marten/fout.jpg
Het is de volgende html code:
div id="menu">
<li><a href="./?route=index" class="menu_hoofdnormal">Home</a></li>
<li><a href="./?route=nieuws" class="menu_hoofdnormal">Nieuws</a></li>
<li><a href="./?route=produkten" class="menu_hoofdnormal">Produkten</a></li>
<li><a href="./?route=sectoren" class="menu_hoofdnormal">Sectoren</a></li>
<li><a href="./?route=contact" class="menu_hoofdselected">» Contact</a></li>
<li class="submenu"><a class="menu_normal" href=?route=contact/submenu&subpage=13>email</a></li><li class="submenu"><a class="menu_normal" href=?route=contact/submenu&subpage=14>vestigingen</a></li><li class="submenu"><a class="menu_normal" href=?route=contact/submenu&subpage=15>teeltadviseurs</a></li>
<li><a href="./?route=agunie" class="menu_hoofdnormal">Agrarische Unie</a></li>
</div>
div id="menu"> <li><a href="./?route=index" class="menu_hoofdnormal">Home </a></li> <li><a href="./?route=nieuws" class="menu_hoofdnormal">Nieuws </a></li> <li><a href="./?route=produkten" class="menu_hoofdnormal">Produkten </a></li> <li><a href="./?route=sectoren" class="menu_hoofdnormal">Sectoren </a></li> <li><a href="./?route=contact" class="menu_hoofdselected">» Contact </a></li> <li class="submenu"><a class="menu_normal" href=?route=contact/submenu&subpage=13>email </a></li><li class="submenu"><a class="menu_normal" href=?route=contact/submenu&subpage=14>vestigingen </a></li><li class="submenu"><a class="menu_normal" href=?route=contact/submenu&subpage=15>teeltadviseurs </a></li> <li><a href="./?route=agunie" class="menu_hoofdnormal">Agrarische Unie </a></li>
Dit is de css file:
#menu {
position: relative;
float: left;
color: #001D39;
width: 142px;
padding-top: 95px;
background-color: #124982;
}
.menu_hoofdnormal {
color: #FFF;
display: block;
text-align: right;
height: 20px;
padding-right: 10px;
padding-top: 4px;
}
li {
text-align: right;
list-style-type: none;
display: block;
height: 20px;
}
.menu_hoofdselected {
color: #FFF;
font-weight: 700;
display: block;
background-color: #54a421;
text-align: right;
height: 20px;
padding-right: 10px;
padding-top: 4px;
}
a {
text-decoration: none;
}
li.submenu {
display: block;
background-color: #bbdba6;
height: 20px;
color: #124982;
padding-right: 10px;
}
.menu_normal {
color: #124982;
display: block;
}
.menu_selected {
color: #124982;
font-weight: 700;
white-space: nowrap;
display: block;
}
#menu { position: relative; float: left; color: #001D39; width: 142px; padding-top: 95px; background-color: #124982; } .menu_hoofdnormal { color: #FFF; display: block; text-align: right; height: 20px; padding-right: 10px; padding-top: 4px; } li { text-align: right; list-style-type: none; display: block; height: 20px; } .menu_hoofdselected { color: #FFF; font-weight: 700; display: block; background-color: #54a421; text-align: right; height: 20px; padding-right: 10px; padding-top: 4px; } a { text-decoration: none; } li.submenu { display: block; background-color: #bbdba6; height: 20px; color: #124982; padding-right: 10px; } .menu_normal { color: #124982; display: block; } .menu_selected { color: #124982; font-weight: 700; white-space: nowrap; display: block; }
Er zit een padding-right in van 10px om de code een beetje te scheiden van de rechter kant. Misschien dat in combinatie met het border box model niet goed is. Wie heeft er een oplossing om de blauwe rand aan de linker kant dus weg te halen? Als ik de breedte opgeef van zo'n item dan vergroot hij aan de rechter kant.
Bij voorbaat dank,
Oplossing
UL tag om de li zetten. En deze een padding-left meegeven van -40px; en in de menu div een overflow-x: hidden meegeven
|