Problemas de visualização FF e IE

[Dav7]

Tenho algumas disparidades na forma como o meu blog, com a template praticamente criada por mim, aparece no FireFox e Opera e no IE

Os problemas são com a visualização de listas.

O correcto seria aparecer assim, como acontece no FF:
http://img167.imageshack.us/img167/8766/gfffvh0.jpg

Mas no IE aparece assim:
http://img167.imageshack.us/img167/649/gfiebi8.jpg

As imagens são do header do meu blog, apaguei o titulo para não ir contra as regras.

Andei a ver se haviam truques, e encontrei alguns para outros problemas que resolvi, mas este não consigo resolver

[Bruno Bernardino]

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)

[drink]

Mostra o código respectivo, sff.
Tanto HTML como CSS

[Dav7]

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>

[drink]

(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.

[Bruno Bernardino]

@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.

[drink]

(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.