PHP ver gevorderde |
|
Ik ben aan het proberen een menubalk met DIV's op te lossen, maar stuit op volgend probleem:
In FireFox werkt alles juist, het sluit zeer mooi aan (de bovenste afbeelding, de middelste en de onderste), maar in IE sluiten alleen de bovenste en de middeldste aan, en tussen de middelste afbeelding en de onderste afbeelding zit een marge van 9px.
Volgens mij komt dat omdat er een </div> tussenstaat, die door IE altijd wordt gezien als een nieuwe regel. Kent iemand een oplossing?
CSS:
div.menu a {
color: #999999;
display: block;
width: 140px;
height: 19px;
background: url(../afbeeldingen/menu/midden.png) repeat-y;
}
div.menu a:hover {
color: #0000CC;
width: 140px;
height: 17px;
border: 1px solid #DDDDDD;
padding-left: 8px;
background: url(../afbeeldingen/menu/zijkant.png);
}
div.menublok-bovenkant {
background: url(../afbeeldingen/menu/bovenkant.png) no-repeat;
font-weight: bold;
padding: 8px 0 0 10px;
}
div.menublok-inhoud a {
padding-left: 8px;
margin-bottom: 0px;
}
div.menublok-onderkant {
background: url(../afbeeldingen/menu/onderkant.png) no-repeat bottom left;
height: 8px;
margin-bottom: 10px;
}
div.menu a { color: #999999; display: block; width: 140px; height: 19px; background: url(../afbeeldingen/menu/midden.png) repeat-y; } div.menu a:hover { color: #0000CC; width: 140px; height: 17px; border: 1px solid #DDDDDD; padding-left: 8px; background: url(../afbeeldingen/menu/zijkant.png); } div.menublok-bovenkant { background: url(../afbeeldingen/menu/bovenkant.png) no-repeat; font-weight: bold; padding: 8px 0 0 10px; } div.menublok-inhoud a { padding-left: 8px; margin-bottom: 0px; } div.menublok-onderkant { background: url(../afbeeldingen/menu/onderkant.png) no-repeat bottom left; height: 8px; margin-bottom: 10px; }
Pagina:
<div class="menu">
<div class="menublok-bovenkant"></div>
<div class="menublok-inhoud">
<a href="a">Beginpagina</a>
<a href="a">Forums</a>
<a href="a">Blogs</a>
</div>
<div class="menublok-onderkant"></div>
<div class="menublok-bovenkant"></div>
<div class="menublok-inhoud">
<a href="a">Persoonlijke bestanden</a>
<a href="a">Berichten</a>
</div>
<div class="menublok-onderkant"></div>
</div>
<div class="menu"> <div class="menublok-bovenkant"></div> <div class="menublok-inhoud"> <a href="a">Beginpagina</a> <a href="a">Forums</a> <a href="a">Blogs</a> </div> <div class="menublok-onderkant"></div> <div class="menublok-bovenkant"></div> <div class="menublok-inhoud"> <a href="a">Persoonlijke bestanden</a> <a href="a">Berichten</a> </div> <div class="menublok-onderkant"></div> </div>
Situatie in FF:
-----
| A
| A
-----
Situatie in IE:
-----
| A
| A
-----
|