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í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