css drop down sub menu won't pop out in IE8

alexv55 0 Newbie Poster

16 Years Ago

I am learning to create drop down menu using css. Everything works fine in chrome, FF. But IE 8, the submenus don't pop up. All the info I read on tutorials and googling indicated that using .htc file from peter ned and conditional comment for IE in style sheet should work, but it didn't

I have done an exhaustive googling but didn't see references of others experiencing the same problem, or any fix. I must be doing something wrong that's very subtle. Any help would be greatly appreciated. My very simple html, css, and csshover3_source.htc are shown below. All files are in the same folder/directory on my local machine, which is xp pro.

Thanks

---------- start index.html -----------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Food Online</title>
<link rel="stylesheet" href="style_nav.css" type="text/css" charset="utf-8" />

</head>

<body>
<div id="nav">
<ul>
<li><h2>CSS Drop Down Menus</h2>
<ul>
<li><a href="" title="SEO Consultants Directory">CSS Hover Navigation</a>
<ul>
<li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li>
<li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li>
<li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li>
</ul>
</li>
</ul>
</li>
</ul>

<ul>
<li><h2>Vertical CSS Pop-Out Menu</h2>
<ul>
<li><a href="" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li>
<li><a href="vs7.html" title="Complete Example">tanfa Demo example</a>
<ul>
<li><a href="index.html#">tanfa Tutorial</a><!-- link to seo vertical tut -->	
<ul>
<li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li>
<li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li>	
<li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li>
<li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li>
<li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li>	
<li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

<ul>
<li><h2>Horizontal Drop & Pop Menu</h2>
<ul>
<li><a href="" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li>
<li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample -->
<ul>
<li><a href="index.html#">tanfa Tutorial</a><!-- link to horizontal tut -->	
<ul>
<li><a href="hs1.html" title="Horizontal Menu - Page 1">Stage 1</a></li>
<li><a href="hs2.html" title="Horizontal Menu - Page 2">Stage 2</a></li>	
<li><a href="hs3.html" title="Horizontal Menu - Page 3">Stage 3</a></li>
<li><a href="hs4.html" title="Horizontal Menu - Page 4">Stage 4</a></li>
<li><a href="hs5.html" title="Horizontal Menu - Page 5">Stage 5</a></li>	
<li><a href="hs6.html" title="Horizontal Menu - Page 6">Stage 6</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>	
</div>

</body>
</html>

---------- end index.html -----------

---------- start style_nav.css -----------

#nav {
width: 12em;
background: #eee;
}

#nav ul {
list-style: none;
margin: 0;
padding: 0;
}

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

#nav h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#nav a {
color: #000;
background: #efefef;
text-decoration: none;
}

#nav a:hover {
color: #a00;
background: #fff;
}

#nav li {position: relative;}

#nav ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

/* hide everything except main menu */
#nav ul ul ul {
display: none;
}

/* display everything when clicking on an item under in the main menu. First UL is the menu header*/
#nav ul ul li:hover ul {
display: block;
}

/* hide sub menu under the submenu of the item in of the main menu from above */

#nav ul ul li:hover ul ul{
display: none;
}

/* show the sub menu under the submenu of the item in of the main menu */

#nav ul ul ul li:hover ul{
display: block;
}

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

#nav ul li {float: left; width: 100%;}
#nav ul li a {height: 1%;} 

#nav a, #nav h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
} 
</style>
<![endif]-->

---------- end style_nav.css -----------

---------- start csshover3_source.css -----------

I downloaded source file csshover3_source.htc from
www.xs4all.nl/~peterned/csshover.html#changes (Version 3.00.081222 from )

---------- end csshover3.css -----------

Edited 16 Years Ago by peter_budo because: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)

1 Contributor
0 Replies
220 Views

Dani AI

Generated 7 Months Ago

Short diagnosis and practical fix based on the snippets posted by : the conditional-comment block shown in the CSS file will not be processed there. Internet Explorer’s conditional comments are an HTML feature — they must be placed in the page markup (head), not inside an external .css file. That is the most likely reason the HTC never ran in IE8 even though the code works in other browsers. (stackoverflow.com)

A few implementation rules that commonly trip people and how they apply here:

The behavior: url(...) reference used by HTC files is resolved by IE relative to the HTML document that includes the stylesheet (not relative to the stylesheet file), so the path must be correct from the page’s location (use a root-absolute path if in doubt). (stackoverflow.com)
IE requires HTC files be served with the MIME type text/x-component; without that header IE will ignore the file. Also, loading pages from file:// can prevent HTC behaviors from working — test over HTTP (localhost) and configure the server to return the correct MIME type (for Apache: AddType text/x-component .htc). (tanalin.com)

Quick troubleshooting checklist that normally fixes this exact symptom:

Move the IE-only block into index.html (put an IE conditional that links an IE-only stylesheet or inline style block in the head).
In that IE stylesheet include the behavior: url(...) rule and use a path that’s correct relative to the HTML page (or an absolute URL).
Make sure the server serves .htc as text/x-component, clear IE’s cache, and open F12 Developer Tools to confirm Browser/Document Mode is IE8 Standards (Compatibility View/Intranet settings can force an older mode). These steps resolve most HTC-related submenu issues in IE8. (tanalin.com)

If supporting only IE8+ is acceptable, note that IE7+ supports :hover on non-anchor elements, so the HTC polyfill is generally unnecessary for IE8 and can safely be removed once the page is tested in proper IE8 Standards mode.

Be the first to reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.