Hola estaba haciendo una plantilla para mi sitio y estoy muy acostumbrado a usar firefox pero por las dudas probe en internet explorer como se veia y dios mio se ve espantoso. La probe en IE 6.0 y Firefox 2.0, si alguien la quiere mirar para decirme como puedo lograr algo decente y que se pueda ver en ambos navegadores, y si no tambien pueden cambiar los colores o los que les parezca que esta mal para poder mejorar, solo recuerden que la pagina es para un sitio informal y alegre. :P
Plantilla.htm
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="Estilo.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contenedor">
<div id="dintel"></div>
<div id="menu">
<ul>
<li><a href="#">Seccion 1</a></li>
<li><a href="#">Seccion 2</a></li>
<li><a href="#">Seccion 3</a></li>
<li><a href="#">Seccion 4</a></li>
</ul>
</div>
<div id="contenido">Este texto es contenido
<a href="#" title="Enlace">Enlace</a>
<input class="boton" name="boton" type="button" value="Boton">
<input class="textbox" name="textbox" type="text">
<textarea class="textarea" name="textarea" cols="40" rows="10"></textarea>
<h1>Esta es una cabecera</h1>
<h2>Esta es una cabecera</h2>
<h3>Esta es una cabecera</h3>
</div>
</div>
</body>
</html>
Estilo.css
Código:
/* CSS Document */
body{
background-color: #ECE9F7;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
}
a:visited{
color:#0000FF;
}
h1,h2,h3{
color: #4F4F4F;
}
#contenedor{
height: 100%;
font-family: "Lucida Sans";
margin-left: auto;
margin-right: auto;
width: 900px;
text-align: left;
}
#menu{
background-color: #FFDB91;
text-align: left;
width: 20%;
float: left;
}
#menu ul{
list-style-type: none;
padding: 0% 0% 20% 0%;
text-align: center;
}
#menu li:hover{
border-style: outset;
border-width: thin;
border-color: White;
}
#menu a{
text-decoration: none;
color: #CD853F;
font-weight: bold;
line-height: 30px;
}
#contenido{
width: 80%;
height: 100%;
text-align: center;
background-color:#FFFFFF;
font-size: 12px;
margin-left: 20%;
}
#dintel{
height:50px;
background-color:#FFCC66;
padding-bottom:10%;
}
.boton{
background-color:#FFCC66;
border-style:ridge;
border-color:#CC9900;
}
.boton:hover{
cursor:pointer;
}
.textbox{
border-style:ridge;
border-color:#FFFFFF;
}
.textbox:hover{
background-color:#EEEEEE;
}
.textarea{
border-style:ridge;
border-color:#FFFFFF;
}
.textarea:hover{
background-color:#EEEEEE;
}