Menu css | Tankedup-Imaging Dahab

Modified css menu

Moved text-align:center from id="left" parent, to #nav ul, which sorted positioning out.

Added 1px colour to the outside of the background image to help see what's happening with positioning.

Changed padding on #nav li to '0' from 1px. IE now happy, Firefox, Opera etc now offset, but working.

Setting #nav li.sub1 padding to '0' to match #nav li sorts Firefox etc, but TOTALLY screws up IE. An example. Why?

image-menu.css MKII

/* ---------- nav ---------- */

#nav {width:126px; margin:0 auto; font:normal 11px/16px verdana,arial,helvetica,sans-serif;}

              

              #nav ul {display:block; width:126px; list-style:none; text-align:center;}/* width for both, text-align move from left parent sorts position problem */

              

              #nav li {display:block; position:relative; padding:0; z-index:20;}/* ie lines up the rest don't, see padding below */

              

              #nav a {display:block; width:124px; height:36px; background:url("../images/bg/248-red.jpg") 0 0 no-repeat; color:#fff; text-decoration:none;}/* width ie */

              

              /*#nav li>a {width:124px;}*/ /* width gecko */

              

              #nav a:hover {width:124px; height:36px; background:url("../images/bg/248-red.jpg") -124px 0 no-repeat; color:#fff;}

              

              #nav ul ul, #nav li:hover ul ul {display:none;}

              

              #nav li:hover ul, #nav li:hover li:hover ul {display:block;}

/* ---------- position sub menus ---------- */

#nav li.sub1 {padding:1px;}/* only in for IE it hates 0px, the rest now offset but working */

              

              #nav li.sub1 ul {position:absolute; top:3px; left:123px;}/* IE 124px gives a 1px gap to see what the hell is going on! */

              

              #nav li.sub1>ul {left:124px;}/* Proper browsers 125px gives a 1px gap to see what the hell is going on! */

              

              #nav li.sub1 a:hover {width:124px; height:36px; background:url("../images/bg/248-red.jpg") -124px 0 no-repeat;}/* width ie */

              

              #nav li.sub1:hover {z-index:30;}

/* ---------- submenu image and position ---------- */

#nav li a.sub2 {width:124px; height:36px; background:url("../images/bg/248-sub-red.jpg") 0 0 no-repeat; cursor:default;}

              

              #nav li.sub1 a:hover.sub2 {width:124px; height:36px; background:url("../images/bg/248-sub-red.jpg") -124px 0 no-repeat;}

This is the menu css and menu that will not work in IE.

In IE hover on one of the sections for example 'Photo Gallery's'. The first sub menu is ok to hover on (Red Sea One) and open. But the five below it drop out, unless you move the mouse slower than Ronaldo going for a ball in the World Cup!

This is the same menu as far as I can tell, that I've used on the main site, but with an image as background. If you want to compare the two this is the original menu and this is the new css. I've had no trouble with the original menu.

To make both menus work in IE I've got this

#nav {behavior:url("csshover.htc");}

in an ie.css file which is conditionally commented.

Does anyone know where I'm going wrong? I've written the new menu css below as well, in case it's obvious to someone where I've slipped up.

image-menu.css MKI

/* ---------- nav ---------- */

#nav {margin:0 0.5em; margin:0 auto; font:bold 12px/16px verdana,arial,helvetica,sans-serif;}

              

              #nav ul {display:block; width:136px;/* ie and gecko */ list-style:none;}

              

              #nav li {display:block; position:relative; padding:1px; background:#036; z-index:20;}

              

              #nav a {display:block; background:url("images/bg/268.jpg") 0 0 no-repeat; color:#fff; text-decoration:none; width:136px;/* ie */ height:40px;}

              

              #nav li>a {width:auto;/* gecko */}

              

              #nav a:hover {background:url("images/bg/268.jpg") -134px 0 no-repeat; color:#fff; height:40px;}

              

              #nav ul ul {display:none;}

              

              #nav li:hover ul ul {display:none;}

              

              #nav li:hover ul {display:block;}

              

              #nav li:hover li:hover ul {display:block;}

              

              #nav li.sub1 {padding:1px;/* ie hates 0px */ background:#036;}

/* ---------- position sub menus ---------- */

#nav li.sub1 ul {position:absolute; top:0.1em; left:134px;/* ie */}

              

              #nav li.sub1>ul {left:134px;/* gecko */}

              

              #nav li.sub1 a:hover {background:url("images/bg/268.jpg") -134px 0 no-repeat; height:40px;}

              

              #nav li.sub1:hover {z-index:30;}

/* ---------- submenu image and position ---------- */

#nav li a.sub2 {background:url("images/bg/268-sub.jpg") 0 0 no-repeat; cursor:default; height:40px;}

              

              #nav li.sub1 a:hover.sub2 {background:url("images/bg/268-sub.jpg") -134px 0 no-repeat; height:40px;}

Padding

And can anyone tell me why, if I set padding:0; on #nav li and #nav li.sub1, it screws up IE?