CSS Vertical Pop Out Menu (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

boonedawg -> CSS Vertical Pop Out Menu (4/8/2006 17:23:14)

I have a CSS vertical pop out menu that works well in Firefox, but for some reason it's not working in Internet Explorer [:(]. Here is the code I am using for the menu;

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">
<head>
<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="vertMenu.css" rel="stylesheet" type="text/css" media="all" />
<link href="textStyles2.css" rel="stylesheet" type="text/css" media="all" />

</head>

<body>
<div id="nav">
<ul class="level1">
<li><a href="#">» Link</a></li>
<li class="submenu"><a href="#">» Link</a>
<ul class="level2">
<li><a href="#">» Link</a></li>
<li><a href="#">» Link</a></li>
<li><a href="#">» Link</a></li>
<li><a href="#">» Link</a></li>
</ul>
</li>
<li><a href="#">» Link</a></li>
<li class="submenu"><a href="#">» Link</a>
<ul class="level2">
<li><a href="#">» Link</a></li>
<li class="submenu"><a href="#">» Link</a></li>
<li><a href="#">» Link</a></li>
<li><a href="#">» Link</a></li>
</ul>
</li>
<li><a href="#">» Link</a></li>
</ul>
</div>
</body>
</html>
------------------------------------------------------------------------

CSS Code
------------------------------------------------------------------------
div#nav {
float: left;
padding: 0;
margin-top: 5px;
margin-left: 5px;
width: 205px;
background: #ffffff;
}

div#nav ul {
padding: 0;
margin: 0;
border-top: 1px dotted #e3e3e3;
border-left: 1px dotted #e3e3e3;
border-right: 1px dotted #e3e3e3;
width: 205px;
}

div#nav ul.level2 {
background: #ffffff;
}

div#nav li {
position: relative;
list-style: none;
margin: 0;
border-bottom: 1px dotted #e3e3e3;
}

div#nav li:hover {
background: #f7f7f7;
}

div#nav li.submenu {
background: #ffffff;
}

div#nav li.submenu:hover {
background: #f7f7f7;
}

div#nav li a {
display: block;
padding: 1px 5px;
margin: 0;
text-decoration: none;
width: 205px;
}

div#nav>ul a {
width: auto;
}

div#nav ul ul {
position: absolute;
top: 0;
left: 205px;
display: none;
}

div#nav ul.level1 li.submenu:hover ul.level2 {
display:block;
}

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
}
</style>
<![endif]-->
------------------------------------------------------------------------

Can anyone help me out with this, or show me what I need to fix to get this menu to work in IE? Any help would be greatly appreciated. Thanks in advance [:)].

boonedawg



jaybee -> RE: CSS Vertical Pop Out Menu (4/8/2006 18:38:57)

I think you'll find that the hover is the problem. IE doesn't like it.

There are ways to force IE to like it a bit more and there are some ideas here.

The other alternative is to wait for the next version of IE in which, they assure us, they have fixed this.

Holding your breath waiting for this though is not recommended unless you suit blue. [;)]

Welcome to Outfront.



boonedawg -> RE: CSS Vertical Pop Out Menu (4/8/2006 18:56:03)

Thanks Jaybee for your input. I am using the latest version of the Whatever: hover still with no luck [:(].

boonedawg



jaybee -> RE: CSS Vertical Pop Out Menu (4/8/2006 19:34:23)

I have to admit I've not played with Whatever Hover but there are a couple of peeps on here who have. If you wait for them to come online, probably Monday, they might be able to sort you out.



boonedawg -> RE: CSS Vertical Pop Out Menu (4/8/2006 19:38:17)

Thanks again [;)]. Now I see why you are a 5 star moderator, lightning fast responses. Does that have anything to do with your superhero costume? [:D]

boonedawg



jaybee -> RE: CSS Vertical Pop Out Menu (4/8/2006 19:42:28)

This one works in both but it's a bit jumpy in IE.

Take a look at the source behind it and see if it'll work with your .htc

Just a thought..............

Is this right?

quote:

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
}
</style>
<![endif]-->



If you just put the call for the hover in the normal body then the other browsers should attach it but ignore it.



jaybee -> RE: CSS Vertical Pop Out Menu (4/8/2006 20:04:24)

quote:

ORIGINAL: boonedawg

Thanks again [;)]. Now I see why you are a 5 star moderator, lightning fast responses. Does that have anything to do with your superhero costume? [:D]

boonedawg


No, just my natural inclinations. Super speedy me.

Well sometimes. [;)]



1eagle -> RE: CSS Vertical Pop Out Menu (4/8/2006 21:54:25)

Hello boonedawg,

You may want to take a look at Stu Nichols css site he has done some great things with css.

www.cssplay.co.uk/menus/index.html



boonedawg -> RE: CSS Vertical Pop Out Menu (4/8/2006 23:36:45)

1eagle, thank you so much. This is one of the best CSS tutorial websites I have seen. I will be sure to use one or more of these techniques. [sm=yupi3ti.gif]

boonedawg



jaybee -> RE: CSS Vertical Pop Out Menu (4/9/2006 4:53:45)

Agreed, Stu is THE MAN!!! Be careful though, a lot of his stuff is truly cutting edge and doesn't work in all browsers but he has some amazing demos in there.

I've tried out quite a few of his techniques with some success and Debs who is a mod on here (c1sissy) has done work with him.

He usually tells you what works with which browser so read the notes carefully. The other site you may find helpful if you've not already found it is Listamatic.



Tailslide -> RE: CSS Vertical Pop Out Menu (4/9/2006 5:39:08)

I've just used whatever:hover to force IE to show hover and focus effects in a form and I've used this method - slight variation that will just show the script to IE6 and earlier as hover should work with IE7. 

<!--[if lt IE 7]>
<style type="text/css">
body {behavior: url(scripts/csshover.htc);}
</style>
<![endif]-->


If you're still having problems then a trick I've recently heard is to set up a neutral hover and possibly active rule for your menu links which seems to kickstart IE into behaving itself. Something like: 

ul#navlist a:hover, ul#navlist a:active { padding: 0; }


or something else that won't actually effect the look of the menu but wakes IE up.

BTW - Jaybee's right about CSSPlay - it is wonderful and he's a genius but make sure you read the comments on a demo before trying to implement it just in case.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625