Foros del Web » Creando para Internet » CSS »

Problema para ajustar imagenes en IE, en Firefox todo OK

Estas en el tema de Problema para ajustar imagenes en IE, en Firefox todo OK en el foro de CSS en Foros del Web. Hola a todos, Estoy empezando a diseñar mi primera página siguiendo el método de diseño de estandares web (XHTML y CSS) partiendo de 0. Después ...
  #1 (permalink)  
Antiguo 12/08/2008, 20:28
 
Fecha de Ingreso: agosto-2002
Mensajes: 74
Antigüedad: 15 años, 3 meses
Puntos: 1
Problema para ajustar imagenes en IE, en Firefox todo OK

Hola a todos,

Estoy empezando a diseñar mi primera página siguiendo el método de diseño de estandares web (XHTML y CSS) partiendo de 0.

Después de algún que otro quebradero de cabeza, en Firefox el diseño queda perfecto.

Hay una imagen que se repite verticalmente por el menú izquierdo con una especie de barra, y otra imagen que se repite horizontalmente en la parte de abajo del todo.

Para unir esta barra, uso una imagen de "esquina" por decirlo de alguna forma, y la pongo tal cual, no como background.
Perooo, mientras que en Firefox, me la encaja correctamente, en IE me aparece la imagen que se repite verticalmente como 6 pixel más a la izquierda de donde debería estar, y debajo de la esquina, muestra como 3 o 4 pixels vacíos.

La verdad es que estoy bastante descolocado porque no se como solucionarlo.
Me gustaría poder subirlo a algún servidor, pero es que ahora mismo no tengo el ADSL disponible y estoy con una conexión de modem que lo máximo que pilla son 36 kbps...


Pongo el codigo por si os es útil. Está bastante mal, pero bueno, es la primera...

Página CSS
Código PHP:
/* elementos basicos */
body {
background-color#92d0fb;
font-familyVerdana;
font-color#000000;
margin0px;
padding0px;
}

img
{
    
border0;
}

a:link {
    
color#044eaa;
    
text-decorationnone;
}

a:visited {
    
color#044eaa;
    
text-decorationnone;
}

a:active {
    
color#044eaa;
    
text-decorationnone;
}

a:hover {
    
color#55A8E7;
    
text-decorationnone;
}

textarea {
    
background-color#92d0fb;
    
font-familyVerdana;
    
font-size11px;
    
border1px;
    
border-stylesolid;
    
border-color#3487ef; 
}

input {
    
background-color#92d0fb;
    
font-familyVerdana
    
font-size11px
    
font-weightbold;
    
border-color#000000;
    
border1px;
    
border-stylesolid;
    
border-color#3487ef;
    
margin1px;
}

select {
    
background-color#92d0fb; 
    
font-familyVerdana;
    
font-size11px;
}


/* divs especificos*/
#bloqueLogo
{
    
background#a0c8ed;
    
height100px;
    
margin0;
    
padding0;
    
text-alignleft;
}

#contenido {
    
floatleft;
    
width100%;
    
text-alignleft;
    
background-color:#FFFFFF;
}

#bloqueIzquierda {
    
floatleft;
    
width125px;
    
margin1px;
    
margin-top0;
    
backgroundnone;
}

#bloqueDerecha {
    
floatright;
    
width99px;
    
margin1px;
    
margin-top0;
    
background-color:#FFFFFF;
}

#cuerpo {
    
floatleft;
    
width70%;
    
/*margin-left: 20px;*/
    
margin-top0;
    
background-color#FFFFFF;
}

#imagenPie {
    
floatleft;
    
width100%;
    
height45px;
    
text-alignleft;
    
background-color#FFFFFF;
}

#menuIzquierda {
    
width89%;
    
backgroundnone;
    
font-familyVerdana;
}

#copyright
{
    
background-color#92d0fb;
    
floatleft;
    
text-aligncenter;
    
font-familyVerdana;
    
font-size10px;
    
font-weightbold;
    
color#044eaa;
    
width100%;
    
height38px;
}

#cabeceraMenus {
    
border1px solid #3487ef;
    
padding1px;
    
background-color#3487ef;
    
text-aligncenter;
    
vertical-alignmiddle;
    
font-size13px;
    
font-weightbold;
    
color#FFFFFF;
}

.
menus {
    
border1px;
    
border-stylesolid;
    
border-color#3487ef;
    
border-top0;
     
padding1px;
    
font-size10px;
    
background-color#ffffff;
    
layer-background-color#ffffff;
}

#w {
    
background-color#ffffff;
    
layer-background-color#ffffff;
}

