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

Discussion in 'Web Design and Development' started by floyde, Jan 27, 2006.

  1. macrumors 6502a

    floyde

    Joined:
    Apr 7, 2005
    Location:
    Monterrey, México
    #1
    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
     
  2. macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #2
    hover pseudo-selectors only work on <a> tags in IE
     
  3. thread starter macrumors 6502a

    floyde

    Joined:
    Apr 7, 2005
    Location:
    Monterrey, México
    #3
    thanks, I'll try to change that, do you know what could be causing it to display vertically instead of horizontally?
     
  4. macrumors 68000

    kgarner

    Joined:
    Jan 28, 2004
    Location:
    Utah
    #4
    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.
     
  5. macrumors 6502a

    ebow

    Joined:
    Apr 30, 2001
    Location:
    Trapped in a world before later on
    #5
    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.
     
  6. thread starter macrumors 6502a

    floyde

    Joined:
    Apr 7, 2005
    Location:
    Monterrey, México
    #6
    True, but since IE's evil is too obvious it wouldn't attract enough attention, "css is evil" is catchier:D

    I'll give that a try, thanks.
     
  7. Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #7
    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.
     
  8. thread starter macrumors 6502a

    floyde

    Joined:
    Apr 7, 2005
    Location:
    Monterrey, México
    #8
    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?
     
  9. Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #9
    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.
     
  10. thread starter macrumors 6502a

    floyde

    Joined:
    Apr 7, 2005
    Location:
    Monterrey, México
    #10
    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>
    
     
  11. thread starter macrumors 6502a

    floyde

    Joined:
    Apr 7, 2005
    Location:
    Monterrey, México
    #11
    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?
     

Share This Page