Con el IE el menu se me demonta todo, antes de estar en una linia se me pone con dos, tres depende la resolucion, cuando pongo 800x600 en chrome y firefox se me baja un boton a la linia de abajo, como puedo solucionar estos problemas? Lo de 800x600 bueno no es tan importante, pero lo del menu con IE si, me tiene que aparecer en una linia. Espero vuestras repuestas.
Código PHP:
html { height: 100%; }
body {
background-color: #91aefe;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 15px;
margin: 0%;
}
#contenedor{
text-align:left; /* Esto te sirve para IE*/
width: 780px 1000px; /* Aqui pones la resoluciones que quieres trabajar, es decir si deseas hacerlo global, deberias dejarlo en mil o al menos 960, si deseas que tabien se vean en 800x600 deberias ponerle entonces 780 o 760, eso es a tu criterio*/
margin: 0px auto; /* esto es muy importante, deberias agregarle el 0 antes del auto para que IE6 lo tome sino no sabe que hacer y a veces falla, pero en general lo uso solamente asi, esto indica que 0 para IE debe ser el margen general, y que auto le diga a los navegadores nuevos sobretodo FF que hay un margen automatico pero absoluto, deberias de poner un reset o bien ponerle margin;0; a la etiqueta body */
}
/* Cabecera */
#head {
margin:0%;
margin-top:0%;
background-image: url("../files/head.jpg");
background-position: left;
background-repeat: no-repeat;
height: 140px;
width: 100%;
}
#head p {
text-align: center;
color: #fff;
font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: oblique;
padding-top: 40px;
padding-left: 400px;
margin-top: 0%;
position:relative;
}
/* Menu*/
#menu {
width: 100%;
padding: 0%;
float:left;
padding:0%;
height:auto;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
background-image: url("../files/menu.jpg");
background-repeat: no-repeat;
height: 40px;
padding-top: 0%;
position: relative;
}
#menu ul, li { list-style-type: none;
}
#menu ul
{ width:auto;
margin:auto;
}
#menu li {
display: inline;
position:relative;
}
/* separacio entre boto
#menu li+li a {
border-left: 1px solid #FFF;
}
*/
#menu a {
color: #fff;
text-decoration: none;
text-align: left;
width: 0%;
margin-left: 130px;
margin-right: 0%;
float: left;
padding: 7px;
padding-right: 0%;
display: block;
outline:none;
cursor:pointer;
position: relative;
}
#menu a:hover { /* background: #FFFFFF; fondo cuadro*/
color:#000000;
}
/*Contenido*/
#contenido { border: 3px solid #FF0000;
width: 65%;
height: 65%;
margin-top:40px;
margin-left: 180px;
margin-bottom: 20px;
float: left;
position: relative;
}
#titulo{
width: 100%;
height: auto;
}
#titulo h1 {
color: #660000;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}
#content{
width: 100%;
height: auto;
padding-top: 0px;
}
#content p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
/*Pie*/
#pie {
width: 100%;
background-image: url("../files/pie.jpg");
background-repeat: no-repeat;
height: 80px;
margin-top: 0%;
clear: both;
padding: 1px;
position: relative;
padding-bottom: 0%
}
#pie p {
text-align: center;
color: #fff;
font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
margin-bottom: 0%;
position: relative;
}