← HTML + CSS

margin-top - resultados diferentes no IE e no Firefox

Lida 4931 vezes

Offline

Roberto Francisco 
Membro
Mensagens 669 Gostos 1
Feedback +3

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Boas!

A dúvida é a seguinte, tenho um meu com alguns links, no Firefox aparece centrado (na vertical) no IE aparece colado ao topo da div em que está inserido.
Já usei _magin-top: Xpx e *margin-top: Xpx mas não resultou.

Alguém me pode ajudar a resolver este problema?

obrigado
Offline

=IceBurn= 
Membro
Mensagens 897 Gostos 3
Feedback +3

Troféus totais: 32
Trófeus: (Ver todos)
Windows User Level 6 Linux User Mobile User Super Combination Combination Topic Starter Poll Voter Poll Starter Level 5

Como não estou a ver o CSS, apenas te posso dar umas dicas.

Considera o seguinte exemplo:

Código: [Seleccione]
div#menu a {
    padding: 0;
    margin: 0;
    line-height: 30px;
    height: 30px;
    vertical-align: middle;
    display: block;
}
Offline

estrucida 
Membro
Mensagens 13 Gostos 0
Troféus totais: 19
Trófeus: (Ver todos)
Super Combination Combination Level 4 Level 3 Level 2 Level 1 10 Posts First Post Karma Webmaster

tens para aí no meio algun float?
Offline

Roberto Francisco 
Membro
Mensagens 669 Gostos 1
Feedback +3

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Boas, tentei aplicar essa dica mas não fui bem sucedido :-?

fica aqui a parte do menu:

Código: [Seleccione]
#menu_1{
color: #fff;
width: 500px;
float: right;
text-align: right;
text-decoration: none;
}

#menu_1 ul{
list-style: none;
}

#menu_1 ul li{
display: inline;
}

#menu_1 ul li a{
color: #fff;
text-decoration: none;
padding-left: 20px;
}

#menu_1 ul li a:hover{
color: #6BB5FE;
}

#menu_1 ul li a:active{
color: #6BB5FE;
}


Por acaso tenho um float, lá em cima... :-?
Offline

estrucida 
Membro
Mensagens 13 Gostos 0
Troféus totais: 19
Trófeus: (Ver todos)
Super Combination Combination Level 4 Level 3 Level 2 Level 1 10 Posts First Post Karma Webmaster

Por acaso tenho um float, lá em cima... :-?

Ok, então o teu problema pode ser esse.
No div a seguir ao #menu_1 terás de pôr:

clear: both; (podes pôr só clear: rigth; eu é que costumo ter sempre floats left e right e portanto uso clear: both;)


Se não resultar, para além do css, podes por favor pôr a estrutura básica do HTML? Não precisas de pôr tudo. Só queria ver como tens estruturado os divs e em qual deles estás a ter problemas.
Offline

Roberto Francisco 
Membro
Mensagens 669 Gostos 1
Feedback +3

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

 :-?Também não resultou.

Aqui está a parte do html:

Código: [Seleccione]
<div id="menu_1">
<ul>
<li><a href="file:///C:/Users/berto/Desktop/Gespub/index.html">| início</a></li>
<li><a href="file:///C:/Users/berto/Desktop/Gespub/certificacao.html">| certificação</a></li>
<li><a href="file:///C:/Users/berto/Desktop/Gespub/clientes.html">| clientes</a></li>
<li><a href="file:///C:/Users/berto/Desktop/Gespub/casosdesucesso.html">| casos de sucesso</a></li>
</ul>
</div>
</div>
</div>

Obrigado!
Offline

estrucida 
Membro
Mensagens 13 Gostos 0
Troféus totais: 19
Trófeus: (Ver todos)
Super Combination Combination Level 4 Level 3 Level 2 Level 1 10 Posts First Post Karma Webmaster

Olha, está a custar-me a compreender exactamente o teu problema.
No entanto alterei o teu CSS (pus umas dimensões estúpidas só para notares a diferença e comparares).
Mexe apenas nos paddings e não tires as margins.
Depois diz-me qualquer coisa, ok?

#menu_1{       
   color: #fff;
   width: 500px;
/*        font-size: 12px;*/
   float: right;
   text-align: right;
   text-decoration: none;
        padding: 0px 0px 0px 0px;
        margin:  0px 0px 0px 0px;
}

#menu_1 ul{
   list-style: none;
        padding: 50px 100px 0px 0px;
        margin:  0px 0px 0px 0px;
}

#menu_1 ul li{
   display: inline;
        padding: 0px 0px 0px 0px;
        margin:  0px 0px 0px 0px;
}
Offline

Roberto Francisco 
Membro
Mensagens 669 Gostos 1
Feedback +3

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Obrigado! Já tenho isto a funcionar, embora ainda não tenho bem a certeza de como é resultou.

Ficou assim:

Código: [Seleccione]
#menu_1{       
color: #fff;
width: 500px;
font-size: 16px;
float: right;
text-align: right;
text-decoration: none;
padding: 15px 0px 0px 0px;
margin:  0px 0px 0px 0px;
}

#menu_1 ul{
list-style: none;
padding: 0px 0px 0px 0px;
margin:  0px 0px 0px 0px;
}

 :obrigado:
Offline

estrucida 
Membro
Mensagens 13 Gostos 0
Troféus totais: 19
Trófeus: (Ver todos)
Super Combination Combination Level 4 Level 3 Level 2 Level 1 10 Posts First Post Karma Webmaster

O que eu tenho reparado é que tem muito a ver se tens os paddings e as margins definidas. É por isso que eu tenho sempre a tendência de usar (e viste isso no css que te enviei):
padding: 0px 0px 0px 0px;
margin:   0px 0px 0px 0px;

Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Estrucida não é necessário repetir o 0px, uma vez que as medidas vão ser iguais basta colocar:

padding: 0;
margin: 0;

Cumprimentos
Offline

estrucida 
Membro
Mensagens 13 Gostos 0
Troféus totais: 19
Trófeus: (Ver todos)
Super Combination Combination Level 4 Level 3 Level 2 Level 1 10 Posts First Post Karma Webmaster

Estrucida não é necessário repetir o 0px, uma vez que as medidas vão ser iguais basta colocar:

padding: 0;
margin: 0;

Cumprimentos

Sim, eu sei disso.
No entanto continuo a ter o hábito de pôr tudo direitinho, ajuda-me a estruturar melhor o pensamento.
É mesmo picuisses minhas.  :oops: