ayuda necesaria con el tipo de documento

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

  •  19-09-2019
  •  | 
  •  

Pregunta

Tengo problemas con el diseño de un sitio de prueba. Cuando estoy abriendo mi página HTML con el IE, sin mi línea de tipo de documento, que hace que a mí me gusta, pero no en FF (debido a la forma en que se interpreta el relleno, entre otras cosas). Al agregar la línea de tipo de documento, la página se comprime a una altura de alrededor de 230px. Mi intención es fijar la altura a la altura máxima de la página. Aquí están mis archivos:

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

Lo que estoy tratando de hacer en última instancia, es un diseño con ancho fijo y altura a base de porcentaje, donde divs niño son también basado en un porcentaje posicionado a sus padres (Creo que esta es la forma correcta de tratar con diferentes resoluciones de pantalla) .

Yo estaré muy agradecido si alguien me puede ayudar con esto.

¿Fue útil?

Solución 3

Aunque aprecio su esfuerzo, la respuesta de meder era útil, pero incompleta ya que quiero tener un diseño basado en un porcentaje. La respuesta de Dave es más como directrices. La mejor solución para mi problema es algo similar a esto: http://matthewjamestaylor.com/blog/perfect-3-column.htm

Ahora mi problema es resuelto, gracias por su ayuda.

Otros consejos

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

No está claro cuál es la versión del explorador que está utilizando (aparte de 6), pero min-height se lee como height por algunas versiones ...

Sin embargo - esta es la manera profesional (y más fácil) para la construcción de HTML / CSS:

  1. validar el código HTML (HTML importante, como no válido puede confundir a los navegadores de forma impredecible!)

  2. conseguir que funcione y mirando cómo te gusta en FF;

  3. añadir comentarios condicionales para IE6 y (si es necesario) IE7 y 8.

En IE 6 recordar que el acolchado etc. es no añadieron a una caja, por lo que disminuirá cualquier anchura o altura. Además, algunos elementos sin ciertas propiedades CSS, por ejemplo, no anchura o altura (o auto) específico, no 'hasLayout' en IE .

Esto puede no han resuelto el problema directamente, pero espero que ayuda a precisar las cosas!

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top