Forum Moderators: open
I've got a pulldown menu on the site I am working on. When you click on the menu title, a few options pop up below the menu. Its a Javascript.
So I'm using CSS to position the pulldown menu under its heading. I've just specified "position: absolute;" for it, which makes it display beautifully in Mozilla.
But in IE? The menu pops up in the middle of the heading...the frustrating thing is that any additional moving styles, (left, margin-left, padding-left...) won't budge it. In fact, they won't budge the Mozilla one either.
Anyone have any clue what might be causing this? Or how I could get around it?
Thanks
Firstly, what doctype are you using? Secondly, have you run your HTML and CSS through a validator?
The IE box model is messy and may be the source of your problems. A short and relevant code snippet of the layer(s) in question may help us to try and spot the problem.
HTH
Doctype is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
I ran it through a validator...No helpful issues there.
As for the snippit. It is organized so that each group of selections in each pulldown menu has class "menu".
.menu { color: #000;
background-color: #D8CEDE;
border: 1px solid #CCC;
position: absolute;
visibility: hidden;
z-index: 3; }
And this would describe one of the top level menus.
<ul id="menuList">
<li class="menubar">
<a href="index.php"
id="aboutActuator"
class="actuator"
accesskey="p">About</a>
<ul id="aboutMenu" class="menu">
<li><a href="/index.php">Mission</a></li>
<li><a href="/history.php">History</a></li>
<li><a href="/links.php">Affiliates</a></li>
</ul>
</li>
</ul>
Thanks for your help.
Also, if a layer is absolutely positioned you should give it a top: and left:/right: style rule.
Any other ideas?
And as a guide trying to debug your code, remember that absolute position is measured from the top left corner of the containing element. That element may be the body, or a parent div or block element of some kind.
But if two of those class="menu" divs are within the same container, and also positioned at the same coordinates, and using the same z-index, then you're telling the browser to render two different elements in exactly the same "place". That's an error, and different browsers may "recover" from that error in a different way.
For this reason, I'm a bit suspiscious of the z-index:3 rule. Assigning the same z-index to all the divs in a class, especially when those divs are positioned absolutely, might lead to exactly this kind of impossible instruction.
You might try creating IDs for each of the absolutely positioned divs (in addition to giving them the .menu class).
In those new IDs, create rules for different z-index positions, so the divs can't "bump into" each other. It would be a relatively simple experiment.
tedster, the menu class is in the HTML code, in the last list element.
<ul id="aboutMenu" class="menu">
<li><a href="/index.php">Mission</a></li>
<li><a href="/history.php">History</a></li>
<li><a href="/links.php">Affiliates</a></li>
I know its hard to understand what is going on. It is kind of my first project, but what really confuses me is that it worked a few days ago, and now it just doesn't. I don't know what I changed to break it.
There are yes, 6 of these menu class items, and they all had the same z-index. But I don't think it was an issue since they were all included in separate <li>'s. Regardless, I changed it so the id="aboutMenu" has the z-index...a different one for each. Still no change.
For the visual clues, go check out the site at www.frpinc.org. Click on one of the menus at top and you'll see that while the horizontal positioning is relatively ok, the vertical positioning is shifted. (In IE only)
While messing around I found some extra nuttyness...
If I change the entire div that the list with the menu description is in to position: absolute, the pulldown menus display correctly! However, it is removed from normal flow, and the rest of the site marches up to sit right on top of it, so it isn't a solution, but it might help.
Here's some more class and id declarations so maybe you guys can get a better idea of what I am trying to do. I was shooting for concise before...I guess I only got "murky".
#menuList { margin: 0px;
padding: 0px; }
#menuList ul { margin: 0px;
padding: 0px; }
#menuList li { display: inline;
list-style: none; }
.menu { color: #000;
background-color: #D8CEDE;
border: 1px solid #CCC;
top: 0px;
left: 0px;
visibility: hidden;
position: absolute; }
#aboutMenu { width: 165px;
z-index: 3; }
cheers
If I change the entire div that the list with the menu description is in to position: absolute, the pulldown menus display correctly! However, it is removed from normal flow, and the rest of the site marches up to sit right on top of it, so it isn't a solution, but it might help.
What happens if you take this a little further, and adjust the rest of the page to compensate? Could you, for instance, give the next relatively positioned element down the page (maybe a content div?) a margin-top tall enough to let the menu display?
Thanks for all your suggestions...
