If we rollover the menu link, the underline get's 1px to the right for
apparently no reason. This happens on Firefox, IE, and Safari.
See it here please:
http://www.cantinho.org/test5.html
How can we prevent this from happening?
Here's the CSS code for the navigation, at more at the bottom, the same code
without comments.
.linksprincipais#navigation {
position:relative; /*Se mudarmos para absolute o IE passa-se. Safari e
Firefox ficam ok.*/
width:962px;
height:1.7em; /*Why I don't get a background color if I quit this value?*/
/*line-height:1.7;*/ /*I don't need that here*/
background-color:#FF9933;
border-top: 5px solid #000066;
border-bottom: 10px solid #000099;
}
.linksprincipais#navigation ul{
margin: 0; /*sem margens definidas, o firefox troca-se todo*/
padding: 0;
position:absolute;
right:20px; /*é este valor que alinha o menu X pixeis da margem da direita*/
top:0px;
/*float: left; --> Isto só cá deve estar a fazer vista...*/
font-weight: bold;
}
/* Este código, em princípio, é dispensável.
* html .linksprincipais#navigation ul{ /*IE only rule. Delete extra
margin-bottom
margin-bottom: 0;
}*/
.linksprincipais#navigation ul li{
display: inline;
}
.linksprincipais#navigation ul li a{
float: left;
color: gray;
height:1.7em; /*Why do I have to add a new height again here? Talvez: Porque
os UL não tem forma por omissão.*/
line-height: 1.7; /*What does it do? Dá um valor ao espaço entre as linhas
do texto.*/
font-weight: bold;
padding: 0px 10px 0px 10px; /*This will control the left and right green
space before and after the lettering*/
margin: 0 10px 0 10px; /*Espaço fora do texto */
text-decoration: none;
background:#006666;
}
.linksprincipais#navigation ul li a:hover{
color: black;
border-bottom: 10px solid black;
}
And here is the same code, without the possible annoying comments:
.linksprincipais#navigation {
position:relative;
width:962px;
height:1.7em;
background-color:#FF9933;
border-top: 5px solid #000066;
border-bottom: 10px solid #000099;
}
.linksprincipais#navigation ul{
margin: 0;
padding: 0;
position:absolute;
right:20px;
top:0px;
font-weight: bold;
}
.linksprincipais#navigation ul li{
display: inline;
}
.linksprincipais#navigation ul li a{
float: left;
color: gray;
height:1.7em;
line-height: 1.7;
font-weight: bold;
padding: 0px 10px 0px 10px;
margin: 0 10px 0 10px;
text-decoration: none;
background:#006666;
}
.linksprincipais#navigation ul li a:hover{
color: black;
border-bottom: 10px solid black;
}
Thanks to all,
Márcio
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
