1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Ajuda neste HACK

Discussão em 'Web Development' iniciada por chantas, 26 de Maio de 2007. (Respostas: 14; Visualizações: 883)

  1. 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! ;)
     
  2. chantas

    chantas Power Member

    Se não me fiz entender avisem!! :)
     
  3. [N]

    [N] Power Member

    tenta assim:

    se nao funcionar troca a ordem dos margin.
     
  4. chantas

    chantas Power Member

    Resultou! Não me tinha lembrado de experimentar dessa forma! :) Mto obrigado [N]!
     
  5. shello

    shello Moderador
    Staff Member

    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!
     
  6. chantas

    chantas Power Member

    Obrigado! Assim sempre é mais uma alternativa ;)
     
  7. SoundSurfer

    SoundSurfer Power Member

  8. chantas

    chantas Power Member

  9. chantas

    chantas Power Member

    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 é?
     
  10. SoundSurfer

    SoundSurfer Power Member

    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.
     
  11. chantas

    chantas Power Member

    Ok got it! É verdade que mais vale prevenir que remediar! Então a melhor solução para o que pretendo é mesmo usar "Conditional comments"?
     
  12. chantas

    chantas Power Member

    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?
     
  13. shello

    shello Moderador
    Staff Member

    A única forma que sei é por js:
    screen.width e screen.height
     
  14. artideias

    artideias Power Member

    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.
     
  15. chantas

    chantas Power Member

    Após detectar a resolução do monitor posso redireccionar o user para um CSS optimizado para a resolução detectada através dos comandos "IF"?
     

Partilhar esta Página