CSS - CSS con 2 divs horizontales visualiza mal con Firefox

   
Vista:

CSS con 2 divs horizontales visualiza mal con Firefox

Publicado por Frijuan (3 intervenciones) el 29/01/2013 22:17:57
Hola,

Resulta que estoy empezando con esto de la maquetacion con divs (hasta ahora lo habia hecho con tablas) y estoy hecho un lio con 2 divs horizontales que me estan dando problemas en Firefox y no logro solucionarlo.

Os explico, tengo un html con 1 div de cabecera que contiene un titulo. Debajo tengo 1 div de menu con una botonera (cada boton es 1 imagen) y a continuacion 1 div de contenido que incluye otros 2 divs (izquierda y derecha) en el que va una imagen y una serie de datos. Aqui es donde creo que tengo el problema.

La cuestión es que en Firefox el DIV de contenido me visualiza una linea superior de 1px que no deberia estar y que en Explorer no se me visualiza. Supongo que ese div se me extiende 1px por alguna razon pero por mas que he mirado no logro saber porque me sale. Me gustaria resolverlo ya que Firefox interpreta el CSS tal y como debe ser.

¿Alguien me puede echar un cable y darme una solucion de como puedo quitar esa zona de 1px que no deberia estar? Porque me esta dando verdadero dolor de cabeza y sino no puedo avanzar con mi diseño.

A continuacion os pongo el CSS y el HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<html>
	<head>
		<title></title>
		<style type="text/css">
			<!--
				* {
					margin: 0;
				  	padding: 0;
				}

				#contenedor {
					width: 600;
					height: 550;
				}

				#cabecera {
					height: 42;
					background-color:#007a87;	
					border-style: none;
					padding: 0px 0px 0px 0px;					
				}

				#cabecera_titulo {
					font-family: Arial, Helvetica, sans-serif;
					font-size: 14px;
					color: #FFFFFF;
					font-weight: bold;
					text-align: justify;	
					padding: 5px 5px 5px 5px;					
				}
				
				#menu { 
					height: 35;
					background-color:#f555aa;		
					border-style: none;
				}

				#botonera { 
					padding: 4px 4px 4px 4px;	
				}

				#botonera ul{
				 	list-style: none; 
				}
					
				#botonera ul li { 
					margin: 0px 4px 0px 0px;	
					float: left; 						
				}

				#contenido { 
					width: 600;
					height: 308;
					background-color:#000000;	
				}

				#contenido_foto { 
					width: 258;
					height: 308;	
					background-color:#fcc3ef;	
					clear: left;
					float: left;	
				}

				#contenido_info { 
					width: 342;
					height: 308;		
					background-color:#fccc1a;	
					float:right;	
				}
			-->
		</style>
	</head>
	<body>
		<div id="contenedor">
			<div id="cabecera">
				<div id="cabecera_titulo">
				</div>
			</div>
			<div id="menu">
				<div id="botonera">
					<ul>
						<li><a href="#"><img src="boton_1.jpg" width="29" height="27" border="none"></img></a></li>
						<li><a href="#"><img src="boton_2.jpg" width="29" height="27" border="none"></img></a></li>
						<li><a href="#"><img src="boton_3.jpg" width="29" height="27" border="none"></img></a></li>
						<li><a href="#"><img src="boton_4.jpg" width="29" height="27" border="none"></img></a></li>
						<li><a href="#"><img src="boton_5.jpg" width="29" height="27" border="none"></img></a></li>
					</ul>
				</div>
			</div>
			<div id="contenido">
				<div id="contenido_foto"></div>
				<div id="contenido_info"></div>
			</div>
		</div>
	</body>
</html>





Gracias por anticipado
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

CSS con 2 divs horizontales visualiza mal con Firefox

Publicado por Frijuan (3 intervenciones) el 30/01/2013 00:42:09
Hola de nuevo,

revisando de nuevo el codigo, creo que el problema lo tengo con los divs del menu y de la botonera que se me expanden algun pixel mas del normal , pero no logro saber porque, ¿alguna ayuda o solucion a mi problema? :-)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

CSS con 2 divs horizontales visualiza mal con Firefox

Publicado por xve (352 intervenciones) el 30/01/2013 07:59:06
Hola Frijuan, es exactamente lo que dices...

El problema lo tienes en el li... si por ejemplo, a las imágenes le poner un height=26 ya no se te vera esa linea...

Lo que no he conseguido ver, es porque el ul li ocupa tanto.

Yo lo he solucionado añadiendo un pixel (height:36px;) a la altura en la clase #menu

Te vas a encontrar con varios problemas de este tipo con los navegadores
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

CSS con 2 divs horizontales visualiza mal con Firefox

Publicado por Frijuan (3 intervenciones) el 31/01/2013 14:40:48
gracias xve.
Ya lo he solucionado, no se como, pero ya no me da ese problema.

Ahora tengo otro problemilla con los divs de contenido que me descuadran al ponerle padding y no se tampoco porque (y eso que tengo en cuenta la suma del borde, padding, etc, ......)

Bufffff! pensaba que eso de las capas era mas facil, me esta dando un verdadero dolor de cabeza cuadrar las cosas en su sitio, cuando antes mediante tablas lo hacia en un momento.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

CSS con 2 divs horizontales visualiza mal con Firefox

Publicado por xve (352 intervenciones) el 31/01/2013 20:48:05
La verdad Frijuan, es que con las tablas no se tardaba tanto y todo parece mas sencillo...;)

Bien, tienes que tener en cuenta, que los margenes, unos navegadores los cuentan y otros no a lo hora de utilizar los paddings...

Yo, para no tener este tipo de problemas, siempre intento utilizar este estilo como inicial:
http://www.lawebdelprogramador.com/codigo/CSS/2253-CSS_Tools:_Reset_CSS.html

De esta manera, todos los margenes son los mismos para todos los navegadores.... espero que te sirva.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar