PDA

View Full Version : CSS is evil, Part II: f&@#$g Internet Explorer 6




floyde
Jan 27, 2006, 10:38 AM
I'm trying to do a macromedia-style, two level menu with CSS. I was almost done with it last night (it's only ugly text right now and the second level menus still need proper alignment, but the hovering part is done) but today I tried it on IE6 and, you guessed right, it doesn't work at all :o . IE6 just displays a vertical list (it's supposed to be horizontal), and the second level just doesn't work.

The strange part is that I based my menu on this blog (http://veerle.duoh.com/index.php?id=P320) which shows a menu that does work on IE6.

here is the css:

ul#menu
{
list-style-type: none;
padding: 0;
margin: 0;
border: 0;
top: 0px;
left: 0px;
width: 900px;
height: 25px;
}
ul#menu li
{
padding: 0;
margin-left: 0;
display: block;
float: left;
}
ul#menu li a
{
padding-left: 7px;
padding-right: 7px;
text-decoration: none;
display: block;
height: 25px;
}

ul#menu li ul
{
display: block;
visibility: hidden;
position: absolute;
left: 0px;
width: 800px;
margin: 0;
height:40px;
}
ul#menu li:hover ul
{
visibility: visible;
z-index: 100;
}


and the html:

<!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" xml:lang="en" lang="en">
<head>
<title>Menu Etiangui</title>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="menu">
<li><a href="#">Acerca de Nosotros</a>
</li>
<li><a href="#">Comunidad</a>
<ul>
<li><a href="#">Foro</a></li>
<li><a href="#">Clubs y Asociaciones</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Avisos de Ocasion</a></li>
<li><a href="#">Eventos y Noticias</a></li>
</ul>
</li>
<li><a href="#">Nuestros Albums</a>
<ul>
<li><a href="#">Exporta</a></li>
<li><a href="#">Arquitectura</a></li>
<li><a href="#">Cronologia</a></li>
<li><a href="#">Ofertas</a></li>
<li><a href="#">Comentarios Clientes</a></li>
</ul>
</li>
<li><a href="#">Sellos</a>
<ul>
<li><a href="#">Ventas</a></li>
<li><a href="#">Ofertas</a></li>
<li><a href="#">Intercambios</a></li>
<li><a href="#">Comentarios Clientes</a></li>
</ul>
</li>
<li><a href="#">Subastas</a>
<ul>
<li><a href="#">Subastas etiangui</a></li>
<li><a href="#">Subastas ebay</a></li>
<li><a href="#">Comentarios clientes</a></li>
</ul>
</li>
<li><a href="#">Descargas</a>
<ul>
<li><a href="#">Catalogos</a></li>
<li><a href="#">Localizador</a></li>
<li><a href="#">Publicidad varia</a></li>
<li><a href="#">Series / listados</a></li>
</ul>
</li>
<li><a href="#">Preguntas Frecuentes</a>
<ul>
<li><a href="#">Formas de pago</a></li>
<li><a href="#">Formas de embarque</a></li>
</ul>
</li>
<li><a href="#">Contacto</a>
<ul>
<li><a href="#"></a></li>
</ul>
</li>
</ul>
</body>
</html>


Can you guys spot any property that doesn't work right on IE6? I was thinking that it might have something to do with display: block;, which I'm using to make the list display horizontally. thanks



mnkeybsness
Jan 27, 2006, 12:15 PM
hover pseudo-selectors only work on <a> tags in IE

floyde
Jan 27, 2006, 12:57 PM
hover pseudo-selectors only work on <a> tags in IE
thanks, I'll try to change that, do you know what could be causing it to display vertically instead of horizontally?

kgarner
Jan 27, 2006, 02:12 PM
I think the title of your thread should be IE is Evil, or IE Sucks Rocks. CSS is most certainly not evil. IE just doesn't peak the language fluently enough.

ebow
Jan 27, 2006, 03:15 PM
When I'm stumped on making menus out of lists, I consult this "Listmatic" site (http://css.maxdesign.com.au/index.htm). You will probably want to check out Listmatic2 with nested lists. Also, I'm much more accustomed to using display: inline in the ul section to get horizontal lists.

floyde
Jan 27, 2006, 06:40 PM
I think the title of your thread should be IE is Evil, or IE Sucks Rocks. CSS is most certainly not evil. IE just doesn't peak the language fluently enough.
True, but since IE's evil is too obvious it wouldn't attract enough attention, "css is evil" is catchier:D

When I'm stumped on making menus out of lists, I consult this "Listmatic" site. You will probably want to check out Listmatic2 with nested lists. Also, I'm much more accustomed to using display: inline in the ul section to get horizontal lists.
I'll give that a try, thanks.

Rower_CPU
Jan 28, 2006, 03:40 PM
I'd also check out the Son of Suckerfish Dropdowns (http://www.htmldog.com/articles/suckerfish/dropdowns/).

It uses a small bit of javascript to coax IE into displaying the sub-menu on hover properly. I usually don't condone hacks like this or mixing CSS and javascript for presentation, but I think this solution works pretty well.

floyde
Jan 30, 2006, 10:58 AM
I'm almost there... I'm using the suckerfish as a template, but for some reason, on IE6 the submenu disappears when I go over white text (which is still part of the submenu's UL), so I can only select one option on each menu :(
I'll post the code later since I don't have it with me right now, but has anyone experienced this behaviour before?

Rower_CPU
Jan 30, 2006, 11:06 AM
Can you share a link to a page where it's doing that?

Off the top of my head, there are a couple of possibilities:
- padding/margin on the LIs with the menu could be introducing some white space that IE6 is interpreting as not part of the UL
- white space in your code can cause IE to render white space where you don't want it - this could also let IE interpret the blank as not part of the menu. If I have a vertical menu I almost always have to take out the line breaks between the LIs to prevent IE from showing gaps between them.

floyde
Jan 30, 2006, 11:50 AM
I don't have it online yet but here is the code, it's a bit sloppy because I was "experimenting" a lot:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
<title>Suckerfish Dropdowns - One Level Bones</title>

<style type="text/css">

#nav, #nav ul
{
padding: 0;
margin-top: 18px;
margin-left: 34px;
list-style: none;
}

#nav a
{
display: block;
/*width: 1em;*/
text-align: center;

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
}

#nav li
{
float: left;
/*width: 1em;*/
padding-left: 8px;
padding-right: 8px;
height: 32px;
}

#nav li ul
{
position: absolute;
width: 43em;
left: -999em;
}

#nav li ul li
{
display: block;

}
#nav li ul a
{
padding-left: 5px;
padding-right: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #5D7269;
}

#nav li:hover ul, #nav li.sfhover ul
{
left: 12px;
}


</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function()
{
var sfEls = document.getElementById("nav").getElementsByTagName("LI");

for (var i=0; i<sfEls.length; i++)
{
sfEls[i].onmouseover = function()
{
this.className += " sfhover";
}
sfEls[i].onmouseout = function()
{
this.className = this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}

if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>


</head>

<body>

<table width="790" height="50" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="teal">
<ul id="nav">
<li><a href="#">Acerca de Nosotros</a>
</li>
<li><a href="#">Comunidad</a>
<ul id="comunidad">
<li><a href="#">Foro</a></li>
<li><a href="#">Clubs y Asociaciones</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Avisos de Ocasion</a></li>
<li><a href="#">Eventos y Noticias</a></li>
</ul>
</li>
<li><a href="#">Nuestros Albums</a>
<ul>
<li><a href="#">Exporta</a></li>
<li><a href="#">Arquitectura</a></li>
<li><a href="#">Cronologia</a></li>
<li><a href="#">Ofertas</a></li>
<li><a href="#">Comentarios Clientes</a></li>
</ul>
</li>
<li><a href="#">Sellos</a>
<ul>
<li><a href="#">Ventas</a></li>
<li><a href="#">Ofertas</a></li>
<li><a href="#">Intercambios</a></li>
<li><a href="#">Comentarios Clientes</a></li>
</ul>
</li>
<li><a href="#">Subastas</a>
<ul>
<li><a href="#">Subastas etiangui</a></li>
<li><a href="#">Subastas ebay</a></li>
<li><a href="#">Comentarios clientes</a></li>
</ul>
</li>
<li><a href="#">Descargas</a>
<ul>
<li><a href="#">Catalogos</a></li>
<li><a href="#">Localizador</a></li>
<li><a href="#">Publicidad varia</a></li>
<li><a href="#">Series / listados</a></li>
</ul>
</li>
<li><a href="#">Preguntas Frecuentes</a>
<ul>
<li><a href="#">Formas de pago</a></li>
<li><a href="#">Formas de embarque</a></li>
</ul>
</li>
<li><a href="#">Contacto</a>
<ul>
<li><a href="#">Opcion</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>

</body>

</html>

floyde
Jan 31, 2006, 06:22 PM
hmm... well I do have padding on LIs, but I need it to separate the submenu options. Is there a better way to do this?