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:
Gracias por anticipado
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
0
