IE6 vs IE7 - Serious Help Needed 1

[1DMF]

I cannot for the life of me work out why I can't get a simple menu to work in IE6 & IE7.

The following menu is what I have...

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

body{
    font-family:arial,verdana,tahoma,sans-serif;
    font-size: 12pt;
}

/* Begin CSS Popout Menu */

/* Root = Vertical, Secondary = Vertical */
ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
  width: 160px; /*For KHTML*/
  list-style: none;
}

ul#navmenu li {
  display: block !important; /*For GOOD browsers*/
  display: inline; /*For IE*/
  position: relative;
}

/* Root Menu */
ul#navmenu a {
  border: 1px solid #FFF;
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  padding: 0 6px;
  display: block;
  background: #EEE;
  color: #666;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
  color: #FFF;
}

ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
}

[b]
ul#navmenu ul {
 left:100%;
}

ul#navmenu ul ul {
  left: 50%;
}
[/b]

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
  display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
  display: block;
}

[b]
ul#navmenu ul ul {
  width: 300px;
}
[/b]

the bits in bold i've added however in IE7 for some reason I have to give the first ul a 100% left for it to line up, however in IE6 the ul when shown is 50% floating off to the right (eg there is a big gap), it seems IE7 & IE6 need different left:% percentages for the menu to work, how do I apply CSS to an element depending on browser version of it within the CSS itself?

also in IE6 ul#navmenu ul ul { width: 300px;} works fine but in IE7 the third popout menu is still the same width as the others (160px) why won't IE7 apply this CSS to the element.

also in IE6 each menu item (row) are tight up against each other yet in IE7 there is a small gap between each item.

here is the site I'm taking the menu from and they seem to have the same problem with their own menu with the gap in IE7.

http://solardreamstudios.com/_img/learn/css/cssmenus/index-vert.html

alternatively can someone point me to a three level popout menu that works in IE6 and IE7 as i'm really starting to loose the plot here! , I've never before forced my users to use a specific browser but i'm getting to the point that I might have too!





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

 

[ChrisHunt]

This is the fourth thread you've started on this issue in the last two days. You're more likely to get a useful outcome if you concentrate on a single thread rather than spinning off all these duplicates.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[1DMF]

ok - worked it out, I guess sometimes just writing a post about the problem helps you to solve it

I was being an idiot (I know no change there then!)

It has also taught me a good lesson about why not to use a table for layout, the menu is in a table and guess what, the table cell had align="center" on it, I guess this messes up the child <ul> elements, although they float out of the the parent TD, the align was making them go all screwy and on top of it all it was behaving differently in IE6 vs IE7 , which really wasn't helping me!

well I got there in the end, it works grand in IE6 & IE7, right, now I can get on with what I was doing before everything broke in IE7!





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

 

[1DMF]

Chris - If you look they are two compleletly different menus, from different sources, I gave up on the first one and ended up using this one instead.

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

 

[ChrisHunt]

That reinforces my point. If you had one thread where you posted your menu, got some response, gave up on that menu and tried another, got more response, rinse & repeat - we could follow the whole story.

When you've got lots of similar threads, people look at them and think "That's 1DMF and his menu again, I've already dealt with that elsewhere".

You'll also be wasting people's time replying to those other threads and fixing problems that you're no longer having.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[1DMF]

I see what you mean, ok on that note can you explain why adding this line to my hover makes the alignment of the UL go all over the place?

    background:#eeeeee url(/images/expand3.gif') no-repeat 100% 100%;

It seems as soon as you apply a background image and position the image 100% 100%, everything else goes all over the shop?

all that should do is place the image 100% right & 100% bottom, but it's messing evedrything up, why?




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

 

[eyec]

drop the 100% & see if that clears the prob

 

[1DMF]

it solved the alignment problem, but then the image isn't where I want it, oh well , not a big enough issue to care, that will have to do! thanks.

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

 

[eyec]

there is an IE hack for positioning things. do a search on google or some of the CSS sites for the hack.