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

Hyperlink clickable area is incorrect in FF 2.0.0.9

P: 2
Hello, on my website at http://www.breakupemail.com/ there is a horizontal navigation bar with 6 hyperlinks. Recently, I added a second navigation row below the first, with 2 links. Once this second navigation bar was added, the clickable area on the 6 links in the top row became greatly reduced when viewed in Firefox 2.0.0.9. It seems to work properly in IE 7.

Essentially, if you hold your mouse over the center of the text link, it will not act as a hyperlink - you need to position the mouse over the bottom part of the text.

The html code for the links section is:

Expand|Select|Wrap|Line Numbers
  1.     <div id="linkbar">
  2.         <div id="navcontainer">
  3.             <ul id="navlist">
  4.                 <li id="active"><a href="index.php" id="current">Home</a></li>
  5.                 <li><a href="dump.php">Break up with him/her</a></li>
  6.                 <li><a href="faq.php">FAQ</a></li>
  7.                 <li><a href="contact.php">Contact</a></li>
  8.                 <li><a href="links.php">Links</a></li>
  9.                 <li><a href="http://digg.com/submit?phase=2&url=http://breakupemail.com&title=BreakUpEmail&
  10. bodytext=Breaking%20up%20is%20easier%20than%20ever&topic=programming">Digg It!</a></li>
  11.             </ul>
  12.         </div>
  13.         <div id="lowerlinkbar">
  14.             <div id="lowernavcontainer">
  15.                 <ul id="navlist">
  16.                     <li id="active"><a href="http://breakupemail.com/" id="current">BreakUpEmail.com</a></li>
  17.                     <li><a href="http://quitmyjobemail.com/">QuitMyJobEmail.com</a></li>
  18.                 </ul>
  19.             </div>
  20.         </div>
  21.     </div>
The CSS that applies to this section is:
Expand|Select|Wrap|Line Numbers
  1. #linkbar {
  2.     background-image: url(images/linkbar_bg.jpg);
  3.     background-repeat: repeat-x;
  4.     height: 59px;
  5. }
  6.  
  7. /******************** Top Main Navigation ************************/
  8.  
  9. #navcontainer ul
  10. {
  11.     background-color: #46d0fd;
  12.     float: left;
  13.     width: 100%;
  14.     font-family: arial, helvetica, sans-serif;
  15.     background-image: url(images/linkbar_bg.jpg);
  16.     background-repeat: repeat-x;
  17.     height: 59px;
  18. }
  19.  
  20. #navcontainer ul li {
  21.     display: inline;
  22. }
  23.  
  24. #navcontainer ul li a {
  25.     padding: 21px 20px 0px 20px;
  26.     color: #fff;
  27.     text-decoration: none;
  28.     float: left;
  29. }
  30.  
  31. #navcontainer ul li a:hover {
  32.     background-image: url(images/hover_link_bg.jpg);
  33.     background-repeat: repeat-x;
  34.     height: 35px;
  35.     color: #FFFFFF;
  36. }
  37.  
  38. /********************* End top navigation ***************************/
  39.  
  40. #lowerlinkbar {
  41.     height: 30px;
  42.     position: relative;
  43.     margin: 0 250px 0 0;
  44. }
  45.  
  46. /******************** Lower Linkbar Navigation ************************/
  47.  
  48. #lowernavcontainer ul
  49. {
  50.     float: right;
  51.     width: 100%;
  52.     font-family: arial, helvetica, sans-serif;
  53.     height: 22px;
  54.     margin: 6px 0 0 20px;
  55. }
  56.  
  57. #lowernavcontainer ul li {
  58.     display: inline;
  59. }
  60.  
  61. #lowernavcontainer ul li a {
  62.     padding: 8px 20px 0px 20px;
  63.     color: #03687e;
  64.     text-decoration: none;
  65.     float: right;
  66. }
  67.  
  68. #lowernavcontainer ul li a:hover {
  69.     background-image: url(images/lowerhover_link_bg.jpg);
  70.     background-repeat: repeat-x;
  71.     height: 30px;
  72.     color: #73b7e6;
  73. }
  74.  
  75. /******************** End Lower Linkbar Navigation ************************/
Can anyone spot the mistake I've made and offer some suggestion as to how I might correct it? Any help will be greatly appreciated!
Jan 14 '08 #1
Share this Question
Share on Google+
3 Replies


drhowarddrfine
Expert 5K+
P: 7,435
First, you have at least 17 html errors on your page including the use of multiple 'id' names. ids can only be unique to one element on a page. These need fixing.
Jan 14 '08 #2

P: 32
First thing
I think you use too many divs, too many IDs when you should be using classes.
Remember, an ID is for a single element on a page, and classes are for multiple elements.

There is no height set on the main nav anchors. except on hover.
Add
Expand|Select|Wrap|Line Numbers
  1. #navcontainer ul li a {
  2.     height: 35px; 
  3. }
Also remove the following height declaration, its adding 30pxs of unclickable element above your main nav.

Expand|Select|Wrap|Line Numbers
  1. #lowerlinkbar {
  2.     height: 30px; 
  3.     position: relative;
  4.     margin: 0 250px 0 0;
  5. }
Too see all this in action, try adding a 1px solid red border to elements that dont appear to be working. you'll quickly see why.

Also use firefox, with WebDeveloper Toolbar or Firebug plugins.
Your sanity will thank you.

And stop using so many empty divs.
Jan 14 '08 #3

P: 2
Sorry for the coding errors and extra divs, I've got a bit of learning to do but thanks to both of you for pointing that out and especially for the solution to the problem with the height attributes! Now the links work perfectly!

Thanks a million!
Jan 14 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.