navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

Microsoft MVP

 

CSS Vertical Pop Out Menu

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> CSS Vertical Pop Out Menu 		Page: [1]
 
boonedawg

 

Posts: 36
Joined: 4/8/2006
Status: offline

  		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

 

Posts: 14175
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

  		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.

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to boonedawg)
boonedawg

 

Posts: 36
Joined: 4/8/2006
Status: offline

  		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

(in reply to jaybee)
jaybee

 

Posts: 14175
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

  		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.

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to boonedawg)
boonedawg

 

Posts: 36
Joined: 4/8/2006
Status: offline

  		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? :)

boonedawg

(in reply to jaybee)
jaybee

 

Posts: 14175
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

  		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.


< Message edited by jaybee -- 4/8/2006 19:49:40 >

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to jaybee)
jaybee

 

Posts: 14175
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

  		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? :)

boonedawg


No, just my natural inclinations. Super speedy me.

Well sometimes. :)

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to boonedawg)
1eagle

 

Posts: 53
Joined: 1/16/2006
From: the foothills of the Colorado Rockies
Status: offline

  		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

(in reply to jaybee)
boonedawg

 

Posts: 36
Joined: 4/8/2006
Status: offline

  		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. :)

boonedawg

(in reply to 1eagle)
jaybee

 

Posts: 14175
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

  		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.

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to boonedawg)
Tailslide

 

Posts: 6112
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online

  		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.

< Message edited by Tailslide -- 4/9/2006 6:00:55 >

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to jaybee)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> CSS Vertical Pop Out Menu 		Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts


Back to top

  Microsoft Corporation in no way endorses or is affiliated with "OutFront."
  OutFront is published and edited by Thomas Brunt.
  440 Great Circle Dr., St. Matthews, SC 29135.
  © 2008 All Rights Reserved
  Click here to view our privacy statement.