ajuda necessária com doctype

StackOverflow https://stackoverflow.com/questions/1515030

  •  19-09-2019
  •  | 
  •  

Pergunta

Estou tendo problemas com o design de um site de teste. Quando eu estou abrindo minha página html com o IE, sem a minha linha de doctype, ele processa apenas o jeito que eu gosto, mas não no FF (por causa da maneira como ele interpreta o preenchimento, entre outras coisas). Quando eu adicionar a linha doctype, a página é comprimido a uma altura de cerca de 230px. Minha intenção é definir a altura para a altura máxima página. Aqui estão os meus arquivos:

* index.html * 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" /> 
   <!--[if IE]>
  <style type="text/css">
   body {
    text-align: center;
    /* Remove padding: */
    padding: 0;
   }
   #container {
    /* Mind the box model in IE.. */
    height: 100%;
   }
  </style>
  <![endif]-->
</head>  
<body>
<!--[if IE]><div id="container"><![endif]-->
<div class="container">
     <div class="header">  
         <h1>Logo</h1>  
     </div>
     <div class="nav widget-header ">
            <!-- main nav -->
            <a href=""><div class="nav-button state-default " ><img src="a.jpg" alt="a" /></div></a>
            <a href=""><div class="nav-button state-default " ><img src="b.jpg" alt="b" /></div></a>
            <a href=""><div class="nav-button state-default " ><img src="c.jpg" alt="c" /></div></a>
            <a href=""><div class="nav-button state-default " ><img src="d.jpg" alt="d" /></div></a>
            <a href=""><div class="nav-button state-default " ><img src="e.jpg" alt="e" /></div></a>
    </div >
    <div class="content">
        <!--content area-->
        <p>content</p>
    </div>
    <div class="footer">
        <!-- footer -->
        <p>&copy; Copyright</p>
     </div>
</div>
<!--[if IE]></div><![endif]-->
</body>
</html>

* stylesheet.css * 

/* reset */
html, body, div, span,   
h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
img, ins, kbd, q, s, samp,  
sbutton_cl, strike, strong,   
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td {  
    margin: 0;  
   padding: 0;  
   border: 0;  
   outline: 0;  
   font-size: 100%;
}  
.body{
    line-height: 1;  
    text-align: center;
}

.widget-header {
background:#333333 url(images/bg-state-default.png) repeat-x scroll 50% 50%;;
border:1px solid #333333;
color:#FFFFFF;
font-weight:bold;
}

.state-default {
    background: #CC0000 url(images/button-state-default.png) repeat-x scroll 50% 50%;
    border:1px solid #333333;
    color:#FFFFFF;
    font-weight:bold;
    font-size: 1em;
    outline-color:-moz-use-text-color;
    outline-style:none;
    outline-width:medium;
}

.container  {

    border: 1px solid #999999;
    margin: 0 auto;
    width: 800px;
    height: 100%;
    background-color:#999999;
}

.header  {
    border: 1px solid #999999;
    height:10%;
    margin-top: 0;
    padding: 10px;
}

.nav{
    border: 1px solid #999999;
    height:10%;
    margin-top: 2%;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}

.nav-button {

    float: left;
    height: 100%;
    margin-left: 3px;
    overflow: hidden;
    width: 150px;
}

.content{
    border: 1px solid #999999;
    height:60%;
    margin-top: 4%;
    padding: 10px;
    background-color:#FFFFFF;
}

.footer{
    border: 1px solid #999999;
    height:10%;
    margin-top: 4%;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    background-color: #FFFFFF;
}

O que em última análise, estou tentando fazer é um projeto com largura fixa e altura com base em porcentagem, onde divs criança também estão posicionados para seus pais (Eu acredito que esta é a maneira correta de lidar com diferentes resoluções de tela) com base em porcentagem .

Eu vou ser muito grato se alguém pode me ajudar com isso.

Foi útil?

Solução 3

Embora eu aprecio o seu esforço, a resposta de meder foi útil, mas incompleta desde que eu quero ter um projeto com base em porcentagem. A resposta de Dave é mais como diretrizes. A melhor solução para o meu problema é algo semelhante a isto: http://matthewjamestaylor.com/blog/perfect-3-column.htm

Agora o meu problema é resolvido, obrigado por sua ajuda.

Outras dicas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
*{margin:0;padding:0;}
#wrapper { background:red; }
html,body{height:100%;}
#wrapper{min-height:100%;}
</style>
<!--[if IE 6]><style>
#wrapper { height:100%; }
</style><![endif]-->
</head>
<body>
<div id=wrapper>
  <p>Hello from JS Bin</p>

  <p id="hello"></p>
  </div>
</body>
</html>

Não está claro qual versão do Explorer, você está usando (para além de 6), mas min-height é lido como height por algumas versões ...

No entanto - este é o profissional (e mais fácil) maneira de construir HTML / CSS:

  1. validar seu HTML (importante, como inválido HTML pode confundir os navegadores de maneiras imprevisíveis!)

  2. fazê-lo funcionar e olhando como você como no FF;

  3. adicionar comentários condicionais para o IE6 e (se necessário) IE7 e 8.

Em IE 6 lembrar que estofamento etc. é não acrescentou para uma caixa, isso irá diminuir qualquer largura ou altura. Além disso, alguns elementos sem certas propriedades CSS, v.g. nenhuma largura ou altura (ou auto) específica, não gatilho 'haslayout' no IE .

Isso pode não ter resolvido o problema diretamente, mas espero que ajude pin as coisas!

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top