CSS Dropdown Menus: Firefox vs IE7 positioning

I have developed a generic list-based css menu. It works both in IE7 and
Firefox, and with the help of Peter Nederlof's csshover.htc, with older
IE versions.

I have included a simplified version below. The list goes something like
this:

<ul class="menu">
<li>Menu 1
<ul> <li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Menu 2
<ul> <li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>

The question is this: my style for the nested ul includes
position: absolute;

Firefox positions the ul below the li, while IE7 positions it to its
right. Using position: relative positions them both correctly, but
destroys the menu effect.

Is there a trick to getting IE7 to position the ul below the li?

Below is the code I am using.

Thanks

Mark

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Menu</title>
<style type="text/css">
/* Essential */
.break { clear: left; }
.menu li { display: block; /* FireFox */ float: left; }
.menu li ul { position: absolute; display: none; }
.menu li ul li { float: none; display: block; }
.menu li:hover ul { display: block; }
.menu a { display: block; /* Firefox Only */ }
/* Visual */
.menu li {
background-color: lightblue;
padding: 4px;
border: solid 1px;
font-family: sans-serif;
}
.menu li ul {
padding-left: 0px; /* FireFox */
margin-left: 0px; /* IE */
border: solid 1px;
margin: 4px 0px 0px -5px;
}
.menu li ul li {
padding: 0px; border: 0px;
}
.menu li:hover {
background-color: pink;
}
.menu a {
text-decoration: none;
}
</style>
</head>
<body>
<h1 class="intro">Menu</h1>
<ul class="menu">
<li>JavaScript
<ul><li><a href="#">Web Developers Notes</a></li>
<li><a href="#">DevGuru</a></li>
<li><a href="#">QuirksMode</a></li>
<li><a href="#">World Wide Web Consortium</a></li>
<li><a href="#">XML.com</a></li>
<li><a href="#">W3Schools</a></li>
<li><a href="#">How to Create</a></li>
<li><a href="#">Mozilla: Using Web Standards</a></li>
<li><a href="#">JavaScript Kit</a></li>
</ul>
</li>
<li>Browsers
<ul><li><a href="#">Mozilla Firefox</a></li>
<li><a href="#">NetScape</a></li>
<li><a href="#">Opera</a></li>
<li><a href="#">Apple Safari</a></li>
<li><a href="#">Old Internet Explorer</a></li>
</ul>
</li>
</ul>
<div class="break">etc etc etc etc etc</div>
</body>
</html>

On 2007-01-23, Mark <mark@comparity.not.example.netwrote:

Quote:

I have developed a generic list-based css menu. It works both in IE7 and
Firefox, and with the help of Peter Nederlof's csshover.htc, with older
IE versions.

[snip]

Quote:

The question is this: my style for the nested ul includes
position: absolute;
>
Firefox positions the ul below the li, while IE7 positions it to its
right. Using position: relative positions them both correctly, but
destroys the menu effect.
>
Is there a trick to getting IE7 to position the ul below the li?

You're relying on the computed "static" values of top and left for
absolutely positioned elements-- the browser is supposed to put them
roughly where they would have gone had they not been positioned, but is
free to make a guess at that position.

You should get more consistent results if you set top and left on .menu
li ul. Setting .menu to position: relative will make those top and left
positions relative to .menu rather than to the viewport, which will
probably be more helpful.

Hi, Mark

