div sin centrar en firefox

virogav · 22 Ene 2013, 01:51 · Solicitar retirada

Es la primera vez que entro en un foro, perdonad si algo no va bien. Admitiré todas las sugerencias.
En la página que estoy haciendo, gracias a CCTW, he metido un div (imagenes_portada) dentro de otro (contenido) y al abrirlo con Firefox imagenes_portada queda desplazado 40px a la derecha; no así enHTML-Kit ni en IE.
Si le pongo borde al div contenido, con cualquiera que lo abra, imagenes_portada queda fuera de los bordes.
He buscado por el foro pero no encuentro donde está el fallo.
Gracias por ayudarme

virogav · 22 Ene 2013, 01:53 · Solicitar retirada

perdonad, aqui van los códigos

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>Artesania Loli</title>
<link rel="stylesheet" href="estilololi.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="cabecera">
<div id="logo"><a href="index.html"><img src="objetos/logo2.jpg" width="283"
height="167" alt="Haz clic aquí para volver a la página de inicio"></a>
</div>
<div id="navegacion">
<ul><li><a href="index.html">Principal</a></li><li><a href="#">Productos</a></li><li><a href="#">Cursos</a></li><li><a href="#">Contacto</a></li></ul>
</div>
</div>
<div id="contenido">

<div class="main_cont">
<div class="menu_top_bg">Navegacion
</div>
<div class="sub_menu">
<ul>
<li><a href="#"; class= "selected">Tu texto 1</a>
</li>
<li><a href="#">Tu texto 2</a>
</li>
<li><a href="#">Tu texto 3</a>
</li>
<li><a href="#">Tu texto 4</a>
</li>
<li><a href="#">Tu texto 5</a>
</li>
<li><a href="#">Tu texto 6</a>
</li>
</ul>
</div>
</div>
<div id="cuerpo">
<h1>Bienvenidos a Artesanía Loli</h1>

