Problema con menu

pablo1290

Problema con menu

Ciao ragazzi ho provato a fare un menu in CSS basandomi su uno preso da un sito..ecco
il codice HTML

[php]
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="content-head">

<ul class="tabs">
    <li class="first"></li>
    <li><a class="on" href="xxx.com">summary</a></li>
    <li class="spaz"><img src="telefilmenu-border.gif" alt="|"></li>
    <li><a href=xxx.com">styles</a></li>
    <li class="spaz"><img src="telefilmenu-border.gif" alt="|"></li>
    <li><a href="xxx.com">essentials</a></li>
    <li class="spaz"><img src="telefilmenu-border.gif" alt="|"></li>
    <li><a href="xxx.com">most popular</a></li>
    <li class="spaz"><img src="telefilmenu-border.gif" alt="|"></li>
    <li><a class="on" href="xxx.com">highest rated</a></li>
    <li class="spaz"><img src="telefilmenu-border.gif" alt="|"></li>
    <li><a href="xxx.com">artists A-Z</a></li>
    <li class="spaz"><img src="telefilmenu-border.gif" alt="|"></li>
    <li><a href="xxx.com">forums</a></li>
    <li class="spaz"><img src="telefilmenu-border.gif" alt="|"></li>
    <li><a href="xxx.com">editor's blog</a></li>
    <li class="last"></li>
</ul>

</div>
</body>
</html>
[/php]CSS

[php]
/* CONTENT HEAD */

#content-head {
height: 140px;
background: top left no-repeat #000;
border-bottom: 1px solid #56564A;
position: relative;
}

height: 36px;
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
left: 10px;
}
li {
height: 36px;
margin: 0;
padding:0;
list-style: none;
float: left;
}
li a {
height: 36px;
padding: 0 5px;
font: bold 12px Arial;
text-decoration:none;
color: #000000;
float: left;
background: url(telefilmenu.gif) repeat-x;
}
.spaz{
width: 1px;
height:36px;
vertical-align: bottom;
padding: 0 5px 0 5px;
background: url(telefilmenu.gif) repeat-x;
}
li a:hover {
text-decoration: underline;
}
li a.on {
background: #006F9F;
text-decoration: none;
color: #FFFFFF;
}

background: url(telefilmenu-sx.gif) no-repeat;
width: 10px;
height:36px;
}
li.last {
background: url(telefilmenu-rx.gif) no-repeat;
width: 10px;
height:36px;
}

[/php]Er ora i problemi

Testo non centrato verticalmente..
Su quel sito nell'"id content-head li a" alla linea:

font: bold 12px Arial;

loro usavano
font: bold 12px/36px Arial;

E il font stava centrato..
Problema: io nel mio sito ho già impostato tt i font, e non vorrei star qua a reimpostare questo solo per poter mettere /36px (perkè io dopo la linea del css dove si sceglie il font la tolgo).

Secondo problema: con IE il "menu grigio", cioè l'UL, è 10px dal basso, e non attaccato..perkè?

Ciao thx

onsitus

Ciao,

modificando font: bold 12px/36px Arial; hai tolto il line-height (il 36px).

Per centrare verticalmente una riga di testo (come nel caso dei link), serve impostare un line-height pare a l'altezza del suo elemento genitore. Infatti quelli 36px sono anche l'altezza degli elementi...aggiungilo nel css.

Non ho capito il secondo problema.:bho:

pablo1290

Ciao, grazie mille per il primo aiuto, ho risolto.

Il secondo problema invece è che con IE 7 e solo con IE il mio menu "UL" rimane 10 px rialzato dal basso,e non capisco perchè..