holaa!
veran, soy nueva en el css, me estoy iniciando hace poco =)
me descargue un menu template en css para editarlo y ponerlo en mi web, no tuve problemas al editarlo ni nada, pero a la hora de verlo es cuando me da problemas
en firefox puedo verlo perfectamente,
pero en internet explorer no lo veo
no me gusta usar ie, pero como la mayoria (86,6%) de los visitantes a mi web lo usan, necesito que funcione también con el.
este es el codigo:
Código:
CSS
#menu {padding:0; margin:0; list-style:none; width:395px; height:64px; background:url(lay/toolbar.png);}
* html #menu {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='toolbar.png', sizingMethod='scale');
}
#menu li {float:left; width:64px; height:64px; position:relative;}
#menu li a {display:block; width:64px; height:64px;}
#menu li a b {position:absolute; left:-9999px;}
#menu li a:hover {white-space:nowrap;}
#menu li a:hover b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;}
.home #menu li#home a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden; background:url(lay/bhome.png);}
.colabora #menu li#colabora a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(lay/bcolabora.png);}
.contacto #menu li#contacto a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(lay/bcontacto.png);}
.newsletter #menu li#newsletter a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(lay/bnewsletter.png);}
.rss #menu li#rss a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(lay/brss.png);}
.foro #menu li#foro a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(lay/bforo.png);}
#menu li#home a:hover b {background:url(lay/bhome.png);}
#menu li#colabora a:hover b {background:url(lay/bcolabora.png);}
#menu li#contacto a:hover b {background:url(lay/bcontacto.png);}
#menu li#newsletter a:hover b {background:url(lay/bnewsletter.png);}
#menu li#rss a:hover b {background:url(lay/brss.png);}
#menu li#foro a:hover b {background:url(lay/bforo.png);}
* html #menu li#home a:hover b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bhome.png', sizingMethod='scale');
}
* html #menu li#colabora a:hover b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bcolabora.png', sizingMethod='scale');
}
* html #menu li#contacto a:hover b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bcontacto.png', sizingMethod='scale');
}
* html #menu li#newsletter a:hover b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bnewsletter.png', sizingMethod='scale');
}
* html #menu li#rss a:hover b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='brss.png', sizingMethod='scale');
}
* html #menu li#foro a:hover b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bforo.png', sizingMethod='scale');
}
* html #menu li#contact a:hover b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bcontact.png', sizingMethod='scale');
}
* html .home #menu li#home a b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bhome.png', sizingMethod='scale');
}
* html .colabora #menu li#colabora a b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bcolabora.png', sizingMethod='scale');
}
* html .newsletter #menu li#contacto a b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bcontacto.png', sizingMethod='scale');
}
* html .newsletter #menu li#newsletter a b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bnewsletter.png', sizingMethod='scale');
}
* html .rss #menu li#rss a b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='brss.png', sizingMethod='scale');
}
* html .foro #menu li#foro a b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bforo.png', sizingMethod='scale');
}
* html .contact #menu li#contact a b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bcontact.png', sizingMethod='scale');
}
y en mi web:
Código:
<ul id="menu">
<li id="home" class="first"><a href="#"><b>Home</b></a></li>
<li id="colabora"><a href="#"><b>colabora</b></a></li>
<li id="contacto"><a href="#"><b>Contacto</b></a></li>
<li id="newsletter"><a href="#"><b>Newsletter</b></a></li>
<li id="rss"><a href="#"><b>RSS</b></a></li>
<li id="foro"><a href="#"><b>Foro</b></a></li>
</ul>
como dije no tengo ni idea de css, asi que si alguien sabe porque me ocurre esto o puede ayudarme se lo agradeceria enormemente! ^^
muchas gracias por adelantadooo! besoos