Ho un problema con un menu orizzontale che ho preso da un manuale e mi piacerebbe usare.
Il problema c'è solo con Mozilla (l'ho testato con Explorer e Opera ed è tutto a posto): in sostanza i bordi non si accavallano ma si ripetono facendo perdere l'effetto grafico delle schede.
Ovviamente se diminuisco il padding bottom di .menuNavigazioneH a 4px in Mozilla viene bene ma negli altri browser compare il difetto. Non c'è una soluzione che salvi il menu per tutti i browser?
Il codice
è:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
/*<![CDATA[*/
html, body {
margin:0;
padding:0;
height:100%;
text-align:center;
background:#ffffff;
color:black;
}
/* menu orizzontale */
.menuNavigazioneH {
background:#fff;
color:#000;
margin:0;
padding:20px 0 5px 0;
border-bottom:1px solid #000;
text-align:center;
}
.menuNavigazioneH li {
display:inline;
}
.menuNavigazioneH a {
height:0;
padding:5px 0.7em;
border:1px solid #000;
text-decoration:none;
margin:0 0.3em;
white-space:nowrap;
}
.menuNavigazioneH .voceCorrente a{
border-bottom:none;
padding-bottom:6px;
}
.menuNavigazioneH a:link,
.menuNavigazioneH a:visited{
background:#ccc;
color:#000;
}
.menuNavigazioneH a:hover,
.menuNavigazioneH a:focus,
.menuNavigazioneH a:active{
background:#666;
color:#fff;
}
.menuNavigazioneH .voceCorrente a:link,
.menuNavigazioneH .voceCorrente a:visited,
.menuNavigazioneH .voceCorrente a:hover,
.menuNavigazioneH .voceCorrente a:focus,
.menuNavigazioneH .voceCorrente a:active{
background:#fff;
color:#000;
border-bottom:none;
padding-bottom:6px;
}
/*]]>*/
</style>
</head>
<body>
<ul class="menuNavigazioneH"><li class="voceCorrente">Prima Voce (corrente)[*]Seconda Voce[*]Terza Voce[*]Quarta Voce[*]Quinta Voce[*]Sesta Voce[/list]
<script type="text/javascript" src="http://adv.helloweb.eu/script.js"></script></body>
</html>
La pagina dove è visibile l'esempio è:
http://giancojazz.helloweb.eu/menuH.html
Rispondi quotando