Hola tengo mi web y la pongo con el internet explorer 8 y firefox y se ve bien, pero cuando la abro con el ie 7 y ie el menu en css no me funciona, por que? como puedo componerlo?
este es mi codigo
tambien si quito la etiqueta <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> se ve bien en explorer 6 7 y 8 pero el menu css ya no funciona en ningunpo mas que en firefox.
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>
<link href="estilo.css" rel="stylesheet" type="text/css" />
<link href="banners.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen"/>
<title></title>
</head>
<body>
<div id="menuprincipal">
<ul id="menu">
<li class="logo">
<img style="float:left; " src="img/menu_left.png" width="59"/>
<a href="#">INICIO</a>
<img class="espacio" src="img/dot_blue.png"/>
</li>
<li><a href="#">PLATINUM</a>
<ul>
<li>
<img class="corner_inset_left" alt="" src="img/corner_inset_left.png"/>
<a href="#" >POR QUE PLATINUM</a>
<img class="corner_inset_right" alt="" src="img/corner_inset_right.png"/>
</li>
<li>
<a href="#">QUIENES SOMOS</a>
</li>
<li>
<a href="#">ANTECEDENTES</a>
</li>
<li class="last">
<img class="corner_left" alt="" src="img/corner_left.png"/>
<img class="middle" alt="" src="img/dot.png"/>
<img class="corner_right" alt="" src="img/corner_right.png"/>
</li>
</ul>
</li>
<li><a href="#">SERVICIOS</a>
<ul>
<li>
<img class="corner_inset_left" alt="" src="img/corner_inset_left.png"/>
<a href="#">PRODUCTOS</a>
<img class="corner_inset_right" alt="" src="img/corner_inset_right.png"/>
</li>
<li>
<a href="#">CUIDADO DE EQUINE</a>
</li>
<li>
<a href="#">CUIDADO DE CANINE</a>
</li>
<li class="last">
<img class="corner_left" alt="" src="img/corner_left.png"/>
<img class="middle" alt="" src="img/dot.png"/>
<img class="corner_right" alt="" src="img/corner_right.png"/>
</li>
</ul>
</li>
<li><a href="#">UBICACION</a>
<ul>
<li>
<img class="corner_inset_left" alt="" src="img/corner_inset_left.png"/>
<a href="#">VERACRUZ</a>
<img class="corner_inset_right" alt="" src="img/corner_inset_right.png"/>
</li>
<li class="last">
<img class="corner_left" alt="" src="img/corner_left.png"/>
<img class="middle" alt="" src="img/dot.png"/>
<img class="corner_right" alt="" src="img/corner_right.png"/>
</li>
</ul>
</li>
<li><a href="#">CONTACTO</a></li>
<img style="/ margin-left: 120px; / margin-top: -48px;" src="img/menu_right.png" width="26" />
</ul>
</div>
este es la de estilos
Código:
@charset "utf-8";
/* CSS Document */
body {
font-family:Arial, Helvetica, Sans-Serif;
font-size:12px;
margin:0px 0px;
background-color: #ffffff;
}
#principal {
margin 0 auto;
padding: 0px;
}
#cabecera {
margin 0 auto;
padding: 0px;
}
#main {
width: 800px;
}
#anuncio {
width: 720px;
float: left;
padding: 5px;
}
#mininoticias {
width: 234px;
height: 274;
margin-left: 748px;
/ margin-top: -255px;
}
#imgmenu {
background: url(img/equino.png) top left no-repeat;
margin-top: 10px;
width: 257px;
height: 174px;
margin-left: 740px;
}
#imgmenu h1 span {
visibility: hidden;
}
#imgmenu h2{
margin-top: 60px;
margin-left: 170px;
/ margin-left: 160px;
/ margin-top: 45px;
}
#logotipo {
background: url(img/logosjuntos.png) top left no-repeat;
float: left;
margin-top: 10px;
width: 700px;
height: 90px;
}
#logotipo h1 span{
visibility: hidden;
}
#banner {
background: url(img/banner_bottom.png) top left no-repeat;
width: 759px;
height: 183px;
}
#banner h1 span{
visibility: hidden;
}
/* inicia menu */
#menuprincipal {
padding: 0px;
margin-left: 0px;
top: 140px;
position: absolute;
}
#menu {
list-style: none;
line-height: 30px;
margin:0;
padding: 0;
}
#menu li {
margin:0px;
float: left;
}
#menu li a{
display: block;
width: 120px;
padding:3px 0;
text-decoration:none;
text-align:center;
font-size:11px;
color:#FFFFFF;
background-color:#333333;
}
#menu li a:hover {
color:#ffffff;
background-color:#c0272d;
}
#menu li ul {
position: absolute;
list-style: none;
width: 10px;
left: -999em;
}
#menu li:hover ul {
left: auto;
}
#menu .logo {
background:transparent none repeat scroll 0% 0%;
background-color:Transparent;
}
#menu .corner_inset_left {
position:absolute;
top:0px;
left:-12px;
}
#menu .corner_inset_right {
position:absolute;
top:0px;
left:120px;
}
#menu ul {
padding:0px;
margin:0px;
display:block;
display:inline;
}
#menu li ul li a {
display:block;
color:#FFFFFF;
}
#menu li ul li a:hover {
color:#ffffff;
font-weight: bold;
}
#menu li ul li{
display:block;
border-top: dotted 1px #606060;
list-style-type:none;
}
#menu > li {
background:#333333 none repeat scroll 0 0;
cursor:pointer;
float:left;
position:relative;
padding:0px 10px;
}
/* tamaño del borde azul */
#menu .espacio {
position:absolute;
height: 36px;
width: 10px;
top:0px;
left: 130px;
/ left: 60px; /* ie6 */
}
#menu .last {
background:transparent none repeat scroll 0% 0%;
margin:0px; padding:0px;
border:none; position:relative;
border:none; height:0px;
}
#menu .corner_left {
position:absolute;
left:0px;
top:0px;
}
#menu .corner_right {
position:absolute;
left:102px;
top:0px;
}
#menu .middle {
position:relative;
left:18px;
height: 20px;
width: 90px;
top:0px;
}
/* termina menu*/