Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

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

floyde

floyde

macrumors 6502a
Original poster
Apr 7, 2005
808
1
Monterrey, México
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 :eek: . 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 which shows a menu that does work on IE6.

here is the css:
Code: 
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:
Code: 
<!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
 
kgarner

kgarner

macrumors 68000
Jan 28, 2004
1,512
0
Utah
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.
 
floyde

floyde

macrumors 6502a
Original poster
Apr 7, 2005
808
1
Monterrey, México
kgarner said:
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.
Click to expand...
True, but since IE's evil is too obvious it wouldn't attract enough attention, "css is evil" is catchier:D

ebow said:
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.
Click to expand...
I'll give that a try, thanks.
 
Rower_CPU

Rower_CPU

Moderator emeritus
Oct 5, 2001
11,219
2
San Diego, CA
I'd also check out the Son of 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

floyde

macrumors 6502a
Original poster
Apr 7, 2005
808
1
Monterrey, México
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

Rower_CPU

Moderator emeritus
Oct 5, 2001
11,219
2
San Diego, CA
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

floyde

macrumors 6502a
Original poster
Apr 7, 2005
808
1
Monterrey, México
I don't have it online yet but here is the code, it's a bit sloppy because I was "experimenting" a lot:

Code: 
<!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>
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom