Hola, tengo problema con IE, no he aplicado ningún Hack ni para IE ni para Mac
porque no sé muy bien cuales aplicar para solucionar este problema de CSS.
Espero puedan ayudarme a solucionar este problema.
Mi opinión es que IE y mac no interpretan bien los márgnes, padding, etc y los
muestran mal.
El problema reside en que tengo un menú que en Firefox funciona a la perfección
y consigo el efecto deseado, un subrayado dentro de la cabecera del menú del
texto cuando a:hover y así se resalta el texto que vas a clicar.
En Firefox el tamaño del subrayado queda dentro de la cabecera sin embargo en
Internet Explorer el subrayado sale fuera de la cabcera desplazando cada vez
que ejecuta un a:hover todo el contenido posterior de la web hacia abajo.
En Mac los subrayados salen a los lados de los textos y no debajo.
Supongo será cuestión de meter algún hack, ustedes saben cual puede ayudarme?
Además quizás me sirva para otro menú con el mismo problema y de aquí en
adelante tendré en cuenta este elemento para futuros diseños.
Gracias.
Adjunto el código CSS i XHTML motivo de este mail, espero puedan ver qué ocurre
y por qué.
Saludos, Oscar.
CSS:
div.navegador {
width: 750px;
height: 30px;
clear: both;
padding: 0;
margin: 0;
background: #444d45 url(images/navgrisfosc.gif) top left no-repeat;
border-bottom: 4px solid #666 }
div.navegador ul {
display: block;
width: 400px;
float: left;
padding-left: 10px;
margin: 0;
list-style: none;
background: transparent;
height: 30px; }
div.navegador ul li {
display: block;
float: left;
height: 20px;
padding: 0;
margin: 0 10px 0 0; }
div.navegador ul li a {
display: block;
float: left;
height: 20px;
padding: 0 11px;
border: 0;
text-decoration: none;
font: normal 11px/30px "Verdana", sans-serif;
color: #fff; }
div.navegador ul li a:hover { color: #fff;
border-bottom: 4px solid #f01282;
padding-bottom: 3px;
}
div.navegador ul li#current a {
padding-right: 33px;
background: # url(http://) center right no-repeat;
color: #fff;
font-weight: bold;}
div.navegador ul li#current a:hover {
cursor: default;
text-decoration: none;
color: #fff; }
HTML:
<div class="navegador">
<ul>
<li id="current"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
---
Gracias por llegar hasta aquí y leer este mail, espero puedan echarme un cable!
Saludos y gracias
Oscar
----------------------------------------------------------------
This message was sent using IMP, the Internet Messaging Program.
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
