Hola buenas, quería explicaros mi problema.
Soy principiante en esto de webs, pero me encuentro en que tengo una página que voy a comenzar, y mi sorpresa es que tengo algún error o fallo en el css, porque solo chrome me lo reconoce y el resto nada ni ff ni ie.
Pongo aquí los trozos de código por si alguien me sabe decir donde esta fallando.
La página basicamente tiene unas capas de posicionamiento, para luego rellenarlas y un menu tipo acordion.
Decir que en chrome se ven los colores de las capas, las posiciones, y el menú funciona perfecto. Es en el resto que no se ve nada de los estilos.
Código:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="./css/estilo1.css" rel="stylesheet" type="text/javascript" />
<link href="./css/menu.css" rel="stylesheet" type="text/javascript" />
<script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/jquery.accordion.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$('#menu').accordion();
});
</script>
</head>
<body>
<div id="total">
<div id="cabecera">cabecera</div>
<div id="menulateral">
<ul id="menu">
<li><a href="#">Catálogo</a>
<ul>
<li><a href="#">Añadir</a></li>
<li><a href="#">Buscar -></a>
<ul>
<li><a href="#">Subsubmenu 1</a></li>
<li><a href="#">Subsubmenu 2</a></li>
<li><a href="#">Subsubmenu 3</a></li>
<li><a href="#">Subsubmenu 4</a></li>
</ul>
</li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul id="open">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="#">Menu sin submenu</a></li>
</ul>
</div>
<div id="contenido">contenido
</div><br />
<div id="pie">pie
</div>
</div>
</body>
</html>
Estilo1.css:
Código:
@charset "utf-8";
/* Capas */
#total{
float:left;
position:relative;
height:100%;
width:100%;
background-color:#000;
min-height:100%;
}
#cabecera{
position:relative;
margin-left:auto;
margin-right:auto;
width: 900px;
height:100px;
background-color:#0F0;
}
#menulateral{
float:left;
position:relative;
width:auto;
height:auto;
margin-left:200px;
background-color:#00F
}
#contenido{
float:left;
position:relative;
height:auto;
width:1050px;
padding-right:300;
background-color:#F00;
}
#pie{
position:relative;
height:85px;
width:900px;
background-color:#FF0;
margin-left:auto;
margin-right:auto;
}
Menu.css:
Código:
@charset "utf-8";
/* CSS Document */
p a:hover{ color: #2961A9;}
#menu{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:1px 1px 3px #888;
-moz-box-shadow:1px 1px 3px #888;
}
#menu li{border-bottom:1px solid #FFF;}
#menu ul li, #menu li:last-child{border:none}
#menu ul li li{padding-left: 10px;}
a{
display:block;
color:#FFF;
text-decoration:none;
font-family:'Helvetica', Arial, sans-serif;
font-size:13px;
padding:3px 5px;
text-shadow:1px 1px 1px #325179;
}
#menu a:hover{
color:#F9B855;
-webkit-transition: color 0.2s linear;
}
#menu ul a{background-color:#6594D1;}
#menu ul a:hover{
background-color:#FFF;
color:#2961A9;
text-shadow:none;
-webkit-transition: color, background-color 0.2s linear;
}
ul{
display:block;
background-color:#2961A9;
margin:0;
padding:0;
width:130px;
list-style:none;
}
#menu ul{background-color:#6594D1;}
#menu li ul {display:none;}