problemas visualizacion en navegadores

gugus · #1 (**permalink**) 15/04/2008, 07:57

Buenas, estoy empezando con esto del css y soy amateur, mi anterior pagina esta con tablas http://www.insomniobar.com y la estoy haciendo un diseño nuevo con css a tres columnas, pero mi problema es q con el IE se ve bien pero en opera y otros, el footer me aparece encima del contenido, como podeis ver aqui http://www.insomniobar.com/nuevo/index2.php, esta es la pagina... Si alguien pudiera decirme cual es el fallo ya q he estado trasteando pero no doy con la solucion.

Os adjunto el css

Código:

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#FFFFFF; /*aqui mandamos a centrar todo el contenido*/ 
}

#contenedor {
	width: 800px;
	margin: auto;
	border: 1px solid #00FF00;
	height: auto;
	top: auto;
	bottom: auto;
}
#lateral{
	width: 200px;
	float:left;
	height: auto;
	top: auto;
	bottom: auto;
	position: relative;
} 
#otrolado{
	width: 200px;
	float: right;
	height: auto;
	top: auto;
	bottom: auto;
	position: relative;
} 
#principal{
	width: 390px;
	float: left;
	margin-left: 5px;
	height: auto;
	top: auto;
	bottom: auto;
	position: relative;
} 

#encabezado {
	width:800px;
	height:auto;
	float:left;
	display:inline;
	border: 1px solid #FF0000;
	top: auto;
	bottom: auto;
	right: auto;
}

#footer {
	width:800px;
	text-align:right;
	font-size:80%;
	font-style:italic;
	color:#FFFFFF;
	background-color: #000000;
	bottom: auto;
}

img{ border: 0pt; }

#vista_toolbar {
float:left;
font:normal 12px 'Trebuchet MS','Arial';
margin:0;
padding:0;
}

#vista_toolbar ul {
background-image:url(vista_toolbar/back.gif);
background-repeat:repeat-x;
float:left;
line-height:32px;
list-style:none;
margin:0;
padding:0 10px 0 10px;
width:780px;
}

#vista_toolbar li {
display:inline;
padding:0;
}

#vista_toolbar a {
color:#FFF; /* need because it will use default link color */
float:left;
padding:0 3px 0 3px; /* left 3 px because of left.png image */ 
text-decoration:none;
}

#vista_toolbar a span {
display:block;
float:none;
padding:0 10px 0 7px;
}

#vista_toolbar a span img {
border:none;
margin:8px 4px 0 0;
}

/* show picture when mouse over link */
#vista_toolbar a:hover{
background: url(vista_toolbar/left.png) no-repeat left center;
}

#vista_toolbar a:hover span {
background:url(vista_toolbar/right.png) no-repeat right center;
}

#vista_toolbar a.right {
float:right; /* for help button - just add class "right" ->  <a class="right"... */
}

td {
	font-family: Arial, Helvetica, sans-serif;
}

th {
	font-family: Arial, Helvetica, sans-serif;
}
#vista_toolbarlat {

float:left;
font:normal 12px 'Trebuchet MS','Arial';
margin:0;
padding:0;
}
#vista_toolbarlat ul {

background-image:url(vista_toolbar/back.gif);
background-repeat:repeat-x;
float:left;
line-height:32px;
list-style:none;
margin:0;
padding:0 10px 0 10px;
width:180px;
}
#vista_toolbarcen {
float:left;
font:normal 12px 'Trebuchet MS','Arial';
margin:0;
padding:0;
}
#vista_toolbarcen ul {


background-image:url(vista_toolbar/back.gif);
background-repeat:repeat-x;
float:left;
line-height:32px;
list-style:none;
margin:0;
padding:0 10px 0 10px;
width:370px;
}
#1 {
	width: 800px;
	height: auto;
}
#contenedor2 {
	width: 780px;
	margin: auto;
	border: 1px solid #FFFFFF;
	padding: 10px;
	bottom: auto;
}

Y el Html

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stylo.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
	background-color: #000000;
}
-->
</style></head>

