Estoy empezando a diseñar mi primera página siguiendo el método de diseño de estandares web (XHTML y CSS) partiendo de 0.
Después de algún que otro quebradero de cabeza, en Firefox el diseño queda perfecto.
Hay una imagen que se repite verticalmente por el menú izquierdo con una especie de barra, y otra imagen que se repite horizontalmente en la parte de abajo del todo.
Para unir esta barra, uso una imagen de "esquina" por decirlo de alguna forma, y la pongo tal cual, no como background.
Perooo, mientras que en Firefox, me la encaja correctamente, en IE me aparece la imagen que se repite verticalmente como 6 pixel más a la izquierda de donde debería estar, y debajo de la esquina, muestra como 3 o 4 pixels vacíos.
La verdad es que estoy bastante descolocado porque no se como solucionarlo.
Me gustaría poder subirlo a algún servidor, pero es que ahora mismo no tengo el ADSL disponible y estoy con una conexión de modem que lo máximo que pilla son 36 kbps...
Pongo el codigo por si os es útil. Está bastante mal, pero bueno, es la primera...
Página CSS
Código PHP:
/* elementos basicos */
body {
background-color: #92d0fb;
font-family: Verdana;
font-color: #000000;
margin: 0px;
padding: 0px;
}
img
{
border: 0;
}
a:link {
color: #044eaa;
text-decoration: none;
}
a:visited {
color: #044eaa;
text-decoration: none;
}
a:active {
color: #044eaa;
text-decoration: none;
}
a:hover {
color: #55A8E7;
text-decoration: none;
}
textarea {
background-color: #92d0fb;
font-family: Verdana;
font-size: 11px;
border: 1px;
border-style: solid;
border-color: #3487ef;
}
input {
background-color: #92d0fb;
font-family: Verdana;
font-size: 11px;
font-weight: bold;
border-color: #000000;
border: 1px;
border-style: solid;
border-color: #3487ef;
margin: 1px;
}
select {
background-color: #92d0fb;
font-family: Verdana;
font-size: 11px;
}
/* divs especificos*/
#bloqueLogo
{
background: #a0c8ed;
height: 100px;
margin: 0;
padding: 0;
text-align: left;
}
#contenido {
float: left;
width: 100%;
text-align: left;
background-color:#FFFFFF;
}
#bloqueIzquierda {
float: left;
width: 125px;
margin: 1px;
margin-top: 0;
background: none;
}
#bloqueDerecha {
float: right;
width: 99px;
margin: 1px;
margin-top: 0;
background-color:#FFFFFF;
}
#cuerpo {
float: left;
width: 70%;
/*margin-left: 20px;*/
margin-top: 0;
background-color: #FFFFFF;
}
#imagenPie {
float: left;
width: 100%;
height: 45px;
text-align: left;
background-color: #FFFFFF;
}
#menuIzquierda {
width: 89%;
background: none;
font-family: Verdana;
}
#copyright
{
background-color: #92d0fb;
float: left;
text-align: center;
font-family: Verdana;
font-size: 10px;
font-weight: bold;
color: #044eaa;
width: 100%;
height: 38px;
}
#cabeceraMenus {
border: 1px solid #3487ef;
padding: 1px;
background-color: #3487ef;
text-align: center;
vertical-align: middle;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
}
.menus {
border: 1px;
border-style: solid;
border-color: #3487ef;
border-top: 0;
padding: 1px;
font-size: 10px;
background-color: #ffffff;
layer-background-color: #ffffff;
}
#w {
background-color: #ffffff;
layer-background-color: #ffffff;
}
#x {
background-color: #92d0fb;
layer-background-color: #92d0fb;
}
#error
{
border: 1px solid #C00;
padding: 4px;
margin: 4px;
background-color: #FCC;
}
#error ul
{
list-style-type: square;
}
#barraNavegacion
{
background: #92d0fb;
border: 1px solid #3487ef;
margin: 5px;
padding: 0 5px 0 5px;
/* width: 531px; */
width: 100%;
font-family: Verdana;
font-size: 13px;
}
Página donde se muestra
Código HTML:
<!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"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link REL="stylesheet" TYPE="text/css" HREF="../../sistema/includes/estilo.css"> </head><body> <div id="bloqueLogo" style="background-image: url(../../diseno/imagenes/degcabecera.gif)"><a href=""><img src="../../diseno/imagenes/cabecera.jpg" alt="" style="vertical-align: top;" height="100" width="770" /></a></div> <div id="contenido" style="background-image:url(../../diseno/imagenes/barra.gif); background-repeat:repeat-y;"> <div id="bloqueIzquierda" > <div id="menuIzquierda"> <div id="cabeceraMenus">Cabecera 1</div> <div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'"> <a href="">Menu 1</a> </div> <div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'"> <a href="">Menu 2</a> </div> <div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'"> <a href="">Menu 3</a> </div> <div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'"> <a href="">Menu 4</a> </div> <br /> <div id="cabeceraMenus">Cabecera 2</div> <div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'"> <a href="">Menu 1</a> </div> <div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'"> <a href="">Menu 2</a> </div> <br /> <div id="cabeceraMenus">Cabecera 3</div> <div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'"> <a href="">Menu 1</a> </div> <div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'"> <a href="">Menu 2</a> </div> <div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'"> <a href="">Menu 3</a> </div> <div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'"> <a href="">Menu 4</a> </div> <div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'"> <a href="">Menu 5</a> </div> <div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'"> <a href="">Menu 6</a> </div> </div> </div> <div id="cuerpo"> <div id="barraNavegacion">Navegación</div> <p>Prueba, esto es una prueba</p> <p>fdsa</p> <p>fa</p> <p>dsf</p> <p>ads</p> <p>fa</p> <p>dsf</p> <p>asd</p> <p>f</p> <p>asd</p> <p>f</p> <p>sd</p> <p>f</p> <p>ds</p> <p>fa</p> <p>sf</p> <p>saf</p> <p>sad </p> </div> <div id="bloqueDerecha"> <div id="cabeceraMenus">Cabecera der</div> <div class="menus"> <center> <form method="post" name="frmLoginMenu" action="" onSubmit="return CheckLogin();" style="margin: 5px;"> eMail<br /> <input type="text" name="" id="" size="10" maxlength="15" /><br /> Password<br /> <input type="password" name="" id="" size="10" maxlength="15" /><br /> <input type="submit" name="enviar" value="Enviar" /> </form><br /> </center> </div> <br /> <div id="cabeceraMenus">Cabecera der 2</div> <div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'"> <a href="">Menu 1</a> </div> <div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'"> <a href="">Menu 2</a> </div> <div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'"> <a href="">Menu 3</a> </div> <div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'"> <a href="">Menu 4</a> </div> </div> </div> <div id="imagenPie" style="background-image:url(../../diseno/imagenes/abajo.gif);"> <img src="../../diseno/imagenes/esquina.gif" height="45" width="125" /> </div> <div id="copyright"><br />La pagina.com © 2004-<%=DatePart("yyyy" ,date)%> - Web realizada por </div> </body> </html>
Gracias de antemano
