aiuto necessario con doctype

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

  •  19-09-2019
  •  | 
  •  

Domanda

Ho problemi con il design di un sito di prova. Quando sto aprendo la mia pagina html con IE, senza la mia linea doctype, rende solo il modo che mi piace, ma non in FF (a causa del modo in cui interpreta imbottitura, tra le altre cose). Quando aggiungo la linea doctype, la pagina viene spremuto fino ad un'altezza di circa 230px. La mia intenzione è quella di impostare l'altezza per l'altezza massima della pagina. Qui sono i miei file:

* * 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;
}

Quello che sto in ultima analisi, cercando di fare è un disegno con larghezza fissa e altezza percentuale basata, dove div bambino sono anche basate su percentuale posizionata per i loro genitori (credo che questo sia il modo corretto di affrontare diverse risoluzioni dello schermo) .

Sarò molto grato se qualcuno mi può aiutare con questo.

È stato utile?

Soluzione 3

Anche se apprezzo il suo sforzo, la risposta di Meder è stato utile, ma incompleto perché voglio avere un design su base percentuale. La risposta di Dave è più come linee guida. La soluzione migliore per il mio problema è qualcosa di simile a questo: http://matthewjamestaylor.com/blog/perfect-3-column.htm

Ora il mio problema è risolto, grazie per il vostro aiuto.

Altri suggerimenti

<!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>

Non è chiaro quale versione di Explorer si sta utilizzando (a parte 6), ma min-height viene letta come height da alcune versioni ...

Tuttavia - questo è il modo professionale (e più semplice) per costruire HTML / CSS:

  1. validare il codice HTML (importante, come HTML non valido può confondere i browser in modo imprevedibile!)

  2. farlo funzionare e guardando come ti piace in FF;

  3. aggiungere commenti condizionali per IE6 e (se necessario) IE7 e 8.

In IE 6 ricordare che padding ecc non ha aggiunto per una scatola, in modo diminuirà qualsiasi larghezza o altezza. Inoltre, alcuni elementi senza alcune proprietà CSS, ad esempio nessun larghezza o l'altezza (o auto) specifica, non 'hasLayout' in IE .

che non possono avere risolto il problema direttamente, ma spero che aiuta le cose pin giù!

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top