1. Home
  2. Forums Index
  3. Browser Side / CSS 6:43 am May 22, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

CSS menu problem in IE

         

Old_Nick

8:56 pm on Feb 8, 2007 (gmt 0)

10+ Year Member



I have CSS drop down menu that works in Opera and Firefox BUT not in IE. Link to page with menu in my profile so see homepage.

CSS :
html, body, ul, ol, li, p, h1, h2, a, div {
margin: 0px;
padding: 0px;
border: 0px;

#menu {
margin-top: 0px;
float: left;

}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
text-align: center;

}
#menu a {
font: 16px Times New Roman;
display: block;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
margin: 0;
padding: 3px 2px;
font-weight: bold;
color: #0B76AC;
text-decoration: none;
}

#menu a:hover {
color: #ffffff;
background: #6BC0E0;
}

#menu li {position: relative;
}

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

#menu ul ul {
position: absolute;
left: 0;
z-index: 500;
background: #efefef;
}

div#menu ul ul {
display: none;
}

div#menu ul li:hover ul
{display: block;}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

/* -------------- layout ------------------ */

body {

behavior: url(csshover.htc);
background-color: #ffffff;
}

I hoped to overtake IE with this:

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#leftmenu a {
border-bottom: 0px;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#header {
margin-bottom: -2px;
}
</style>
<![endif]-->

but without positive result.

Thank you in advance for your help with IE.

[edited by: Old_Nick at 9:13 pm (utc) on Feb. 8, 2007]

mep00

9:51 pm on Feb 8, 2007 (gmt 0)

10+ Year Member



Prior to IE7, IE only supported :hover on anchors (and then, iirc, only those with a href).

SuzyUK

11:08 pm on Feb 8, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



What Doctype are you using?

it (the behaviour file) 'mimics' complaint rendering behaviour insofar as it only works with a standards rendering one, could it be that?

Old_Nick

6:11 pm on Feb 9, 2007 (gmt 0)

10+ Year Member



This document itself:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>TEST
</title>
<meta name="robots" content="index,follow" >
<meta name="keywords" content="" >
<meta name="description" content="" >
<style type="text/css" media="screen">
<!--
@import url(stylenew.css);
-->
</style>
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#leftmenu a {
border-bottom: 0px;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#header {
margin-bottom: -2px;
}
</style>
<![endif]-->
</head>

<body>

<!--MENU BELOW WORKS IN IE -->

<table frame="void" background="bgbutton.jpg" cellpadding="0" cellspacing="0" border="1" width="100%">
<tr><td height="10" ></td></tr>
<tr>

<td height="30" width="100%">

<div id="menu">

<ul style="width: 143px;" >
<li><a href="/free-directory-list.html" style="border-left: 0px;">MAIN</a>
</li>
</ul>
<ul style="width: 143px;">
<li><a href="/free-directory-list.html" style="border-left: 0px;">CRIMEA</a>
</li>
</ul>
<ul style="width: 143px;" >
<li><a style="border-left: 0px;" href="#" title="Niche Directories">CITIES</a>
<ul style="width: 143px;">
<li><a href="/blog-directory-list.html" title="Blog Directory List">Bakhchisaray</a></li>
<li><a href="/auto-directory-list.html" title="Automotive Directory List">Balaclava</a></li>

</ul>
</li>
</ul>
<ul style="width: 140px;" >
<li><a style="border-left: 0px;" href="#" title="Niche Directories">TOUR SERVICES</a>
<ul style="width: 143px;">
<li><a href="#*$!.html" title="">Греция</a></li>
<li><a href="#*$!.html" title="">Чехия</a></li>

</ul>
</li>
</ul>
<ul style="width: 143px;" >
<li><a style="border-left: 0px;" href="#" title="">USEFUL INFO</a>
<ul style="width: 143px;">
<li><a href="xx.html" title="Blog Directory List">Греция</a></li>
<li><a href="#*$!.html" title="Automotive Directory List">Чехия</a></li>
</ul>
</li>
</ul>

<ul style="width: 143px;" >
<li><a style="border-left: 0px;" href="#" title="">TRAVEL FORUM</a>
<ul style="width: 143px;">
<li><a href="#*$!.html" title="">Греция</a></li>
<li><a href="#*$!.html" title="">Чехия</a></li>

</ul>
</li>
</ul>

