Ajuda neste HACK

chantas

chantas

Power Member
Boas pessoal!

É o seguinte...tou a desenvolver um site no qual quero que qnd o browser for o IE este tenha um margin-top de X, e quando for o Firefox tenha uma margem de Y...estou a usar o seguinte hack:

#header {
height:196px;
background:url(images/header.png) 50% 50% repeat-y;
*margin-top:200px;

}

Devem ter reparado no asterisco antes do "margin-top" que vai fazer com que o IE leia aquela regra e o Firefox não...mas o meu problema apareçe quando quero que o Firefox tenha por exemplo uma margem de 210px...já tentei criar uma regra igualzinha a esta mas sem o asterisco, ou seja:

#header {
height:196px;
background:url(images/header.png) 50% 50% repeat-y;
*margin-top:200px;

}

#header {
height:196px;
background:url(images/header.png) 50% 50% repeat-y;
margin-top:250px;

}

No entanto quando ponho esta sem o asterisco o tanto o Firefox como o IE vão usar a margem de 250px! Alguém me pode dar uma dica sff?

Obrigado! ;)
 
Mesmo tendo resultado, deixo aqui mais um hack, bastante semelhante ao que tens, mas que pode vir a ser útil.

Com esse teu código:
Código: 
#header
{
    height:196px;
    background:url(images/header.png) 50% 50% repeat-y;
    margin-top:250px;
    [B]//[/B]margin-top:210px;
}

No fundo é simular um comentário, que o Internet Explorer não entende como isso, ao contrário dos outros browsers.

Cumprimentos!
 
shello disse:
Mesmo tendo resultado, deixo aqui mais um hack, bastante semelhante ao que tens, mas que pode vir a ser útil.

Com esse teu código:
Código: 
#header
{
    height:196px;
    background:url(images/header.png) 50% 50% repeat-y;
    margin-top:250px;
    [B]//[/B]margin-top:210px;
}

No fundo é simular um comentário, que o Internet Explorer não entende como isso, ao contrário dos outros browsers.

Cumprimentos!
Clicar para expandir...

Obrigado! Assim sempre é mais uma alternativa ;)
 
chantas disse:
Mas existe algum problema em usar hacks?

Já agora, como podia fazer o que queria sem o uso de hacks?
Clicar para expandir...

Esquece..já tive a ver os links que deste e penso que percebi tudo! Diz-me só uma cena, estes códigos:

<p><!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->

São para ser colocados no html certo? E através deles posso indicar para um 2º file css com as definicoes especificas para o IE não é?
 
chantas disse:
Esquece..já tive a ver os links que deste e penso que percebi tudo! Diz-me só uma cena, estes códigos:

<p><!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->

São para ser colocados no html certo? E através deles posso indicar para um 2º file css com as definicoes especificas para o IE não é?
Clicar para expandir...

Exacto.

O problema dos hacks é que, quando sair um novo browser que deixe de ler os hacks, lá vai "alguém" ter de andar a mexer outra vez na CSS. Como já me aconteceu quando saíu o IE7. Serviu de lição.
 
SoundSurfer disse:
Exacto.

O problema dos hacks é que, quando sair um novo browser que deixe de ler os hacks, lá vai "alguém" ter de andar a mexer outra vez na CSS. Como já me aconteceu quando saíu o IE7. Serviu de lição.
Clicar para expandir...

Ok got it! É verdade que mais vale prevenir que remediar! Então a melhor solução para o que pretendo é mesmo usar "Conditional comments"?
 
Entretanto surgiu-me uma outra dúvida e aproveito este topic para a questionar:

Também é possivel detectar a resolução que está a ser utilizada certo?Alguém pode dar-me umas luzes sobre isso sff?
 
eu para o ie6 e somente para ele, uso.

.nomeClass { height: 100px; min-height: 100px }
.nomeClass[class] { height: auto }

Dou um valor para os browsers depois altero-o somente para os + modernos

E sei que aqui o debaixo somente os browsers mais modernos irão perceber, são as regras criadas para elementos com determinados atributos. Que o ie6 e inferiores não percebem.
 
Inicie sessão ou registe-se para poder participar.
Back
Topo