<body>
 <div id="contenedor"><!--contenedor-->
	<div id="encabezado"> <!--encabezado-->
  		<div align="center"><img src="imagenes/INSOMNIO-7.jpg" alt="logo"></div><!--logo y cerrar-->
	  	<div id="vista_toolbar"><!--barra navegacion-->
		  <ul>
			  <li><a href="#"><span><img align="left" src="vista_toolbar/add.gif"alt="add new" >Add New</span></a></li>
			  <li><a href="#"><span><img align="left" src="vista_toolbar/mail.gif" alt="check mail" >Check Mail</span></a></li>
			  <li><a href="#"><span><img align="left" src="vista_toolbar/chart.gif" alt="statistic" >Statistic</span></a></li>
			  <li><a href="#"><span><img align="left" src="vista_toolbar/mona.gif" alt="my pictures" >My Pictures</span></a></li>
			  <li><a class="right" href="#"><span><img align="left" src="vista_toolbar/sos.gif" alt="help" >Help</span></a></li>
		  </ul>
		</div><!--cerrar barra navegacion-->
	</div><!--cerrar encabezado-->
	<div id="1"><!--cuerpo-->
	  <div id="lateral"><!--lateral-->
			<div id="vista_toolbarlat"><!--lateral encabezado-->
		  		<ul><li>
		  		  <div align="center">menu 1</div>
		  		</li>
		  		</ul>
			</div><!--cierra lateral encabezado-->
		    <div align="justify">Esto es una dfhdfh dfhdf hdfhgj jg jg gjg j j jg jgj j g jgj gj gj gj g jg jg jgj g jgj gj gj j j j gj gj gj ggj jg jg jg j gj gj gj gj gj gj gj gj gj gj gj g jgj g jg jg jg jg jg jgj gj gj gj gj g jg j j j j j jg jgj j gj gj g jgj gj gj gj gj gj g jgj gj g jgj g jg jg jgj gj gj g jg jg jgj gj gj gj gj gj gj gj gj gj gj gj gjg j gj g
		      <!--contenido y cierra-->
		    </div>
	  </div> <!--cierra lateral-->
		<div id="otrolado"><!--lateral2-->
			<div id="vista_toolbarlat"><!--lateral encabezado2-->
		  		<ul><li>
		  		  <div align="center">menu 3</div>
		  		</li>
		  		</ul>
			</div><!--cierra lateral encabezado2-->
		  <div align="justify"><!--contenido-->
	      fhdfhdfhdfhdfhdfhdfhdfhdfhdfhdf </div>
		  <!--cierra contenido-->
       	</div> <!--cierra lateral2-->
	  <div id="principal"><!--principal-->
			<div id="vista_toolbarcen"><!--principal encabezado-->
		  		<ul><li>
		  		  <div align="center">menu 2</div>
		  		</li>
		  		</ul>
			</div><!--cierra principal encabezado-->
			<?php include ("http://www.insomniobar.com/news/news.php");?>
	  </div><!--contenido y cierra-->
	<!--cierra principal-->
<div id="contenedor2">
  <div align="left">dfhhdfhdhgjgjjgg jj gj g gjg j jg jg j g jj jg jg jj </div>
</div>
</div>
</div>
</div>

Espero me podais ayudar, ando desesperado.

Un saludete

daPhyre · #2 (**permalink**) 15/04/2008, 10:31

Intenta este en el footer:

clear: left;

gugus · #3 (**permalink**) 15/04/2008, 16:36

daPhyre Muchas gracias por contestar, pero con eso nada de nada :(, alguna otra idea?

Saludetes ;)

Mikmoro · #4 (**permalink**) 15/04/2008, 17:06

Hola, gugus.

Prueba a añadir a tu hoja de estilo esta clase:

.corte{ clear: both;}

Y ahora en el html, justo encima de donde está el <div id="contenedor2">, añade este otro:

<div class="corte"></div>

Es decir, que quede:

<div class="corte"></div>
<div id="contenedor2">

A ver qué tal. Ya dirás.

Mikel.

gugus · #5 (**permalink**) 15/04/2008, 17:10

Muchas gracias Mikmoro, lo habia encontrado justo en unos manuales e iba a ponerlo aqui justo cuando lo habias puesto tu ;) y aparte tenia </div> por ahi a lo bestia mal colocaos, pero ya ta solucionao tb ;)

Muuuuuuuuuuchas gracias de toas maneras y tema solucionado ;)

Mikmoro · #6 (**permalink**) 15/04/2008, 17:16

Pues nada, me alegro.

Saludos.

Mikel.