•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 423,330 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 5,297 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 1398 | Replies: 2
 |
•
•
Join Date: Feb 2008
Posts: 1
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
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. A
How can I solve it??
Below, the code. Please note that I'm positioning the menus relative and absolute in a desperate try of solving it. If I position both menus relative or both absolute, it does not work either, I cannot click in menu1's links behind menu2 when in FireFox.
Thanks a lot in advance!
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. A
How can I solve it??
Below, the code. Please note that I'm positioning the menus relative and absolute in a desperate try of solving it. If I position both menus relative or both absolute, it does not work either, I cannot click in menu1's links behind menu2 when in FireFox.
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>
•
•
Join Date: Jul 2008
Posts: 3
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
As a fair warning, I am relativley new to this, but I have learned that tables can solve LOTS!
The following code will need playing with (i had to get rid of some stuff). Use CSS to fill in the dents, you can make everything the way you want it.
again, just an idea
P.S. excuse the quote thing, i just was trying to make the post smaller!
Better idea (this is an edit), put each one inside of their own tables and then position the tables.
The following code will need playing with (i had to get rid of some stuff). Use CSS to fill in the dents, you can make everything the way you want it.
•
•
•
•
<!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;
}
-->
</style>
</head>
<body>
<table>
<tr>
<td>
<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>
</td>
<td>
<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>
</td>
</tr>
</body>
</html>
again, just an idea
P.S. excuse the quote thing, i just was trying to make the post smaller!
Better idea (this is an edit), put each one inside of their own tables and then position the tables.
Last edited by KingCale : Jul 6th, 2008 at 7:12 pm. Reason: improvment on my previous idea
•
•
Join Date: Jan 2007
Posts: 2,556
Reputation:
Rep Power: 7
Solved Threads: 114
You can have the focus on only one layer at a time. To fix it, get rid of the idea of putting one thing on top of another.
Note that the z-axis is not universally implemented yet. Don't rely on it.
Note that in FF and in xhtml, the <!-- --> tags comment out the stylesheet. Do not use them any more.
Note that the z-axis is not universally implemented yet. Don't rely on it.
Note that in FF and in xhtml, the <!-- --> tags comment out the stylesheet. Do not use them any more.
Daylight-saving time uses more gasoline
|
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
•
•
•
•
beta bon browser browsers browsing development echo email encryption eu europe firefox gecko html internet internet explorer internet explorer 7 javascript leak linux memory microsoft mozilla networking news open source open-source opera patch phishing scams security social software super testing users web webmail
- Previous Thread: Quick and Safe Browsing!!!
- Next Thread: How to create a scrolling combo box?
