promelas con css, en firefox se ve vien y en Ie mal

susaninhax · #1 (**permalink**) 02/11/2007, 06:13

Hola compañeros, no se exactamente donde tengo que preguntar esto, pero necesito ayuda, estoy creando una web con capas y estilos, y el firefox y en el opera se ve genial, peeeeero en Ie 6 todas las imágenes no se pueden ver, la de los fondos de la cabecera, la del menú etc...

Alguien podría hecharme una mano?? alguien me podría decir que es lo que estoy haciendo mal para que el explorer no me muestre las imagenes de fondo??? os adjunto el código.

página:

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" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<link href="css/generales.css" rel="stylesheet" type="text/css" />
<link href="css/menu_desplegable.css" rel="stylesheet" type="text/css" />
<link href="css/titulares.css" rel="stylesheet" type="text/css" />
<link href="css/bordes_esquinas.css" rel="stylesheet" type="text/css" />
<link href="css/cabecera.css" rel="stylesheet" type="text/css" />

<SCRIPT type="text/javascript">var tWorkPath="tree-menu/";</script>

<script type="text/javascript" language="JavaScript1.2" src="tree-menu/dtree.js"></script>

</head>

<body>
<!-- Comienza la web -->
<div id="general">
	<!-- Dividimos la web en 3 columnas -->
	<div id="col_izq"></div>
	<div id="col_central">
		<!-- Cabecera -->
		<div id="cabecera">
				<!-- División de la cabecera -->
				<div id="cab_sup">
					<!-- Inicio pestañas menú  -->
					<div id="menu_inicio_selected">
							<!-- pestañas menú enlaces-->
							<div id="pestana_inicio"><a href="#" target="_self">Inicio</a></div>
							<div id="pestana_documentacion"><a href="#" target="_self">Documentación</a></div>
							<div id="pestana_quienes_somos"><a href="#" target="_self">Quienes Somos</a></div>
							<div id="pestana_contacte"><a href="#" target="_self">Contacte</a></div>
							<div id="pestana_mapaweb"><a href="#" target="_self">Mapa Web</a></div>
							<!-- Fin pestañas menú enlaces-->
					</div>
					<!-- Fin pestañas menú -->
				</div>
				<div id="cab_inf">
					<!-- Inicio barra menú inferior -->
					<div id="barra_inicio_selected"> 
					  <div id="buscador_cabecera">Buscar <input name="busqueda" type="text" size="30" height="15px"  align="absmiddle"/> <img src="imagenes/formularios/lupa_busqueda.jpg" alt="Realizar B&uacute;squeda" width="37" height="33" align="absmiddle" /> </div>
					</div>
					<!-- Fin barra menú inferior -->
				</div>
				<!-- Fin división cabecera -->
		</div>
		<!-- Fin  cabecera Inicio Contenedor -->
		<div id="contenedor">
				
				<div id="menu_desplegable">
				<!-- Inicio menu tree -->
					......(nada).....
				<!-- Fin menu tree -->
				</div>
				<div id="barra_separadora"></div>
				<div id="contenido">
						
						<!-- Comienza el contenido de los formularios y resto documentación -->
						

						<div id="contenido_formulario">
						<div id="titulo_incidencias"> &nbsp;</div>
												
						<div id="top" class="top">
<img src="imagenes/formularios/esq_sup_izq_form.jpg" alt="Esquina superior izquierda" width="26" height="22" class="esquina_sup_izq" />
<img src="imagenes/formularios/esq_sup_derch_form.jpg" alt="Esquina superior derecha" width="33" height="22" class="esquina_sup_der" /></div>
						<div id="content" class="content">
<div id="box_control" class="boxcontrol">
...
</div>
</div>
						<div id="bottom" class="bottom">
<img src="imagenes/formularios/esq_inf_izq_form.jpg" alt="Esquina inferior izquierda" width="26" height="33" class="esquina_inf_izq" />
<img src="imagenes/formularios/esq_inf_derch_form.jpg" alt="Esquina inferior iderecha" width="33" height="33" class="esquina_inf_der" /></div>
						
						</div>
						<!-- Fin de contenido de los formularios y resto documentación -->
				
				</div>
		</div>
		<!-- Fin Contendor. -->
	</div>
	<div id="col_derc"></div>
	<!-- Cierre de la division de las 3 columnas -->
