homepage Welcome to WebmasterWorld Guest from 54.197.65.82
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS menu problem in IE
Old_Nick

5+ Year Member



 
Msg#: 3246787 posted 8:56 pm on Feb 8, 2007 (gmt 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]

 

mep00

10+ Year Member



 
Msg#: 3246787 posted 9:51 pm on Feb 8, 2007 (gmt 0)

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

SuzyUK

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



 
Msg#: 3246787 posted 11:08 pm on Feb 8, 2007 (gmt 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?

Old_Nick

5+ Year Member



 
Msg#: 3246787 posted 6:11 pm on Feb 9, 2007 (gmt 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>

Old_Nick

5+ Year Member



 
Msg#: 3246787 posted 7:23 pm on Feb 9, 2007 (gmt 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]

DanA

10+ Year Member



 
Msg#: 3246787 posted 7:29 pm on Feb 9, 2007 (gmt 0)

it only works with a standards rendering

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

Old_Nick

5+ Year Member



 
Msg#: 3246787 posted 12:26 pm on Feb 10, 2007 (gmt 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>

Old_Nick

5+ Year Member



 
Msg#: 3246787 posted 5:38 pm on Feb 10, 2007 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved