Colocar Resposta 
 
Avaliação do Tópico:
  • 0 votos - 0 Média
  • 1
  • 2
  • 3
  • 4
  • 5
Problemas de visualização FF e IE
02-02-2009, 09:17
Mensagem: #1
Problemas de visualização FF e IE
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 Confused

http://www.Ganha-Facil.com
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
02-02-2009, 09:59
Mensagem: #2
RE: Problemas de visualização FF e IE
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)

BrunoBernardino.com
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
02-02-2009, 10:10 (Esta mensagem foi modificada pela última vez a: 02-02-2009 10:10 por drink.)
Mensagem: #3
RE: Problemas de visualização FF e IE
Mostra o código respectivo, sff.
Tanto HTML como CSS

[Imagem: pplware_reader.png]
[Imagem: portugaluserbarorgulhos.png]
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
02-02-2009, 14:39
Mensagem: #4
RE: Problemas de visualização FF e IE
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>

http://www.Ganha-Facil.com
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
02-02-2009, 15:55 (Esta mensagem foi modificada pela última vez a: 02-02-2009 16:09 por drink.)
Mensagem: #5
RE: Problemas de visualização FF e IE
(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>

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

[Imagem: pplware_reader.png]
[Imagem: portugaluserbarorgulhos.png]
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
02-02-2009, 16:04
Mensagem: #6
RE: Problemas de visualização FF e IE
@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.

BrunoBernardino.com
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
02-02-2009, 16:08
Mensagem: #7
RE: Problemas de visualização FF e IE
(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.

[Imagem: pplware_reader.png]
[Imagem: portugaluserbarorgulhos.png]
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
Colocar Resposta 


Saltar Fórum:


Utilizadores a ver este tópico: 1 Visitante(s)