margin problemas

[Silvio Santos 0]

olá estou com um problema com margintenho#id { background: url("img.jpg") no-repeat;}#id h5 { margin-top:7px; margin-left:5px;}no IE 6 funcioncio normal ele fica aonde quero , mais o FF e no Opera otexto quase nem sai do lugar. Não é padrão fazer isso neh??? se eucolocar um posiction: absolute eu coloco aonde quero neh , mais naumquero usar absolute :Dflw

[r e i n a l d o 0]

tenta ao invés de margin usar padding

[Silvio Santos 0]

Vlw funcionou corretamente :) , o pessoal tava falando para usar css hacks _margin-top:7px; soh que acho meio inviavel no momento

[Maujor 144]

nessa sequencia..

1º para o FF.. abaixo o do IEca em 2º!

 

Neste caso a seqüência não importa!

 

O IE não entende seletor tipo E>F.

O seletor filho html > body é mais específico que o .id e será aplicado pelos navegadores que o entendem, aqui independente da ordem que apareça nas CSS.

 

Nota: A maneira correta de servir CSS para o IE é com Comentários Condicionais

[FelipeMorais 0]

Maujor, já que tocou no assunto do hack html>body, lembrei-me de um artigo sobre IE7, onde falavam que esse hack poderia causar falhas na renderização da pagina.

 

O artigo esta no blog do Bruno Dulcetti

Se puder comente algo sobre o asunto, por favor!

[Maujor 144]

Releia a matéria do Bruno que está tudo muito bem explicado.

[FelipeMorais 0]

Certo, mas o unico modo é reescrever toda a parte que der problema no css, uma vez pro FF e outra pro IE?

Por exemplo:

<style type="text/css">body {margin: 10px;padding: 3px;color: #666;background-color: #fff;font: 75% Verdana;}</style><!--[if lte IE 6]><style type="text/css">body {background-color: #000;color: #FFF;}</style><![endif]-->

Não seria mais facil assim?

<style type="text/css">body {margin: 10px;padding: 3px;color: #666;background-color: #fff;font: 75% Verdana;_color: #666;_background-color: #fff;}</style>

Não entendi a necessidade do comentário... é só para separar as versões do IE? Se puder comentar ou indicar algum lugar que diga o motivo de diferenciar as versões do IE ficaria muito agradecido!

Como pode ver, estou iniciando na área. Aprendi bastante sobre como escrever o código, porém, não sei a diferença de renderização dos browsers...

[Maujor 144]

Ola Felipe,

O problema não é com as versões existentes do IE e sim com a chegada do IE7.

Vou mostrar de um modo bem básico e fácil de entender.

(Na realidade é um pouco mais complexo)

O IE7 vai passar a suportar algumas propriedades CSS que hoje não suporta e outras continuarão sem suporte. Isto é, vai resolver as coisas pela metade.

 

Vamos ver seu exemplo:

Para navegadores standards:

color:#fff;

background:#000;

 

Para o IE:

 

_color:#000;

_background:#fff;

 

Tudo bem, só o IE entende o hack underscore e aplica as regras.

 

Aí chega o IE7 e não entende _color (resolveram este problema) e continua entendendo _background (não resolveram este problema).

Atenção: Esta suposição com o hack underscore é só para facilitar o entendimento.

 

Veja o que o IE7 vai aplicar:

 

color:#fff;

_background:#fff;

 

e a sua bela página com textos vai aparecer toda EM BRANCO.

--------------------------------------------------------------

Numa folha de estilos extensa e com muitos hacks para o IE (o que não é raro) vai ser um problemão para resolver.

 

Colocar hacks para IE em uma folha de estilos separada e serví-la com comentários condicionais é a escolha acertada.

Basta alterar o <!--[if lte IE 6] de acordo.

 

É claro que em uma folha pequena com alguns hacks isto não é necessário, altera-se na própria folha.

 

 

NOTA:: As propriedades color e background que eu usei para dar o exemplo foi só para simplificar o exemplo.

O hack underscore não é validado em uma CSS. Se tiver que usar, prefira o hack estrela * html color

[FelipeMorais 0]

Nossa, como sempre o senhor apresenta um didática invejavel!Procurava na internet e não encontrei nenhum lugar que fosse tão clara e precisa a explicação!Agora darei mais atenção aos comentário condicionais, não só pq eles existem mas pq agora entendo a função!Obrigado pelas resposta, Maujor!