• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

Knitter

[Resolvido] Como remover o avanço que a tag <ul> impõem ao texto?

8 mensagens neste tópico

Boas,

Fiz um menu lateral usando listas não ordenadas, no entanto, sempre que uso essa tag, o conteúdo sofre um avanço de alguns pixels.

O problema é que, no caso do IE6/7 esse avanço é muito grande, o que leva a que um menu fique completamente colado ao lado direito da barra de navegação.

Aspecto no IE:

erroiejd9.png

Aspecto no Firefox:

erroffmx1.png

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

via css ou com a tag style

só não sei se é a margin-left ou o padding-left

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Com CSS.

Tenho o seguinte CSS:

.nav {
height: 100%;
float: left;
width: 145px;
background-color: #ffffff;
padding: 0;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #cccccc;
}

.nav ul {
padding-top: 80px;
}

.nav li {
list-style: none;
font-family: monospace;
font-size: medium;
margin: 0 0 3px 0;
}

Se eu disser que a tag <ul> passa a ter uma margem de 0, então no IE o texto fica encostado à direita, no entanto, no Firefox o avanço mantém-se. Se definir, por exemplo, margin: 0 0 0 15px, o que corresponde a uma margem de 15 pixels à esquerda, no IE fica bem mas no Firefox os 15 pixels são contados apartir do avanço o que provoca um espaço errado.

A solução do padding-left, dada pelo djthyrax, rebenta com o layout no IE, a div do lado direito passa para baixo. A barra de navegação fica a ocupar mais espaço do que o que devia. Já tinha experimentado isso, mas obrigado na mesma.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

-10 dá erro de sintaxe, valores negativos não permitidos para padding-left, e além disso não faz coisa alguma :P

Mas não rebenta o layout, simplesmente volta ao problema inicial, no firefox está bom, no IE está mau...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

pelos screenshots parece-me que a diferença entre os dois não é o avanço mas sim o tamanho de letra, experimenta em vez de font-size:medium pôr um tamanho de letra fixo

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Bem parece que quem ganhou esta foi o kyu, que teve melhor olho que eu e viu o erro... de facto o tamanho da letra estava relativo e à descrição do browser.

Como coloquei um tamanho fixo, o problema ficou, aparentemente, resolvido.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Convidado
Este tópico está fechado a novas respostas.