<p> Artesanía Loli es un taller artesano, fundado en el 2000, dedicado a la transformación artística de vidrio plano. Trabajamos técnicas como el fusing, termoformado de superficies, la decoración a media y baja temperatura, la pasta de vidrio, tiffany`s, escultura en frio o la joyería.</p>
<p>Los trabajos que desarrollamos son piezas limitadas de autor, que se dedican a la decoración de espacios, menaje, recordatorios de eventos, placas conmemorativas o trofeos.</p>
<p>Realizamos colecciones semestrales que presentamos en ferias de Oficios Artesanos, colecciones de entre 10 y 200 unidades trabajadas una a una para dotarlas de posibilidades.</p>
<p>Mimamos el encargo como base del taller, diseñando a nuestros clientes espejos, tragaluces, vidrieras, según sean sus prioridades o ideas.</p>
</div>
<div id="imagenes_portada">
<ul>
<li><a href="index.html"><img src="objetos/vajilla.jpg" ></a>
</li>
<li><a href="index.html"><img src="objetos/jarron.jpg" ></a>
</li>

</ul>

</div>
</div>

</div>

</body>
</html>

CSS

* {text-indent:0px; margin:0px; padding:0px auto; border:0px;}
p {text-align:justify;}
h1 {font-size:1.2em; color:blue; font-weight:bold; text-decoration:underline; text-align:center;padding:10px 0px}
body {text-align:center; background-color:silver;}
#global {width:900px; margin:4px auto;}
#cabecera {background-color:black;height:180px;float:left;width:auto;}
#logo{float:left;margin:0px 0px 0px 100px;}
#navegacion {height:25px;width:517;float:left;margin-top:150px;padding-bottom:10px;}
#navegacion li {float:left; list-style:none;margin:0px 20px 0px 20px;background-color:red;border: 1px solid #000000;
border-radius: 7px;}
#navegacion ul { margin-left: 60px;float:center;color:white;}
a{color:white;text-decoration:none;display:block;}
a:link {}
a:visited {}
a:hover{color:red;text-decoration:none;background-color: #F7F2E0;}
a:active{}
#contenido {}
#contenido p {text-indent:15px;padding-left:150px;}
#contenido h1 {padding-left: 150px;}
#cuerpo {min-height:220px;background-color:white;padding-bottom: 27px;}
#imagenes_portada {float:left;padding: 0px; margin: 0px}
#imagenes_portada ul{width:900px; }
#imagenes_portada li {width:450px;float:left;height: auto;list-style: none;background-color:green;
}

.main_cont
{
float:left;
width:110px;
background-color:#4d7986;
padding:10px;height:220px;
}

.menu_top_bg
{
width:110px;
background:url(../objetos/menu_top_bg.gif) repeat-x;
height:22px;
padding-top:8px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
font-weight:bold;
text-align:center;

}

.sub_menu ul
{
padding:0px;
margin:0px;
}

.sub_menu ul li
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
line-height:32px;
border-bottom:1px dotted #93bcc3;
list-style-type:none;
text-indent:8px;
}

.sub_menu ul li a
{
text-decoration:none;
color:#FFFFFF;
}

.sub_menu ul li a.selected
{
background:url(../objetos/menu_selected.gif) no-repeat;
float:left;
width:110px;
height:32px;
}

.sub_menu ul li a:hover
{color:red;
background:url(../objetos/menu_selected2.gif) no-repeat;
float:left;
width:110px;
height:32px;
}

Game Over · 22 Ene 2013, 02:42 · Solicitar retirada

Tienes...
#imagenes_portada {float:left;padding: 0px; margin: 0px} <== faltaría el ;

Pero mejor prueba esto ...
#imagenes_portada {float:left;padding: 0px; margin: 0px auto;}

Game Over · 22 Ene 2013, 10:02 · Solicitar retirada

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
	
	<html>
	<head>
	
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <!--Sintaxis ok-->
	<title>Artesania Loli</title>
	<link rel="stylesheet" href="estilololi.css" type="text/css" media="all">
	
	</head>
	
	<body>
	<div id="global">
		<div id="cabecera">
		
			<div id="logo"><a href="index.html"><img src="objetos/logo2.jpg" width="283" height="167" alt="Haz clic aquí para volver a la página de inicio"></a>
			</div> <!--logo-->
			
			<div id="navegacion">
				<ul>
					<li><a href="index.html">Principal</a></li>
					<li><a href="#">Productos</a></li>
					<li><a href="#">Cursos</a></li>
					<li><a href="#">Contacto</a></li>
				</ul>
			</div> <!--navegacion-->
			
		</div> <!--cabecera-->
		
	<div id="contenido">
	
		<div class="main_cont">
		
			<div class="menu_top_bg">Navegacion
			</div> <!--menu_top_bg-->
			
			<div class="sub_menu">
			
				<ul>
					<li><a href="#" class= "selected">Tu texto 1</a></li>
					<li><a href="#">Tu texto 2</a></li>
					<li><a href="#">Tu texto 3</a></li>
					<li><a href="#">Tu texto 4</a></li>
					<li><a href="#">Tu texto 5</a></li>
					<li><a href="#">Tu texto 6</a></li>
				</ul>
				
			</div> <!--sub_menu-->
			
		</div> <!--main_cont-->
		
	<div id="cuerpo">
	<h1>Bienvenidos a Artesanía Loli</h1>
	
	<p> Artesanía Loli es un taller artesano, fundado en el 2000, dedicado a la transformación artística de vidrio plano. Trabajamos técnicas como el fusing, termoformado de superficies, la decoración a media y baja temperatura, la pasta de vidrio, tiffany`s, escultura en frio o la joyería.</p>
	<p>Los trabajos que desarrollamos son piezas limitadas de autor, que se dedican a la decoración de espacios, menaje, recordatorios de eventos, placas conmemorativas o trofeos.</p>
	<p>Realizamos colecciones semestrales que presentamos en ferias de Oficios Artesanos, colecciones de entre 10 y 200 unidades trabajadas una a una para dotarlas de posibilidades.</p>
	<p>Mimamos el encargo como base del taller, diseñando a nuestros clientes espejos, tragaluces, vidrieras, según sean sus prioridades o ideas.</p>
	</div> <!--cuerpo-->
	
	<div id="imagenes_portada">
	
		<ul>
			<li><a href="index.html"><img src="objetos/vajilla.jpg" ></a></li>
			<li><a href="index.html"><img src="objetos/jarron.jpg" ></a></li>
	
		</ul>
	
	</div> <!--imagenes_portada-->
	</div> <!--contenido-->
	
	</div> <!--global-->
	
	</body>
	</html>

virogav · 22 Ene 2013, 17:25 · Solicitar retirada

Gracias Game Over por la respuesta pero no me corrigió el problema.
El ; al final tengo entendido que no es necesario aunque sea conveniente.
Tengo sangrado el cídigo pero se conoce que al pegerlo perdió el formato.
De todas formas, gracias por la respuesta.
¿Cómo puedo pegar aquí una captura de pantalla?

virogav · 22 Ene 2013, 17:48 · Solicitar retirada

Aquí coloco una captura de pantalla, si es que sale

virogav · 22 Ene 2013, 19:03 · Solicitar retirada

He modificado #imagenes_portada incluyendo "position: relative;
left: -40px;" y arregló el problema en Firefox pero en IE se desplaza hacia la izquierda

Game Over · 23 Ene 2013, 09:13 · Solicitar retirada

Deberias copiar la imagen y guardarla en tu ordenador... luego subir la imagen clickando en Image del menú que sale aqui ... elegir From Computer y buscar la imagen a subir.. y "vualaaa"...

virogav · 23 Ene 2013, 13:34 · Solicitar retirada

Gracias Game Over, ya subí la imagen, pero sigo sin poder solucionar el tema del desplazamiento; es como si algo, que se me escapa, estuviera ocupando esos 40 px a la izquierda del div

virogav · 23 Ene 2013, 19:19 · Solicitar retirada

SOLUCIONADO
No se cual sería el motivo, me gustaría saberlo, pero en la primera linea de código:
* {text-indent:0px; margin:0px; padding:0px auto; border:0px;} le quite el auto:
* {text-indent:0px; margin:0px; padding:0px ; border:0px;}.
Gracias