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.dt d">
<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">M enu</h1>
<ul class="menu">
<li>JavaScrip t
<ul><li><a href="#">Web Developers Notes</a></li>
<li><a href="#">DevGur u</a></li>
<li><a href="#">Quirks Mode</a></li>
<li><a href="#">World Wide Web Consortium</a></li>
<li><a href="#">XML.co m</a></li>
<li><a href="#">W3Scho ols</a></li>
<li><a href="#">How to Create</a></li>
<li><a href="#">Mozill a: Using Web Standards</a></li>
<li><a href="#">JavaSc ript Kit</a></li>
</ul>
</li>
<li>Browsers
<ul><li><a href="#">Mozill a Firefox</a></li>
<li><a href="#">NetSca pe</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">e tc etc etc etc etc</div>
</body>
</html> 4 8813
On 2007-01-23, Mark <ma**@comparity .not.example.ne twrote:
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.
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>JavaScrip t
<div style="position :relative">
<ul><li><a href="#">Web Developers Notes</a></li>
<li><a href="#">DevGur u</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:
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.dt d">
<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">M enu</h1>
<ul class="menu">
<li>JavaScrip t
<ul><li><a href="#">Web Developers Notes</a></li>
<li><a href="#">DevGur u</a></li>
<li><a href="#">Quirks Mode</a></li>
<li><a href="#">World Wide Web Consortium</a></li>
<li><a href="#">XML.co m</a></li>
<li><a href="#">W3Scho ols</a></li>
<li><a href="#">How to Create</a></li>
<li><a href="#">Mozill a: Using Web Standards</a></li>
<li><a href="#">JavaSc ript Kit</a></li>
</ul>
</li>
<li>Browsers
<ul><li><a href="#">Mozill a Firefox</a></li>
<li><a href="#">NetSca pe</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">e tc etc etc etc etc</div>
</body>
</html>
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.dt d">
<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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: chart43 |
last post by:
I have question about the technique for css dropdown menus described in
http://www.alistapart.com/articles/horizdropdowns/. Based on an html list,
it has a few items in a 1st order list and further 2nd order lists that
appear to the right when hovering over items in the 1st order.
Anyone figured how to modify to go to n order greater than 2? Bit tricky I
found. I could get the other orders but they all appeared when hovering over
the 1st...
|
by: sandy |
last post by:
This sounds like a frequently asked question, but I
didn't find the answer in any faq I've looked at.
I have a question about the wisdom of using
(javascript generated) dropdown menus.
Question:
Does google interpret javascript?
Or, in other words, are client-side-javascript-generated links
invisible to search engines?
|
by: axlq |
last post by:
I am trying to figure out what is the minimal simplest CSS I can
have to accomplish a row of tabs, with one or more tabs having a
drop-down menu when you hover over it -- AND the whole tab+menu
markup must consist of only nested unordered lists.
I don't care if the hover-dropdown part fails to works in IE -- if
not, the tabs are still clickable links that load a page having the
submenu choices on it anyway. I *do* care that the tabs...
|
by: nishac |
last post by:
Can anyone suggest me how to make my drop down menu work in IE7 too.Its working in other browsers.On mouse over the submenus should be displayed.Am attaching my css code hereby.Anyone please check and give a positive reply.
menu
HOme products support.....
| |
submenus
p1 A
p2 B..
p3...
/*================= STYLES FOR THE PRIMARY NAV...
|
by: Tom |
last post by:
I have taken over admin of a web site (I'm not a web developer by
trade) and the drop down menus are inoperative. There is Javascript
that was written about 6 or 7 years ago
that have some conditions pertaining to the browser in use but I'm not
sure
how to fit Mozilla into the equation. The menus do work in IE 6/7. I
have
not tested other browsers.
The site is www.omegaministry.org. You can view the source code from
| |
by: torquehero |
last post by:
Hi all :)
I have created a horizontal navbar using Xara Menumaker. The Menu items have several dropdown menus. Its a javascript. When the mouse cursor is moved over any menu item, a dropdown list/menu appears. When the page is opened in the browser (as it appears by default), the dropdown menu positions are correctly displayed. But when I scroll the page and then move the mouse over any menu item of the navbar, the dropdown menu is not...
|
by: pedalpete |
last post by:
Hey Gang,
More difficult to describe this than see it, so here's a link which shows the issue I'm having
http://zifimusic.com/testing/broken-hovers.html
I've been looking at this for quite a while, and can't figure out why I can't set the dropdown menus to appear above other elements which also have dropdown menus.
I run multiple suckerfish menus on the page, but these somewhat complex ones are the only ones which have issues.
I...
|
by: Jim |
last post by:
Hi,
I have two questions/problems pertaining to CSS horizontal dropdown
menus and am hoping that someone here can help me out.
(1)
I'm having a problem centering the menu. I picked up the code for
this from a tutorial but that menu was flush-left justified. Not what
I want. Subsequent searches on google on how to center yielded a
|
by: Stan Brown |
last post by:
As usual, it looks right in Firefox 3 but not in IE6.
See http://www.tc3.edu/instruct/sbrown/nicholls/indexgood.htm
for the desired behavior -- when you hover over the second or third
main menu item, a submenu appears and an item can be selected. (The
links don't go anywhere.) This works in FF and IE.
The style sheet is
http://www.tc3.edu/instruct/sbrown/prodrop4.css
But when I include my own style sheet
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |