Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

26 dezembro 2007

Hacks para IE6 e IE7

Se uma medida fica perfeita no Firefox (por exemplo, a largura de uma coluna) mas desfigura o template no IE6, basta acrescentar underline antes da medida, como no exemplo:

sidebar: 220px; (aqui, medida para o Firefox)
_sidebar: 210px; (aqui, com o acréscimo de underline, será interpretado apenas pelo IE6)

Para que funcione, a medida para o IE6 deve vir logo abaixo da medida para o Firefox.
Mas, este hack não funciona para o Internet Explore 7, então, para que o template fique idêntico nos tres navegadores, devemos fazer assim:

sidebar: 220px; ( medida para o Firefox)
*sidebar: 210px; ( usa-se o asterisco para o IE7)
_sidebar: 210px; (com o acréscimo de underline, será interpretado apenas pelo IE6)

Obs: Deve-se obedecer esta hierarquia para que tudo funcione corretamente: Firefox/IE7/IE6

Artigos Relacionados

21 comentários:

Unknown disse...

olá....
à princípio parabéns pelo teu blog... venho seguindo teus tutoriais e estou conseguindo evoluir o meu blog do jeito que eu queria....
enfim... gostaria de obter a sua ajuda! o meu blog thunderarock esta com um problema na sidebar right que fica lá embaixo no blog e não sei o que fazer... na verdade somente no firefox apresenta este problema... será que vc poderia me dar uma força!!!
Desde já agradeço, aguardando resposta.

Ariane disse...

Andre, eu visualizei o código do seu template no firefox e fiz a conta: a outer-wrapper tem 950px mas a soma das colunas, mais bordas, mais padding está ultrapassando em 1px o total permitido. vc pode retirar o padding da main-wrapper e sidebar (a newsidebar não tem). isso já faz muita diferença. ou aumente a outer-wrapper para 955px. abraços

Will disse...

Olá Ariane, tudo bem?
To aguardando aquela resposta sobre "o aprimoramente de marcadores", ok?! (desculpe o incomodo!rsrs)
Bom, meu blog está muito bem em IE 7.0 e Firefox, porém no IE 6.0 a sidebar está aparecendo na parte inferior do blog o que devo fazer?

Anônimo disse...

Olá, como vai?
Vixi, aproveitei bastante coisa do teu site pra montar meu blog. Estou quase terminando.
Sobre esse artigo, essa diferenciação do * e _ serve para qualquer local do código? Posso usar no padding, ou no estilo (CSS) como border e outros? Estou com um problema no meu blog, onde no Firefox aparece perfeito (ícone ao lado do link comentários), já no IE7 ele entende o padding como uma borda e deixa cinza. Se tiver como dar uma olhada rápida, por favor. Agradeceria.
Um abraço. Ainda aproveitarei mtas coisas por aqui.

Ariane disse...

fatheroes, vi o código, o que acontece é que, junto a imagem do comentario está: style='border:6px;padding-left:15px' Apaga este border:6px e visualiza, prá ver se desaparece a borda. Provavelmente desaparecerá. Ah, o hack serve para qualquer propriedade sim, contanto que se estabeleça a hierarquia, ok? Abraços

Anônimo disse...

Ariane, tudo bem?

Pois é, olha só, eu que coloquei aquele estilo la na img e não me dei conta que tava com a borda!!! Heheh... por isso é bom um olhar mais atento e experiente. Obrigado.

Só tive que manter o border mas com 0px ..pq sem ele,não sei pq, ainda mantinha uma bordinha bem fina (1px) cinza... hehe.

Mas mto obrigado. Logo logo estarei iniciando as postagens, e te faço o convite para aparecer por la. As imgs dos heróis gordinhos estão ficando bacanas!
Um abraço.

Unknown disse...

AAAAAHHHHH!!!

O I.E. é um cocô!!! Estou ficando louca aqui...
rsrsrs
(desculpa o desabafo)

Estou quebrando um galho para a mãe de uma amiga e criando um blog pro salão dela, mas o I.E. não está me ajudando. Em TODOS os navegadores do BrowserShots o layout está bonitinho, e mesmo inserindo esses hacks que vc ensinou aí em cima, o Internet Explorer se recusa a exibir corretamente meu layout.
Já não sei o que fazer e por isso recorri a você novamente...

