CSS Menu Nightmare 1

[1DMF]

ok, I upgraded to IE7, I then found my cargo cult menu's no longer worked, it was about time I changed this code anyway so opted to go for a pure CSS option. ditching the JS which was a load of rubbish I'd half hinched anyway!

However, I am having trouble getting the CSS ul/li drop downs to line up.

In IE7 as well as IE6 they appear half way in the middle of the menu ....

http://www.homeloanpartnership.co.uk/IE7.jpg

however in FireFox they look fine ....

http://www.homeloanpartnership.co.uk/FF.jpg

If I apply margin-left:-50%; in IE they are fine but in FF they then shift 50% to the left.

why is this happening and how can i fix it...

here is the CSS

/* CSS Menus - Horizontal CSS Menu with Dropdown and Popout Menus - 20050131 */

*{margin:0;padding:0;border:none;}

body{margin:0.5em;font-family:verdana,tahoma,arial,sans-serif;}

/* Begin CSS Popout Menu */


#menu{
width:100%;
float:left;
}

#menu a, #menu h2{
font:bold 11px/16px arial,helvetica,sans-serif;
display:block;
border-width:1px;
border-style:solid;
border-color:#ccc #888 #555 #bbb;
white-space:nowrap;
margin:0;
padding:1px 0 1px 3px;
}

#menu h2{
color:#fff;
background:#000 url(/images/expand3.gif) no-repeat 100% 100%;
text-transform:uppercase
}

#menu a{
background:#eee;
text-decoration:none;
}

#menu a, #menu a:visited{
color:#000;
}

#menu a:hover{
color:#f00;
background:#ddd;
}

#menu a:active{
color:#060;
background:#ccc;
}

#menu ul{
list-style:none;
margin:0;
padding:0;
float:left;
width:195px;
}

#menu li{
position:relative;
}

#menu ul ul{
position:absolute;
z-index:500;
top:auto;
display:none;
}

#menu ul ul ul{
top:0;
left:100%;
}

/* Begin non-anchor hover selectors */

/* Enter the more specific element (div) selector
on non-anchor hovers for IE5.x to comply with the
older version of csshover.htc - V1.21.041022. It
improves IE's performance speed to use the older
file and this method */

div#menu h2:hover{
background:#000 url(/images/expand3.gif) no-repeat -999px -9999px;
}

div#menu li:hover{
cursor:pointer;
z-index:100;
}

div#menu li:hover ul ul,
div#menu li li:hover ul ul,
div#menu li li li:hover ul ul,
div#menu li li li li:hover ul ul
{display:none;}

div#menu li:hover ul,
div#menu li li:hover ul,
div#menu li li li:hover ul,
div#menu li li li li:hover ul
{
display:block;
}

/* End of non-anchor hover selectors */

/* Styling for Expand */

#menu a.x, #menu a.x:visited{
font-weight:bold;
color:#000;
background:#eee url(/images/expand3.gif) no-repeat 100% 100%;
}

#menu a.x:hover{
color:#a00;
background:#ddd;
}

#menu a.x:active{
color:#060;
background:#ccc;
}

/* End CSS Popout Menu */

thanks 1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

ok I found the problem, I forgot about the IE fix in the actual HTML

<!--[if IE]>
<style type="text/css" media="screen">
#menu{float:none;} /* This is required for IE to avoid positioning bug when placing content first in source. */
/* IE Menu CSS */
/* csshover.htc file version: V1.21.041022 - Available for download from: [URL unfurl="true"]http://www.xs4all.nl/~peterned/csshover.html[/URL] */
body{behavior:url(<tmpl_var name='url_to_domain'>/style/csshover.htc);
font-size:100%; /* to enable text resizing in IE */
}
[b]#menu ul li{float:left;width:100%;}[/b]
#menu h2, #menu a{height:1%;font:bold 0.7em/1.4em arial,helvetica,sans-serif;}
</style>
<![endif]-->

I've highlighted the line causing the problem, however i'm confused.

Surely for IE7 I shouldn't need this csshover.htc JS fix anymore if IE7 is CSS standards compliant, but if I remove this then the menu doesn't work.

Am I to assume that still MS have not been capable of implementing support for CSS properly after all this time?

the CSS menu works fine in FireFox & Opera but not any of the IE browsers including IE7!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

ok - it has fixed it in IE7 but the menu still pops out half way across in IE6 , what is going on?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

why does IE7 require

#menu h2, #menu a{height:1%;font:bold 0.7em/1.4em arial,helvetica,sans-serif;}

for the menu to work? if this isn't added for IE only the drop down menu doesn't appear when you hover over the <h2> heading? - i'm going home MS has given me enough of a headache for a friday, have a good weekend all


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[ChrisHunt]

You'll need all that stuff in your original post for IE6, which isn't going away any time soon, but you may not need any of it for IE7. I suggest you try changing

<!--[if IE]>

to

<!--[if lt IE 7]>

If that absurdly optimistic approach doesn't work, and you still need to hack IE7 to get it to work, you can add a further conditional comment:

<!--[if IE 7]> 
<style>
... crappy hacks here ...
</style>

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[1DMF]

I've managed to get it to work and realised the error of my ways why the menu was showing center!

I had not noticed in the body tag of the HTML <body style="text-align:center"> - that's what happens when you used to use inline CSS and then move to a CSS file, bad habits come back and bite you in the behind!

i'm still unsure why <li> tags display center the way they do though, they seem to behave oddly when centre is applied to them.

I'm sure there is a reasonable explanation i'm not aware of, but the main thing is i've fixed the issue so the menu is more CSS than JS and works in IE6 & IE7.

Getting a headache like that an hour before home time on a Friday is never good, it makes me flap around trying too hard to find a quick solution and end up throwing my toys out of my pram, you end up being counter productive barking up the wrong tree.

Giving up smoking on top of that, well , it's just as well i'm already bald!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.