</div>
<!-- fin de la web -->
</body>
</html>

Estilos:

Código HTML:

#cab_sup {
	float: none;
	height: 30px;
	width: 840px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	margin-top: auto;
	padding-top: 49px;
}
#menu_inicio_selected {
	background-image: url(../imagenes/cabecera/inicio_selected.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	float: right;
	height: 30px;
	width: 653px;
	text-align: right;
	clip: rect(auto,auto,auto,auto);
}
#pestana_inicio {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #00026E;
	text-align: center;
	float: left;
	height: 15px;
	width: 116px;
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}
#pestana_documentacion {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #00086E;
	text-align: center;
	float: left;
	height: 15px;
	width: 150px;
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}
#pestana_quienes_somos {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #00086E;
	text-align: center;
	float: left;
	height: 15px;
	width: 151px;
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}
#pestana_contacte {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #00086E;
	text-align: center;
	float: left;
	height: 15px;
	width: 115px;
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}
#pestana_mapaweb {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #00086E;
	text-align: center;
	float: left;
	height: 15px;
	width: 115px;
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}



#barra_inicio_selected {
	background-image: url(../imagenes/cabecera/barra_inicio_selected.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	float: right;
	height: 41px;
	width: 653px;
	text-align: right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000066;
}
#buscador_cabecera {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000066;
	float: right;
	height: 15px;
	width: 300px;
	margin-top: 7px;
}


#cab_inf {
	margin: auto;
	float: none;
	height: 41px;
	width: 840px;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a:link {
	color: #00086E;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #00086E;
}
a:hover {
	text-decoration: none;
	color: #999900;
}
a:active {
	text-decoration: none;
	color: #999900;
}
#general {
	float: none;
	height: 100%;
	width: 100%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	text-align: center;
}
#general #col_central {
	float: left;
	height: 150px;
	width: 94%;
	background-image: url(../imagenes/cabecera/fondo_derc.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	background-color: #FFFFFF;
}
#general #col_izq {
	float: left;
	height: 150px;
	width: 3%;
	background-image: url(../imagenes/cabecera/fondo_izq.jpg);
	background-repeat: repeat-x;
	background-position: top;
}
#general #col_derc {
	float: left;
	height: 150px;
	width: 3%;
	background-image: url(../imagenes/cabecera/fondo_derc.jpg);
	background-repeat: repeat-x;
	background-position: top;
}
#general #col_central #cabecera {
	margin: auto;
	float: none;
	height: 122px;
	width: 100%;
	vertical-align: bottom;
	background-image: url(../imagenes/cabecera/fondo_cabec_logo.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}
#general #col_central #contenedor {
	margin: auto;
	float: none;
	height: auto;
	width: 100%;
}
input {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #333333;
	background-image: url(../imagenes/formularios/sombra_input.jpg);
	background-position: left top;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
}
#contenido_formulario {
	margin: auto;
	float: left;
	height: auto;
	width: auto;
}
#formulario_inferior {
	background-image: url(../imagenes/formularios/fondo_inf_rep_form.jpg);
	background-repeat: repeat-x;
	background-position: center top;
	float: left;
	height: 33px;
	width: 100%;
}

#menu_desplegable {
	margin: auto;
	float: left;
	height: 400px;
	width: 22%;
}
#barra_separadora {
	background-image: url(../imagenes/fondos_generales/barra_separadora.jpg);
	background-repeat: repeat-y;
	background-position: center center;
	margin: auto;
	float: left;
	height: 400px;
	width: 5%;
}
#contenido {
	float: left;
	height: 400px;
	width: 73%;
	margin: auto;
}

Muchas gracias de antemano a todos!!

susaninhax · #2 (**permalink**) 02/11/2007, 07:08

DISCULPAR enormemente la falta de ortografía, ha sido un despiste del teclaro, pero es garrafal, hay que procurar escribir bien y corregir lo que uno escribe para luego no meter la pata como la he metido yo.

Por otro lado, alguien le ha sucedido lo mismo que en otros navegadores vea las imágenes y en el Ie no? sigo sin poder ver las imágenes de los fonde de cabecera y de página.

Disculpar las molestias. Muchas gracias de antemano.