Mi problema es sobre el menu vertical flotante:
En Mozilla
En IE
Dejo aquí el código:
*{
margin:0px;
padding:0px;
}
BODY {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color:black;
margin:2% 0 0 0;
text-align: center;
background:#fcc url(img/bg.png) repeat-x top;
}
a {color:#666;text-decoration: underline;}
a:hover {color:#fff; background-color: #f6c; text-decoration: none;}
#footer a {color:#ccc;text-decoration: none;}
#footer a:hover {color:#fff;text-decoration: none;}
/*headers style*/
h1{
font-family: Georgia, "Times New Roman", Times, serif;
text-align:left;
margin:0;
padding:0;
font-size: 2.4em;
font-weight: normal;
color: #f3c;
border-bottom:#f6c 2px solid;
}
h2{
margin:0;
padding:0;
font-size: 1.8em;
font-weight:800;
color:white;
}
h3{
margin:0;
padding:0;
font-size: 1.4em;
font-weight:800;
color:#F471C6;
}
/* conatiner style */
#container{
text-align: left;
margin: auto;
padding:0px;
width:80%;
}
/* head style */
#head{
padding:0px;
margin:0px;
text-align:center;
}
#head img{
width:100%;
padding:0px;
margin:auto;
}
/* menu style */
#menu{
font-family: Georgia, "Times New Roman", Times, serif;
margin:0;
padding:0;
font-size:1.6em;
width:18%;
float:left;
display: inline; /* fix for doubling margin in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#menu ul {
text-align: left;
margin:0%;
padding:0%;
list-style:none;
border-left:#f6c 8px solid;
}
#menu li a{
color:#666;
text-decoration: none;
padding:2% 4%;
display:block;
border-bottom:#f6c 1px dashed;
}
#menu li a:hover{
color:#fff;
background-color: #f6c;
text-decoration: none;
}
#menu ul ul{
border-left: none;
}
#menu ul ul li{
font-size:0.8em;
margin:0%;
padding-left:12px;
list-style:none;
}
/* lateral style */
#lateral{
margin:0;
padding:0;
font-size:1.6em;
width:18%;
float:right;
display: inline; /* fix for doubling margin in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#lateral ul{
text-align: left;
margin-bottom:12%;
padding:12% 12%;
list-style:none;
background:#f6c url(img/bglateral.png) repeat-x top;
}
#lateral li a{
color:#666;
text-decoration: none;
padding:2% 4%;
display:block;
}
#lateral li a:hover{
color:#fff;
background-color: #f6c;
text-decoration: none;
}
#lateral ul ul{
border-left: none;
}
#lateral ul ul li{
font-size:0.8em;
margin:0%;
padding-left:12px;
list-style:none;
}
/* body style */
#body{
margin:0%;
padding-top:2%;
background: url(img/bgbody.png) repeat-x bottom;
}
/* text style */
#text{
line-height:1.6em;
font-size:1em;
text-align:left;
margin-left:18%;
margin-right:18%;
padding:0 2% 2% 2%;
background: url(img/bgtext.png) no-repeat top right;
}
/* footer style */
#containerfooter{
margin: auto;
width:100%;
border-top:#f6c solid 4px;
background:#fcc url(img/bgfooter.png) repeat-x;
}
#footer{
color:white;
margin: auto;
width:80%;
padding:1.2% 0 2.6% 0;
text-align:right;
font-size:1em;
}
#footer ol li{
display:inline;
font-size:0.8em;
}
#footer ul li{
display:inline;
float:left;
}
#footer img{
border:none;
}
p{
margin:1% 0 2% 0;
}
No se si se trata de un bug o un error de código...
Gracias!