<ul style="width: 143px;" >
<li><a style="border-left: 0px;" href="#" title="">CONTACT US</a>
</li>
</ul></div>

</td></tr>
<tr><td height="10"></td></tr>
</table>

<!--MENU BELOW NOT WORKING IN IE -->

<table frame="void" background="bgbutton.jpg" cellpadding="0" cellspacing="0" border="1" width="100%">
<tr><td height="10" colspan="7" ></td></tr>
<tr>

<td height="30" width="14%" background="but.jpg">

<div id="menu">

<ul style="width: 100%;" >
<li><a href="#*$!.html" style="border-left: 0px;">MAIN</a>
<ul style="width: 143px;">
<li><a href="#*$!.html" title="">Bakhchisaray</a></li>
<li><a href="#*$!.html" title="">Balaclava</a></li>
</ul>
</li>
</ul></div></td>

<td height="30" width="14%" background="but.jpg"><div id="menu">
<ul style="width: 100%;" >
<li><a href="#*$!.html" style="border-left: 0px;">CRIMEA</a>
</li>
</ul></div>
</td>

<td height="30" width="14%" background="but.jpg"><div id="menu">
<ul style="width: 100%;" >
<li><a style="border-left: 0px;" href="#" title="">CITIES</a>
<ul style="width: 143px;">
<li><a href="#*$!.html" title="">Bakhchisaray</a></li>
<li><a href="#*$!.html" title="">Balaclava</a></li>

</ul>
</li>
</ul></div></td>

<td height="30" width="14%" background="but.jpg"><div id="menu">
<ul style="width: 100%;" >
<li><a style="border-left: 0px;" href="#" title="">TOUR SERVICES</a>
<ul style="width: 143px;">
<li><a href="#*$!.html" title="">Греция</a></li>
<li><a href="#*$!.html" title="">Чехия</a></li>

</ul>
</li>
</ul></div></td>

<td height="30" width="14%" background="but.jpg"><div id="menu">
<ul style="width: 100%;" >
<li><a style="border-left: 0px;" href="#" title="">USEFUL INFO</a>
<ul style="width: 143px;">
<li><a href="#*$!.html" title="">Греция</a></li>
<li><a href="#*$!.html" title="x">Чехия</a></li>

</ul>
</li>
</ul></div></td>

<td height="30" width="14%" background="but.jpg"><div id="menu">
<ul style="width: 100%;" >
<li><a style="border-left: 0px;" href="#" title="">TRAVEL FORUM</a>
<ul style="width: 143px;">
<li><a href="#*$!.html" title="">Греция</a></li>
<li><a href="#*$!.html" title="">Чехия</a></li>

</ul>
</li>
</ul></div></td>

<td height="30" width="13%" background="but.jpg"><div id="menu">

<ul style="width: 100%;" >
<li><a style="border-left: 0px;" href="#" title="">CONTACT US</a>
</li></ul></div></td></tr>
<tr><td height="10" colspan="7"></td></tr>
</table>

</body>
</html>

Old_Nick

7:23 pm on Feb 9, 2007 (gmt 0)

10+ Year Member



When I'm putting all my lists within single row <td></td> it works in IE, but I want to put one list(with submenu) per one <td></td>.
For example
<tr>
<td>
<ul><li><ul><li></li></ul></li></ul>
</td>
<td>
<ul><li><ul><li></li></ul></li></ul>
</td>
</tr>

Maybe <snip> will tell you more ...

[edited by: Robin_reala at 8:51 pm (utc) on Mar. 8, 2007]
[edit reason] URL removal as per TOS #13 [/edit]

DanA

7:29 pm on Feb 9, 2007 (gmt 0)

10+ Year Member



it only works with a standards rendering

First, you must change your DOCTYPE to be in Standards Compliant Mode.

Old_Nick

12:26 pm on Feb 10, 2007 (gmt 0)

10+ Year Member



You suppose this is because of wrong DOCTYPE and IE goes to quirk mode? I have tried various DOCTYPEs(as for me itis deep ferest) but without any result. The fanny thing is that behaivior file works in IE but only when all my lists placed within single cell <td></td>

Old_Nick

5:38 pm on Feb 10, 2007 (gmt 0)

10+ Year Member



Thanks to everyone who posted suggestions. Problem disappeared after deleting list within single <td></td>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 6:43 am May 22, 2026