#x {
    
background-color#92d0fb;
    
layer-background-color#92d0fb;
}

#error
{
    
border1px solid #C00;
    
padding4px;
    
margin4px;
    
background-color#FCC;
}

#error ul
{
    list-
style-typesquare;
}

#barraNavegacion
{
    
background#92d0fb;
    
border1px solid #3487ef;
    
margin5px;
    
padding0 5px 0 5px;
    
/* width: 531px; */
    
width100%;
    
font-familyVerdana;
    
font-size13px;


Página donde se muestra
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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link REL="stylesheet" TYPE="text/css" HREF="../../sistema/includes/estilo.css">
</head><body>
<div id="bloqueLogo" style="background-image: url(../../diseno/imagenes/degcabecera.gif)"><a href=""><img src="../../diseno/imagenes/cabecera.jpg" alt="" style="vertical-align: top;" height="100" width="770" /></a></div>
<div id="contenido" style="background-image:url(../../diseno/imagenes/barra.gif); background-repeat:repeat-y;">
	<div id="bloqueIzquierda" >
		<div id="menuIzquierda">
			<div id="cabeceraMenus">Cabecera 1</div>
			<div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'">
				<a href="">Menu 1</a> </div>
			<div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'">
				<a href="">Menu 2</a> </div>
			<div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'">
				<a href="">Menu 3</a> </div>
			<div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'">
				<a href="">Menu 4</a> </div>
			<br />
			<div id="cabeceraMenus">Cabecera 2</div>
			<div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'">
				<a href="">Menu 1</a> </div>
			<div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'">
				<a href="">Menu 2</a> </div>
			<br />
			<div id="cabeceraMenus">Cabecera 3</div>
			<div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'">
				<a href="">Menu 1</a> </div>
			<div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'">
				<a href="">Menu 2</a> </div>
			<div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'">
				<a href="">Menu 3</a> </div>
			<div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'">
				<a href="">Menu 4</a> </div>
			<div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'">
				<a href="">Menu 5</a> </div>
			<div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'">
				<a href="">Menu 6</a> </div>
		</div>
	</div>
	<div id="cuerpo">
		<div id="barraNavegacion">Navegación</div>
	  <p>Prueba, esto es una prueba</p>
	  <p>fdsa</p>
	  <p>fa</p>
	  <p>dsf</p>
	  <p>ads</p>
	  <p>fa</p>
	  <p>dsf</p>
	  <p>asd</p>
	  <p>f</p>
	  <p>asd</p>
	  <p>f</p>
	  <p>sd</p>
	  <p>f</p>
	  <p>ds</p>
	  <p>fa</p>
	  <p>sf</p>
	  <p>saf</p>
	  <p>sad </p>
	</div>
	<div id="bloqueDerecha">
		<div id="cabeceraMenus">Cabecera der</div>
			<div class="menus">
				<center>
				<form method="post" name="frmLoginMenu" action="" onSubmit="return CheckLogin();" style="margin: 5px;">
				eMail<br />
				<input type="text" name="" id="" size="10" maxlength="15" /><br />
				Password<br />
				<input type="password" name="" id="" size="10" maxlength="15" /><br />
				<input type="submit" name="enviar" value="Enviar" />
				</form><br />
				</center>
			</div>
		<br />
		<div id="cabeceraMenus">Cabecera der 2</div>
		<div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'">
			<a href="">Menu 1</a>
		</div>
		<div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'">
			<a href="">Menu 2</a>
		</div>
		<div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'">
			<a href="">Menu 3</a>
		</div>
		<div class="menus" onMouseOver="this.id='x'" onMouseOut="this.id='w'">
			<a href="">Menu 4</a>
		</div>
	</div>
</div>
<div id="imagenPie" style="background-image:url(../../diseno/imagenes/abajo.gif);">
	<img src="../../diseno/imagenes/esquina.gif" height="45" width="125" />
</div>
<div id="copyright"><br />La pagina.com &copy; 2004-<%=DatePart("yyyy" ,date)%>&nbsp;&nbsp;-&nbsp;&nbsp;Web realizada por </div>
</body>
</html> 


Gracias de antemano

Última edición por Garet; 12/08/2008 a las 20:35
  #2 (permalink)  
Antiguo 13/08/2008, 06:17
 
Fecha de Ingreso: agosto-2002
Mensajes: 74
Antigüedad: 15 años, 3 meses
Puntos: 1
Respuesta: Problema para ajustar imagenes en IE, en Firefox todo OK

Os pongo una captura tanto del Firefox como del IE por si os sirve.

Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:38.