By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,785 Members | 1,072 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,785 IT Pros & Developers. It's quick & easy.

CSS Dropdown Menus: Firefox vs IE7 positioning

P: n/a
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>
Jan 23 '07 #1
Share this Question
Share on Google+
4 Replies


P: n/a
On 2007-01-23, Mark <ma**@comparity.not.example.netwrote:
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]
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.
Jan 23 '07 #2

P: n/a
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.

Jan 23 '07 #3

P: n/a
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:
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>
Jan 24 '07 #4

P: n/a
Mark wrote :
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/

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.
>
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.
.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.
.menu li:hover ul { display: block; }
.menu a { display: block; /* Firefox Only */ }
Here too: unneeded css rule.
/* 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
Jan 25 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.