Duda css, enlace se sale del DIV en FX y no en IE

Trapar · #1 (**permalink**) 06/12/2013, 20:49

Hola, soy nuevo con html y css. Estoy intentado realizar mi primera maquetación y por ahora tengo básicamente dos inconvenientes...

-Tengo una imágen como cabecera que enlaza hacia el index de la página, es decir tiene el link y la info en span oculta, etc. El tema es que en IE todo marcha bien, pero en Firefox y Chrome el enlace se sale del DIV de la cabecera (header) y aparece como un item más del próximo DIV (una lista, el menú) donde se puede ver el enlace al index. En la imágen que pongo en este post pueden verlo en la primer imágen como el recuadro celeste que está al lado de "Nosotros", el cual enlaza al index como también lo hace la cabecera. Mientras que en la segunda imágen se ve como en IE todo marcha bien y no aparece.

-Algo similar sucede con el menú. En IE se acomoda al DIV correspondiente, mientras que en los otros navegadores se sale del mismo, copando espacio de la cabecera.

-Otra duda, ¿cómo puedo eliminar los espacios que hay entre los distintos items de las listas? Es decir, en la imágen, eliminarlos de tal manera que no se vea el fondo verde entre ellos.

Muchas gracias!, les dejo la imágen de la zona de conflicto y el código HTML y CSS.

HTML

Código HTML:

<body>
	<div id="container">
		<div id="header">
			<h1> <a href="index.html" title="MARCA"> <span> MARCA - SLOGAN</span> </h1>
		</div>
		<div id="menu">
			<ul>
				<li><a href="nosotros/nosotros.html" title="bla bla bla">Nosotros</a></li>
				<li><a href="servicios/servicios.html" title="bla bla bla">Servicios</a></li>
				<li><a href="trabajos/clientes.html" title="bla bla bla">Clientes</a></li>
				<li><a href="contacto/contacto.html" title="bla bla bla">Contacto</a></li>
			</ul>
		</div>
		<div id="main">
			<p>Contenido principal. bla bla bla bla bla bla bla bla.</p>
		</div>
		<div id="footer">
			<p> calle Esquina 5 <br> 4g99-1051<br> Copypaightr. </p>
		</div>
	</div>
</body>
</html>

CSS

Código HTML:

* { margin: 0; padding: 0;}

