Welcome to WebmasterWorld Guest from 23.22.220.37

Forum Moderators: not2easy

Message Too Old, No Replies

CSS menu problem in IE

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

New User

5+ Year Member

joined:Dec 21, 2006
posts:11
votes: 0


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]

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

Full Member

10+ Year Member

joined:Dec 25, 2003
posts: 269
votes: 0


Prior to IE7, IE only supported :hover on anchors (and then, iirc, only those with a href).
11:08 pm on Feb 8, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


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?

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

New User

5+ Year Member

joined:Dec 21, 2006
posts:11
votes: 0


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>

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

New User

5+ Year Member

joined:Dec 21, 2006
posts:11
votes: 0


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]

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

Preferred Member

10+ Year Member

joined:Nov 29, 2003
posts:351
votes: 0


it only works with a standards rendering

First, you must change your DOCTYPE to be in Standards Compliant Mode.
12:26 pm on Feb 10, 2007 (gmt 0)

New User

5+ Year Member

joined:Dec 21, 2006
posts:11
votes: 0


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>
5:38 pm on Feb 10, 2007 (gmt 0)

New User

5+ Year Member

joined:Dec 21, 2006
posts:11
votes: 0


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