Dear all, I have the following in a web page: A menu (let's call it Menu1) with several links and by its side another menu (Menu2) with some links also. Menu2 is a drop down menu that drops down on top of Menu1 when you click the Menu2 button. Well, it works for Internet Explorer but not for Firefox. The problem: when I try to click on Menu1's links they are not clickeable .............. My divs: #divMenu1 {position:relative; left:701px; top:58px; width:234px; height:485px; z-index:1;} #divMenu2 {position:absolute; width:242px; height:218px; top:76px; left:705px; z-index:2;} Obviously if I do: #divMenu1 {position:relative; left:701px; top:58px; width:234px; height:485px; z-index:2;} #divMenu2 {position:absolute; width:242px; height:218px; top:76px; left:705px; z-index:1;} I cannot click on Menu2's links because the drop down disappears behind Menu1. How can I solve it?? Below, the code. Thanks a lot in advance! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <style type="text/css"> <!-- html {background-color:transparent;} body { background-color:transparent; margin-left: 0px; margin-top: 0px; } #Menu1 {position:relative; left:701px; top:58px; width:234px; height:485px; z-index:1; background-color:yellow;} #Menu2 {position:absolute; width:0px; height:0px; top:76px; left:705px; z-index:2;} --> </style> </head> <body> <div id="Menu1"> <a href="http://www.yahoo.es" target="_blank">Can click this link in FF0</a><br> <a href="http://www.yahoo.it" target="_blank">CANNOT click this link in FF0</a><br> <a href="http://www.yahoo.fr" target="_blank">CANNOT click this link in FF1</a><br> <a href="http://www.yahoo.se" target="_blank">CANNOT click this link in FF2</a><br> <a href="http://www.yahoo.es" target="_blank">CANNOT click this link in FF3</a><br> <a href="http://www.yahoo.it" target="_blank">CANNOT click this link in FF4</a><br> <a href="http://www.yahoo.fr" target="_blank">CANNOT click this link in FF5</a><br> <a href="http://www.yahoo.se" target="_blank">CANNOT click this link in FF6</a><br> <a href="http://www.yahoo.es" target="_blank">CANNOT click this link in FF7</a><br> <a href="http://www.yahoo.it" target="_blank">CANNOT click this link in FF8</a><br> <a href="http://www.yahoo.fr" target="_blank">CANNOT click this link in FF9</a><br> <a href="http://www.yahoo.se" target="_blank">Can click this link in FF1</a><br> <a href="http://www.yahoo.es" target="_blank">Can click this link in FF2</a><br> <a href="http://www.yahoo.it" target="_blank">Can click this link in FF3</a><br> <a href="http://www.yahoo.fr" target="_blank">Can click this link in FF4</a><br> <a href="http://www.yahoo.se" target="_blank">Can click this link in FF5</a><br> <a href="http://www.yahoo.es" target="_blank">Can click this link in FF6</a><br> <a href="http://www.yahoo.it" target="_blank">Can click this link in FF7</a><br> <a href="http://www.yahoo.fr" target="_blank">Can click this link in FF8</a><br> <a href="http://www.yahoo.se" target="_blank">Can click this link in FF9</a><br> <a href="http://www.yahoo.es" target="_blank">Can click this link in FF10</a><br> <a href="http://www.yahoo.it" target="_blank">Can click this link in FF11</a><br> <a href="http://www.yahoo.fr" target="_blank">Can click this link in FF12</a><br> <a href="http://www.yahoo.se" target="_blank">Can click this link in FF13</a><br> </div> <div id="Menu2"> <iframe src="http://www.vlogplaza.com/test/flash/menu.html" id="ifrmenu2" name="ifrmenu2" scrolling="no" width="262px" height="218px" frameborder="0" allowtransparency="yes"> </iframe> </div> </body> </html> Code (markup):
Lots of problems with iFrames, Flash, and z-index. IE treats iFrames like something that's always sitting on top of the rest of the page, like a new layer that the page can never reach, so I'm surprised you can still click the links in menu 1 in IE if menu1 is covered by menu 2's iframe. There's no reason for either of them to be positioned so harshly. How are you trying to make them look on the page? Why are either of them positioned? Relative positioning will always bite you in the butt until you realise that you are NOT moving that div with pos: rel and some coordinates-- you are moving a picture of that div, the visual representation. The actual div is still in the same spot as it was before you said "position: relative;" and in modern browsers (FF, Opera, Safari, Konqueror) know the position's different and that the actual links are maybe somewhere else on the page. Screenshot or image of what you want these menus to look like? I would always let the document help me position stuff on a page. Setting coordinates on everything and positioning them manually like that is going to make a brittle page.
Thanks a lot for answering, I am afraid I am a true idiot, I cannot attach the screenshot here, but if you paste the code from my first post in a html editor and you save it as a html file, and then you view it with IE and Firefox you will see what it is (you may have to wait a tiny bit for the menu2 to be loaded, it is being called from an url). I don't need the menu1 to be relative positioned, but anyway if I change both menues to position absolute it does not work either in FireFox, cannot click the links behind menu1 Thanks once again!!
I did that, but what I see doesn't seem like what you want. If it is, you need to change it. You have Flash sitting over a menu. Recipe for disaster. Know what folks without flash get? A big white box in place of where the Flash is. Covering the menu. I'll show you: http://stommepoes.nl/menuscreenshot1.gif http://stommepoes.nl/menuscreenshot2.gif So, I could set these two menus up properly but only if I knew where they really should be-- my fake IE6 4 Linux shows exactly the same thing, except it's being the typical IE6 and letting me click "through" an element which shouldn't happen anyway. In fact, if you really needed that side menu Flash thingie to pop up and cover the normal menu, you might want to use something like a CSS popup instead, where when the mouse hovers (or keyboard has :focus) on the little red "Menu" part, an absolutely positioned box appears with the links. This is one proper use of absolutle positioning, and instead of making the popup menu appear and disappear, you'll have it sitting off-screen by like a bazillion px and then just a big off to the left on :hover or :focus. Since you need the thing to appear while the mouse moves over the links, you'd need an extra set of CSS commands for that... and who knows how good :focus would work with that without Javascript. Which is why I'd suggest moving that red Flash menu somewhere else. It cannot be covering a menu. Can it at least open to the right of the menu instead of the left? Though I dunno what's to the right on the real page. As for the other two menus, they should be written like this: <ul id="menu1"> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> <li><a href="#">Link4</a></li> <li><a href="#">Link5</a></li> <li><a href="#">Link6</a></li> </ul> <ul id="menu2"> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> <li><a href="#">Link4</a></li> <li><a href="#">Link5</a></li> <li><a href="#">Link6</a></li> <li><a href="#">Link7</a></li> <li><a href="#">Link8</a></li> <li><a href="#">Link9</a></li> <li><a href="#">Link10</a></li> </ul> CSS: ul, li { list-style: none; margin: 0; padding: 0; } #menu1 { whatever margins top and bottom you want, plus widths; } #menu2 { whatever margins top and bottom, widths; } ul li { display: inline; /*just somethinf for IE7*/ } ul li a { display: block; width: (width of menu) height: (height of each clickable area) line-height: (same as height) font-size: (make half the line-height, so vertically centered) text-align: center; text-decoration: none; (if you want) color: etc... } Naturally, menu1 will come first on the page, being the first in the source. Manu1's bottom margin, or menu2's top margin, will set the space (if any wanted) between the two of them. Menu2 will naturally come after menu1. Z-index isn't used because they are on the same "level" and because they have links they must NOT overlap each other. Links coverd by anything, even an invisible image, cannot be clicked. For an example of CSS popups, you can look at these pages (but none of them have the ability to have the popup remain while still being hovered on... that need CSS such as you find in a [url="http://www.htmldog.com/articles/suckerfish/dropdowns/]Suckerfish dropdown menu[/url] where the submenus stay onscreen while being hovered over instead of the parents): [url]http://green-beast.com/experiments/css_map_pop.php[/url] [url]http://meyerweb.com/eric/css/edge/popups/demo.html[/url] [url]http://meyerweb.com/eric/css/edge/popups/demo2.html[/url] I use them too: [url]http://stommepoes.nl/Scooterverzekeren/scooterbereken1.html[/url] hover over the ?'s But actually the suckerfish code will work better... except of course in IE6, who doesn't hover on anything except a's, so you'd need the normal JS that everyone needs to use for any drop-down menus. Does this help, or not at all? I tried to make myself clear about how absolutely or relatively positioning boxes on a page are a Bad Idea most of the time. Let the normal document flow do most of the work for you. *EDit whoops I thought there were two normal menus and then the FLash. Sorry. If you wanted that Flash menu to come out like a drop-down/flyout of menu1, then maybe I'd do this, Suckerfish-style: <ul id="menu"> <li><a href="#">Link1</a></li> <li><a href="#">MENU</a> <ul> <li><a href="#">Collaborators</a></li> <li><a href="#">Help</a></li> <li><a href="#">Become a Partner</a></li> <li><a href="#">Donors?</a></li> <li><a href="#">Add to Favourites</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li><a href="#">Link3</a></li> <li><a href="#">Link4</a></li> <li><a href="#">Link5</a></li> <li><a href="#">Link6</a></li> </ul> Using the [url="http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html"]Suckerfish Vertical CSS[/url] instead. Code (markup):
*EDit whoops I thought there were two normal menus and then the FLash. Sorry. If you wanted that Flash menu to come out like a drop-down/flyout of menu1, then maybe I'd do this, Suckerfish-style: <ul id="menu"> <li><a href="#">Link1</a></li> <li><a href="#">MENU</a> <ul> <li><a href="#">Collaborators</a></li> <li><a href="#">Help</a></li> <li><a href="#">Become a Partner</a></li> <li><a href="#">Donors?</a></li> <li><a href="#">Add to Favourites</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li><a href="#">Link3</a></li> <li><a href="#">Link4</a></li> <li><a href="#">Link5</a></li> <li><a href="#">Link6</a></li> </ul> Using the Suckerfish Vertical CSS instead. For some reason, my edited post wasn't getting edited. Geez, sorry for screwing it all up. But I still stand by Don't Have Flash Sitting Over a Menu. Sitting stuff over links is still a bad idea in most browsers... the best some people can get is to set the opacity of the Flash to "Transparent" which shouldn't work for you becuase you have a red background colour.