Welcome Guest!
 arqHP
 Previous Message All Messages Next Message 
=?iso-8859-1?Q?Re:_Diferen=E7as_devido_ao_DOCTYPE?=  Irapuan Martinez
 Aug 10, 2003 15:23 PDT 

At 15:50 8/8/2003 -0300, Pablo Barros wrote:
 Mas (sempre tem um porém) deixei um erro proposital para podermos
discutir. www.projetodeproduto.kit.net Vejam (navegando pelo IE 5.5 ou 6)
que o iframe artigo está com rolagem na vertical (normal) e na horizontal.
Os outros iframes (novidades e blog) não estão. Vou explicar o porquê: A
única (e grande) diferença é que no frame com problema eu deixei a
seguinte especificação:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Essa especificação também está na index e com ela o esquema de boxing no
IE (margin, border, padding) fica igual ao do Opera7.11.

É o problema de interpretação de boxmodel. Resumindo:

W3C strict box model: Width de um elemento é o espaço que o elemento ocupa
horizontalmente, EXCLUÍNDO padding, border e margin.

IE quirk box model: Width é a soma da largura do elemento + padding + border.

Em relação aos browsers:

IE 5 e 5.5: Interpretará sempre o quirk box model, mesmo com doctype.

IE 6: Interpretará o quirk mode, se o documento não especifica doctype em
XHTML. Se tiver doctype apontado para XHTML, transicional ou strict,
interpreta em strict box model.

Opera: Igual ao IE 6 (apenas para que, camaleonicamente, os layouts
desenvolvidos para o IE funcionem também nele)

Mozilla: Sempre interpretará em strict box model, mesmo sem doctype.


 Agora, tenho um problema grande: Dos "retângulos" existentes no site, o
calendário é um div e por esse motivo no IE5 ele não seguiu o esquema de
medidas do iframe ao seu lado (está menor). Pq isso acontece? Qual a solução?

Hack. Use Doctype e manda ver no CSS:

         .megatron {
                 padding: 15px;
                 border: 5px;
                 width: 300px;

         /* inicio ie5 win hack */
                 voice-family: "\"}\"";
                 voice-family:inherit;

                 width: 260px;
         }

         html>body .megatron {

                 width: 260px;

         /* fim ie5 win hack */
         }

Aonde o "300px" é a medida para o quirk mode (width + padding + border). Os
"260px", é a largura para o strict mode, aonde não entra padding nem borda.

 
 Irapuan Martinez .>__________________________________________
                                     http://www.hypergraph.com.br
	
 Previous Message All Messages Next Message 
  Check It Out!

  Topica Channels
 Best of Topica
 Art & Design
 Books, Movies & TV
 Developers
 Food & Drink
 Health & Fitness
 Internet
 Music
 News & Information
 Personal Finance
 Personal Technology
 Small Business
 Software
 Sports
 Travel & Leisure
 Women & Family

  Start Your Own List!
Email lists are great for debating issues or publishing your views.
Start a List Today!

© 2001 Topica Inc. TFMB
Concerned about privacy? Topica is TrustE certified.
See our Privacy Policy.