body {background-image: url(backhead.jpg); background-position: top; background-repeat: repeat-x; background-color: #90b6fc; color: #666; font-family: Arial, Tahoma, Verdana; text-align: center; height: 100%;} 

#container {width: 960px; height: 100%; margin: 0px auto; text-align: left; background: #000000;} 

#header {width: 960px; height: 150px; float: left; background: url(header.jpg);}
#header a {width: 960px; height: 150px; display: block; text-decoration: none;}
#header a span {visibility: hidden;}

#menu {width: 960px; height: 20px; float: left; background: #00FF00;}
#menu li {display: inline;}
#menu li a {padding: 10px; font-size: h3; background-color: #2175bc;}
#menu li a:hover {background-color: #2586d7; margin-bottom: -1px; padding-bottom: 12px;}

#main {width: 960px; min-height: 500px; float: left; background: #0000FF;}

#footer {width: 960px; min-height: 50px; float: left; background: #536783;}

.img {border: none;}

a:link, a:visited {text-decoration:none; color: #141484;}
a:hover {text-decoratio:none; color: #1E82C8;}
a:active {text-decoratio:none; color: #C11111;}

alzacon · #2 (**permalink**) 08/12/2013, 06:27

Los dos primeros problemas vienen de como interpretan el html y css los navegadores. Normalmente es el IE quién lo hace mal.
- Tienes una etiqueta a sin cerrar, el IE te la cierra por que si y los otros navegadores te la cierran y colocan el enlace donde apararece el cierre.
- Diferencias al aplicar padding.

Prueba con margin para juntarlos

Trapar · #3 (**permalink**) 10/12/2013, 22:06

Muchas gracias! ya pude solucionar todos esas cosas con tu ayuda!

Ahora tengo otra duda, más elemental aún... he logrado dentro de todo darle formato a la web utilizando width: 960 px... No convendría hacerla con width: 100%, 50%, etc?
He intentando cambiarla toda usando % y siempre que tuve algun problema para acomodar un div, logré resolverlo usando "margin left: 25%" (que es el espacio que dejo desde el margen para que inicie el div central donde va el contenido)

Cual de los dos maneras es más conveniente?

*Tengo un pequeño problemilla con un div... sin padding izq o derecho se comporta bien, pero al agregarle algo de padding (para evitar que el texto quede pegado a los bordes), no le interesa que el max-width sea de 50% o de lo que sea, sino que lo viola para ensancharse, mientras que yo busco generar algo de padding left y right para que el texto se acomode para respetarlos y no el div.. ¿cómo podría hacer?

Gracias!

alzacon · #4 (**permalink**) 11/12/2013, 12:45

No entiendo lo del los px a %. Si te refieres a pasar a 100% todas las medidas que sean iguales a las del elemento padre o a otra cosa. Preguntate ¿por qué motivo convendría?

Pon el código implicado en el problema.

Trapar · #5 (**permalink**) 11/12/2013, 22:29

Hola, gracias por responder. El código HTML sigue siendo el mismo, el css es el siguiente:

Código HTML:

* {margin: 0; padding: 0;}

body {background-image: url(backhead.jpg); background-position: top; background-repeat: repeat-x; background-color: #90b6fc; color: #666; font-family: Arial, Tahoma, Verdana; text-align: center; height: 100%;} 

#container {width: 100%; height: 100%; margin: 0px auto; text-align: left; background: #000000;}

#header {width: 100%; height: 150px; float: left; margin-left: 25%; background: url(blulogo.png); background-repeat: no-repeat;}
#header a {width: 100%; height: 150px; display: block; text-decoration: none;}
#header a span {visibility: hidden;}

#menu {width: 100%; height: 25px; float: left; list-style: none;  text-align: center; font-size: 20px; background-color: #93cbe8; border-top: 5px solid #90b6fc;}
#menu li {display: inline; margin: 0px;}
#menu li a {padding: 2px 12px; font-size: h3;}
#menu li a:hover {color: #b6edf7; background-color: #4466fb}

#main {width: 50%; min-height: 500px; float: left; margin-left: 25%; background: #f4faff; padding: 5px 5px 5px 5px; border-top: 5px solid #90b6fc; text-align: justify;}

#footer {width: 50%; float: left; margin-left: 25%; padding: 10px 0; background: #5d7391; color: #dadada; border-top: 10px solid #90b6fc; text-align: center;}

.img {border: none;} /*Bordes de las img*/

a:link, a:visited {text-decoration:none; color: #141484;}
a:hover {text-decoration:none; color: #1E82C8;}
a:active {text-decoration:none; color: #C11111;}

En cuanto a lo que sucede... el id "main" no queda como debe sino un poco más hacia fuera, aquí dejo una imágen donde en el recuadro rojo se ve el error:

Gracias!

pzin · #6 (**permalink**) 12/12/2013, 01:38

Eso es así por el modelo de caja de CSS.

Básicamente lo que hace es que el ancho sea igual al ancho más el relleno (padding) y otras cosas, que verás en el artículo.

Soluciones hay muchas. Yo lo que suelo hacer es cambiar el modelo de caja para que esas cosas se añadan de forma interna y no se sumen al ancho del elemento con:

Código CSS:

Ver original* {
  box-sizing: border-box;
}

Trapar · #7 (**permalink**) 13/12/2013, 18:34

Muchas gracias! no conocía esa propiedad, me es muy útil.
Tuve que poner otras dos cosas para que me funcionara:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Gracias, saludos

pzin · #8 (**permalink**) 13/12/2013, 20:51

Cita:

Iniciado por Trapar

Muchas gracias! no conocía esa propiedad, me es muy útil.
Tuve que poner otras dos cosas para que me funcionara:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Gracias, saludos

Si, aunque realmente el de -webkit no te hace falta ya que hace tiempo que funciona sin eso. De hecho sólo Firefox es al único que le hace falta, hasta IE lo soporta.

http://caniuse.com/css3-boxsizing