Como minimizar as diferenças: FFxIE

[Robson Rogerio]

E ai pessoal tudo blz com todos?

É o seguinte, meu blog apresenta diferenças no lay-out quando visto no IE e no FF, gostaria de diminuir ao máximo essas diferenças.

Como ainda sou iniciante nesse mundo dos blogs venho até aqui pedir ajuda dos mais experientes.

Segue o endereço do meu blog: Borda do Mundo

[Marcos]

Tenha um CSS validado , tente definir tudo em seu template como margin e padding etc , pois as vezes a interpretação do elemento HTML pode variar de navegador .

Por exemplo tive um problema que no firefox os elementos

não tinha espaçamento a paddind nem amrgin nem nada ...

mas ja no IE e no Chrome sim !

Então eu tive que definir tudo manualmente , pois os navegadores n interpretam tudo da mesma forma .
Uma dica é que caso voce ja tenha definido isso em sua folha de estilo é bom usar o ' * '

pois com o asterisco voce defini valores para todos os elementos caso os mesmo não tenha nada definido.

desta forma:

Código:

*{
margin:0;
padding:0;
}

então defini que todos os elementos da minha pagina que não tenham um ID ou class com css definida terá estas definições.

[robweb]

O codigo que define a posição do menu é esse:

/* Horizontal Menu
----------------------------------------------- */
#menu {
width:1000px;
margin:55px 0 15px 0;
padding:0;
text-align: center;
float:left;
*margin:1px 0 15px 0;
}

Voce ve algo errado nesse codigo?

Obrigado.

[Marcos]

Olá robweb !
pq não se registrar no forum ??
bom era legal eu conhecer tambem a sua pagina , a inicio a unica coisa que poderia esta errada ai é o *margin:1px 0 15px 0;
sei que o ' * ' é para que SO O IE6 interprete esta linha mas claro que o melhor é tentar fazer as coisas sem os chamados hacks .
Bom eu ainda não tive tempo de olhar pelo IE o seu site
Mas creio que o
width:1000px; não seja preciso ... faz um teste depois me fala okay?

[Robson Rogerio]

Olá robweb !
pq não se registrar no forum ??
bom era legal eu conhecer tambem a sua pagina , a inicio a unica coisa que poderia esta errada ai é o *margin:1px 0 15px 0;
sei que o ' * ' é para que SO O IE6 interprete esta linha mas claro que o melhor é tentar fazer as coisas sem os chamados hacks .
Bom eu ainda não tive tempo de olhar pelo IE o seu site
Mas creio que o
width:1000px; não seja preciso ... faz um teste depois me fala okay?

Olá Marcos, acabei trocando o template e achei que tinha resolvido o problema, agora após fazer algumas personalizações me deparei com comportamentos estranhos novamente.

O Template é esse:

http://www.bloggerstyles.com/excellence-blogger-template/

http://www.best2know.info/2009/07/excellence-blogger-template.html

Que teoricamente está em conformidade com os dois navegadores mais populares, o que acontece é que em alguns navegadores como o FF Portable que uso no trabalho o lay-out fica desconfigurado, a imagem do rodapé vai parar proximo ao menu superior o texto do mesmo rodapé se perde pelo espaço do lay-out

No FF normal que uso em casa, isso não acontece.

Enquanto isso no IE 6 quando clico para ler esse post especifico:

http://bordadomundo.blogspot.com/2009/10/atualmente-as-mortes-no-transito-nao.html

Aparecem esses caracteres estranhos preenchendo a tela inteira


?�s7?0?֪

[Marcos]

Iremos por partes ..
no seu template procure por :

Código:

#footer { height:104px; background:url(http://lh3.ggpht.com/_YmHfvohKiqU/Stzf1RqNK_I/AAAAAAAACAo/5irenQVZa90/footer.jpg) repeat-x;}
e tente mudar por
#footer {clear:both;height:104px; background:url(http://lh3.ggpht.com/_YmHfvohKiqU/Stzf1RqNK_I/AAAAAAAACAo/5irenQVZa90/footer.jpg) repeat-x;}

e verifique se o footer continua a subir .
caso continue volte aqui no forum e mande um print , caso não !
iremos ao proximo problema

[Robson Rogerio]

Ok Marcos, vou verificar isso quando chegar em casa, aqui no trabalho o blogger é bloqueado.

Engraçado que isso so acontece no FF Portable (versão 3.0), fiz um teste com esses sites que testam o seu site em varios navegadores diferentes e não vi problema parecido.

Agradeço sua ajuda novamente.

[Felipe CDs]

Tenho uma breve dica, como por exemplo:
diferenciar a margem entre widget's, menu, e outras apliações no FireFox, Internet Explorer 6, Internet Explorer 7, Internet Explorer 8 e outros navegadores, basta adicionar os caracteres "_" para IE6 e "*" para IE7, sem as aspas, antes do comando CSS.

EX:

Código:

#widget {
width:510px;
height:178px;
margin: 20px; /* Para FireFox e demais navegadores */
_margin: 12px; /* Margem para IE6 */
*margin: 12px; /* Margem para IE7 */
}

Outro ponto. Depois que a Microsoft lançou o novo Internet Explorer 8, devido algumas modificação quanto a interpretação do CSS nessa nova versão surgiram alguns novos probleminhas quanto a interpretação de comando CSS. Se você desenvolveu todo seu blog para uma perfeita exibição no IE7 e ele fica com algumas diferenças no IE8, para resolver esse probleminha, basta adicionar um única linha antes da TAG "‹head›".

Para que o IE8 exiba seu blog em modo de compatibilidade com IE7 adicione a linha de código abaixo antes de "‹head›":

Código:

<meta content='IE=7' http-equiv='X-UA-Compatible'/>

Esta TAG faz com que o ambiente IE7 seja emulado no IE8.
Bem simples!

Espero que essa dica tenha serventia para alguem.
Vlw!

[Marcos]

ja conheço esta meta , e por acaso ela é usada no novo estilo do blogger.
honestamente , odeio estes hacks e n aconselho ninguema usa los , prefiro fazer do 0 meus templates do que usar para retirar erros XD.
mas cada um cada um... e ah so uma coisa "FelipeCDs" gostei muito do seu template muito bem bolado parabens.
e se vc foi copiado é pq vc é invejado ou seja vc esta fazendo um bom trabalho (pelo menos é o que tudo leva a crer rsrs) então parabens !