You can quickly fix your meny by adding <div
style="position:relative">. This <divwill establish container-block
for the descendant absolutelly postioned <ul>.
(http://www.w3.org/TR/2005/WD-CSS21-2...suren.html#q28)

= = = = = =
<li>JavaScript
<div style="position:relative">
<ul><li><a href="#">Web Developers Notes</a></li>
<li><a href="#">DevGuru</a></li>
...
</ul>
</div>
</li>
= = = = = =

- Alex.

P.S. But your menu does not work under IE6 due to the lack of li:hover
support.

Thanks, Ben and (forgroupsonly) for your comments.

I did find an alternative method, which is not quite as pure as I would
have liked, but it works:

I have include a <br/after each menu:

<ul class="menu">
<li>Menu 1<br/>
<ul><li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Menu 2<br/>
<ul><li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>

I then use the visibility instead of the display attribute:

.menu li ul { position: absolute; visibility: hidden; }
.menu li:hover ul { visibility: visible; }

That seems to do the trick.

I haven't tested my fixed version on IE6, but I know that the unfixed
version worked, as long as I included csshover.htc

Thanks,

Mark

Mark wrote:

Quote:

I have developed a generic list-based css menu. It works both in IE7 and
Firefox, and with the help of Peter Nederlof's csshover.htc, with older
IE versions.
>
I have included a simplified version below. The list goes something like
this:
>
<ul class="menu">
<li>Menu 1
<ul <li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Menu 2
<ul <li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
>
The question is this: my style for the nested ul includes
position: absolute;
>
Firefox positions the ul below the li, while IE7 positions it to its
right. Using position: relative positions them both correctly, but
destroys the menu effect.
>
Is there a trick to getting IE7 to position the ul below the li?
>
Below is the code I am using.
>
Thanks
>
Mark
>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Menu</title>
<style type="text/css">
/* Essential */
.break { clear: left; }
.menu li { display: block; /* FireFox */ float: left; }
.menu li ul { position: absolute; display: none; }
.menu li ul li { float: none; display: block; }
.menu li:hover ul { display: block; }
.menu a { display: block; /* Firefox Only */ }
/* Visual */
.menu li {
background-color: lightblue;
padding: 4px;
border: solid 1px;
font-family: sans-serif;
}
.menu li ul {
padding-left: 0px; /* FireFox */
margin-left: 0px; /* IE */
border: solid 1px;
margin: 4px 0px 0px -5px;
}
.menu li ul li {
padding: 0px; border: 0px;
}
.menu li:hover {
background-color: pink;
}
.menu a {
text-decoration: none;
}
</style>
</head>
<body>
<h1 class="intro">Menu</h1>
<ul class="menu">
<li>JavaScript
<ul><li><a href="#">Web Developers Notes</a></li>
<li><a href="#">DevGuru</a></li>
<li><a href="#">QuirksMode</a></li>
<li><a href="#">World Wide Web Consortium</a></li>
<li><a href="#">XML.com</a></li>
<li><a href="#">W3Schools</a></li>
<li><a href="#">How to Create</a></li>
<li><a href="#">Mozilla: Using Web Standards</a></li>
<li><a href="#">JavaScript Kit</a></li>
</ul>
</li>
<li>Browsers
<ul><li><a href="#">Mozilla Firefox</a></li>
<li><a href="#">NetScape</a></li>
<li><a href="#">Opera</a></li>
<li><a href="#">Apple Safari</a></li>
<li><a href="#">Old Internet Explorer</a></li>
</ul>
</li>
</ul>
<div class="break">etc etc etc etc etc</div>
</body>
</html>

Mark wrote :

Quote:

I have developed a generic list-based css menu. It works both in IE7 and
Firefox, and with the help of Peter Nederlof's csshover.htc, with older
IE versions.
>
I have included a simplified version below. The list goes something like
this:
>
<ul class="menu">
<li>Menu 1
<ul <li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Menu 2
<ul <li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
>
The question is this: my style for the nested ul includes
position: absolute;
>
Firefox positions the ul below the li, while IE7 positions it to its
right.

MSIE7 has defined, clearly documented and well reported bugs on its
collapse adjoining margins algorithm:
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

Quote:

Using position: relative positions them both correctly, but
destroys the menu effect.
>
Is there a trick to getting IE7 to position the ul below the li?
>
Below is the code I am using.

Please always post an url, not code.

Quote:

>
Thanks
>
Mark
>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Menu</title>
<style type="text/css">
/* Essential */
.break { clear: left; }
.menu li { display: block; /* FireFox */ float: left; }

Why display: block? If you want to set list-item as block, then use
<div>s instead of redefining list-item. If you want to remove the
list-item bullet, then use
ul {list-style-type: none;}
which is better. The nested lists structure will degrade more gracefully
in non-css-capable browsers and in buggy browsers.

Quote:

.menu li ul { position: absolute; display: none; }
.menu li ul li { float: none; display: block; }

Here too: why not just declare only once
ul {list-style-type: none;}
and then remove that display: block for list-items.

Quote:

.menu li:hover ul { display: block; }
.menu a { display: block; /* Firefox Only */ }

Here too: unneeded css rule.

Quote:

/* Visual */
.menu li {
background-color: lightblue;
padding: 4px;
border: solid 1px;
font-family: sans-serif;
}
.menu li ul {
padding-left: 0px; /* FireFox */
margin-left: 0px; /* IE */
border: solid 1px;
margin: 4px 0px 0px -5px;

You already defined margin-left: 0px and here, you are redefining that
property to -5px. So, the declaration
margin-left: 0px;
was unneeded.

Gérard
--
remove blah to email me

CSS Dropdown Menus: Firefox vs IE7 positioning

re: CSS Dropdown Menus: Firefox vs IE7 positioning

re: CSS Dropdown Menus: Firefox vs IE7 positioning

re: CSS Dropdown Menus: Firefox vs IE7 positioning

re: CSS Dropdown Menus: Firefox vs IE7 positioning

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about