CSS is not my friend tonight

[Gidgidonihah]

Okay, so, I'm working on a css popup menu for cougarrentals.com.
Check out http://www.cougarrentals.com/test2.php
Everything is working like it should be there. (minus png tranparency in ie6)

Now, when I put it in the context of the page, it gets ALL jacked up.
Everything works great in FF.  Splendid.

Opera displays the menus way off to the side, so I'm thinking that has something to do with the position being relative to something else?

IE7 displays the menus, just puts them underneath the images below the menu, which makes them useless.  The menu is at z-index 1, so that *should* fix it.  It doesn't.  Go IE.

IE6 however, since it doesn't do :hover with css is run via JS.  Now I don't have a true version of ie6 on my computer (ie6 standalone still uses some ie7 libs, and ie6 on linux is closer, but I still can't be certain everything is the same) but from what I can tell the menus pop up like they should, they just don't disappear. That AND it puts the menu under the pictures like ie7.  I hate IE.

It's now nearly 6am, and instead of studying for my finals tomorrow, I've watched 2 movies and worked on this.  Help me.

[Kjuib]

You will fail, JEDI!

You can try something like this to get rid of the JS while a user is not in IE:
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE')) { ?>
  body { behavior:url(/js/csshover.htc); }
<?php } ?>

Otherwise, here is the css we used at Fishbowl Inventory when i did their drop down menu. Notice the css hax for stupid IE, I hate Microsoft. I hope this helps, sorry I do not have time to go through your css personally.

#menubg {float:left; height:30px; width:498px; margin-right:3px; background-color:#FF7800;}
#menu {margin:1px 0 0 2px; font-weight:bold; color:#fff; z-index:5000; font-size:11px; line-height:20px;}
#menu ul {list-style:none; margin:0; padding:2px 0 0 0; float:left; z-index:5000;}
#menu a {display:block; padding:2px 3px 0 3px; color:#fff; text-decoration:none; z-index:5000;}
#menu a:hover {color:#fff; z-index:5000;}
#menu ul li {position:relative; margin:0; padding:0; z-index:5000; display:block; float:left; padding:1px 2px 0 9px;}
#menu ul ul li {display:block; float:none; padding:1px; margin:0;}
* html #menu ul ul li {display:block; float:none; padding:1px; margin:-3px 0 3px 0;}
#menu ul ul {position:absolute; width:160px; background:#475245; display:block; white-space:nowrap; z-index:5000;}
* html #menu ul ul {position:absolute; top:23px; width:135px; background:#475245; display:block; white-space:nowrap; margin:0; padding: 0 0 2px 0; z-index:5000;}
#menu ul ul a {font-weight:normal; color:#fff; border-left:2px solid #FF7800; text-decoration:none; padding:1px 10px 1px 5px; margin:0 0 1px 0px;}
* html #menu ul ul a {position:absolute; font-weight:normal; color:#fff; text-decoration:none; width:99%; padding:1px 10px 1px 5px; margin:0 0 1px 0; z-index:5000;}
#menu ul ul a:hover {color:#ffefa3; background:#FF7800; text-decoration: none;}
* html #menu ul ul a:hover {width:85%; background:#FF7800; text-decoration: none; z-index:5000;}
#menu ul ul ul {background-color:#475245; position:absolute; top:0; left:98%; z-index:5000;}
#menu ul ul ul a {color:#fff; border-left:2px solid #FF7800;}
#menu ul ul ul a:hover {background-color:#FF7800; color:#ffefa3;}
#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display:none;}
* html #menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display:none; z-index:5000;}
#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display:block; z-index:5000;}

[Jedakiah]

Sir I didn't check your code cause I'm in a similar dilemma right now and bored with code.  But you said the position is relative?  Since the menu is at the top of the page why not make it absolute?

[Mongoose]

I didn't look at the area this was in and thought this would have something to do with iBloodysuck *corrected*.
OMG Kjuib HAX.

[Gidgidonihah]

That's "iBloodysuck" thank you very much.

Okay so bed at 7am and up at 11am != good idea.

Kjuib, thanks for your code, I'll work with it and see what I can do about making this crap work.  I hate IE so much it's painful sometimes. I thought IE7 was going to fix these that and be standards compliant, but noooooooooooooooo, they had to pull a microsoft.

I can't complain too much about opera since they are standards compliant, so I'll just have to fix that.

BTW I tried making it absolute, and, well, it didn't work.  The menu went somewhere and I have no idea where it was.

As for hiding the JS for not in IE with php, I have a whole long php script for browser detection.  But, the browser user agent can't always be trusted.  The 1 good thing about IE though is their conditional statements, so they make it easy to hack for their messed up flaws.

K. I'm oh so tired and won't be working on this tonight.  Finals FTL.

[Gidgidonihah]

Okay, while I was sleeping crackie looked at my css and fixed the problem with the images being on top of the menus.

I'm left with the following two problems:
1. In opera the menu appears way off to the right.
2. When the JS is invoked (hence probably a JS not css problem) the menus pop up, but they don't disappear.

[Gidgidonihah]

Okay, now I'm down to the issue with opera.
The JS thing was because I'm an idiot and didn't have the script in the head.  I had it in an include file that was placed with the menu, not the head.  Oops.

[Kjuib]

Nice work, the menus had a nice feel about them.

also, you are 1 post away from 1000!!! woot!