Neste momento não estou com tempo para ver isso "a fundo", mas experimenta dar mesmo uma quebra de linha depois da imagem.
Normalmente o FF faz "parse" das quebras de linha em HTML enquanto o Internet Explorer as ignora (acho que é o único ponto em que acho que faz mais sentido o IE)
Mostra o código respectivo, sff.
Tanto HTML como CSS
(02-02-2009 14:39)Dav7 Escreveu: [ -> ]o truque do espaço não resultou, aqui vai o codigo:
CSS:
Código:
/* Menu Imagens
----------------------------------------------- */
#menu-items ul li{
display: inline;
font-weight: bold;
list-style-type: none;
padding: 5px 20px 5px 0;
margin: 0;
}
#menu-items li span.home{
background: url('http://4.bp.blogspot.com/_7XLk5hM-lpg/SWuQeWD1jII/AAAAAAAAAvs/D7DUokaa3vE/s320/home.png') no-repeat;
padding: 0 0 0 20px;
}
#menu-items li span.about{
background: url('http://2.bp.blogspot.com/_7XLk5hM-lpg/SWuRPQufR5I/AAAAAAAAAv8/bnFZ_gXnb3U/s320/sobre.png') no-repeat;
padding: 0 0 0 20px;
}
#menu-items li span.contact{
background: url('http://4.bp.blogspot.com/_7XLk5hM-lpg/SWuMN4x7boI/AAAAAAAAAu0/GWurQ1xcCn0/s320/email.png') no-repeat;
padding: 0 0 0 20px;
}
#menu-items li span.english{
background: url('http://1.bp.blogspot.com/_7XLk5hM-lpg/SWuRZzuQ6ZI/AAAAAAAAAwE/avNv-XCXCHg/s320/ingles.png') no-repeat;
padding: 0 0 0 20px;
}
HTML:
Código:
<div id="menu-items">
<ul>
<li><center><span class="english"><a href="http://www.buxmaking.com/">English</a></span></center></li>
<li><center><span class="contact"><a href="http://www.ganha-facil.com/2008/06/contacto_6452.html">Contacto</a></span></center></li>
<li><center><span class="about"><a href="http://www.ganha-facil.com/2008/03/ganha-dinheiro-na-net.html">Sobre</a></span></center></li>
<li><center><span class="home"><a href="http://www.ganha-facil.com/">Início</a></span></center></li>
</ul>
</div>
Para que usas o ul e o li?!
Experimenta um código assim.
Código:
<div id="menu-items">
<div class="img">
<div class="iten"><a href="http://www.buxmaking.com/"><img src="http://1.bp.blogspot.com/_7XLk5hM-lpg/SWuRZzuQ6ZI/AAAAAAAAAwE/avNv-XCXCHg/s320/ingles.png" border=0px></a></div>
<div class="iten"><a href="http://www.ganha-facil.com/2008/06/contacto_6452.html"><img src="http://4.bp.blogspot.com/_7XLk5hM-lpg/SWuMN4x7boI/AAAAAAAAAu0/GWurQ1xcCn0/s320/email.png" border=0px></a></div>
<div class="iten"><a href="http://www.ganha-facil.com/2008/03/ganha-dinheiro-na-net.html"><img src="http://2.bp.blogspot.com/_7XLk5hM-lpg/SWuRPQufR5I/AAAAAAAAAv8/bnFZ_gXnb3U/s320/sobre.png" border=0px></a></div>
<div class="iten"><a href="http://www.ganha-facil.com/"><img src="http://4.bp.blogspot.com/_7XLk5hM-lpg/SWuQeWD1jII/AAAAAAAAAvs/D7DUokaa3vE/s320/home.png" border=0px></a></div>
</div>
<div class="text">
<div class="iten"><a href="http://www.buxmaking.com/">English</a></div>
<div class="iten"><a href="http://www.ganha-facil.com/2008/06/contacto_6452.html">Contacto</a></div>
<div class="iten"><a href="http://www.ganha-facil.com/2008/03/ganha-dinheiro-na-net.html">Sobre</a></div>
<div class="iten"><a href="http://www.ganha-facil.com/">Início</a></div>
</div>
</div>
CSS:
Código:
#menu-items{
font-weight: bold;
width: 40%;
height:100px:
padding-top: 30px;
margin: 0;
float: left;
}
.text{
width: 25%;
height 50%;
}
.img{
width: 25%;
height 50%;
}
.iten{
text-align: center;
}
Devo dizer que estou sem grande tempo, para estar a ver se falhou alguma coisa no código, acabei de fazer isto aqui agora em "cima do joelho", depois dá o feedback, é provável que não vá bater tudo certinho.
@drink
o ul li são indicados a nível de standards para menus em lista horizontal ou vertical.
@Dav7
Pelo que vi, não percebi como o Firefox mostra daquela forma os menus, pois falta-te algo para mostrar o texto mais em baixo, seja um vertical-align: bottom; ou um padding-top: (qq coisa)px; Já vi que as imagens são de background e não foreground.
(02-02-2009 16:04)Bruno Bernardino Escreveu: [ -> ]@drink
o ul li são indicados a nível de standards para menus em lista horizontal ou vertical.
Sim eu sei o que são, mas eu como nunca uso. Fiquei a questionar-me do que estariam a fazer ali.