Se puder me ajudar a exergar onde eu estou errando, eu agradeço enormemente!
o endereço é http://belezavivateste.blogspot.com

Um beijão!

Ariane disse...

Oi Suelen, ou vc conseguiu arrumar ou sou eu que não tô enxergando o erro...visualizei no FF, no IE6 e IE7 e aparentemente tá idêntico nos tres. Me explica em detalhes onde está oerro, ok? Abraços!

Unknown disse...

Boa tarde tudo bem?
Tenho visitado o seu blog, e tenho visto dicas importantes que me ajudam bastante. Estou com um problema aqui na agência que está tirando minhas noites de sono, se puder ajudar, eu agradeço muito!
________________________________________
Tenho uma DIV Container e quero que ela aumente de acordo com o conteúdo, portanto, eu setei o height como auto.

Dentro dessa DIV tenho duas DIVS que gostaria de colocar uma do lado da outra, porém, se eu uso float ou position nelas, a minha DIV container simplesmente para de acompanhar o conteúdo e o tamanho das DIVS que gostaria de colocar uma do lado da outra.

Como eu posso colocar uma div do lado da outra sem usar FLOAT (left ou right) ou POSITION (absolute ou relative)?
________________________________________
Existe uma outra solução?

Ariane disse...

Ricardo, o ideal seria que eu pudesse ver o código.

Rafael C. Henrique de Lima disse...

Bom gostaria de parabenizar pelo blog...
muito bom msm...
mas estou com um problema no I.E.6...
o problema está na posição das imagens de um menu em flash e sobre o texto...
já tentei fazer de tudo que ele ficar nos cantos, pois são 3 imagens mais o menu em flash...
e eles não param...
ficam numa linha no I.E.6...
teria como vc estar me ajudando...

muito agradecido...

Rafael Lima

Obs.: e-mail de contato: rafaeldr17@gmail.com

Ariane disse...

Rafael, eu precisaria ver o código e seu perfil está indisponível, abraços!

Anônimo disse...

Olá ariane, muito obrigado por nos ajudar. Tenho uma dúvida: no firefox minha sidebar direita aparece certo, mas no IE 7.0 ela só aparece quando eu clico em algum post, na pg inicial não mostra ela e só dá pra ver 1 post. Se possível, poderia me ajudar?

Anderson disse...

Bah eu tentei, tentei e retentei e não consegui mudar a forma de visualização do meu blog no IE.
Tipo não aparece nem as bordas.Se não for pedir muito,gostaria de uma ajuda. Brigado

Ariane disse...

Anderson, exatamente o q vc quer mudar no layout?

Unknown disse...

Ariane venho aqui pedir sua ajuda, possuo o seguinte Blog - http://next-down.blogspot.com, porem o mesmo apresenta muito problemas quando e vizualizado no IE (principalmente no 6), sem contar qeu a janela de comentários não aparece de forma alguma! Será que voce consegue me ajudar!

Meu email é next_time@rocketmail.com

Muito Obrigado

Admin disse...

Não entendi!!
Certamente que procurei esses trechos no meu HTMl , e não localizei nenhum com esses determinados nomes..
E no código CSS todos são inicializados por '#' e não por '_' e nem '*'.
Poderia me auxiliar nesse desafio?

Unknown disse...

Nau intendi !

Anônimo disse...

Ariane,venho pedir sua ajuda.Coloquei como janela pop-up a caixa de comentários .Porém o link que abre a janela pop-up(POSTAR UM COMENTÁRIO),aparece totalmente desajustado no internet explorer.Ele sobe do lado direito quando aumenta o nº de comentários.*Eu deixei os comentáros de teste na página do MAPA DO SITE.Se puder me ajudar.Desde já agradeço!O endereço é este :http://www.famahoje.blogspot.com .

Unknown disse...

o ariane!!
me ajuda ; )
tentei isso mais não mudo nadz "/

no ie6 a barra da direita dece lah pra baixo "/

O que eu posso fazer?

bjos ;*

Unknown disse...

a o link do blog é
www.blogdokanav.com

; )

Postar um comentário

Os comentários são moderados.