homepage Welcome to WebmasterWorld Guest from 54.227.141.230
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Accredited PayPal World Seller

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
CSS menu problem in IE
Old_Nick




msg:3246789
 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




msg:3246836
 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




msg:3246936
 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




msg:3247749
 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




msg:3247852
 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




msg:3247857
 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




msg:3248430
 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




msg:3248636
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved