Login or Sign up Help | Site Map
Connecting Tech Pros Worldwide

Firefox ignoring text-decoration:none for <li>? Text of <li> is only clickable?

Question posted by: GloStix (Member) on May 10th, 2008 09:56 PM
For some reason, FF likes to put a black underline on all my buttons.
No matter what I do, it has the line
I've tried displaying as block and cursor, anything..
Also I've been trying to get it so the entire block is clickable, not just the text.
I've sorta got it so it's clickable, just some parts of the button I still can't click on.

The website is http://pdhtdev.johnabbott.qc.ca/stu...folio/index.htm

The css that is relvant to my buttons...
Code: ( text )
  1. a {
  2.     color:#CC9900;
  3.     text-decoration:none;
  4. }
  5.  
  6. a:visited {
  7.     color:#CC9900;
  8.     text-decoration:none;
  9. }
  10.  
  11. a:hover {
  12.     text-decoration:underline;
  13. }
  14.  
  15.  
  16.  
  17.  
  18. /*NAVIGATION*/
  19.  
  20. ul a,a:visited,a:focus {
  21.     color:#ffffff;
  22.     text-decoration:none;
  23.     cursor:pointer;
  24.     display:block;
  25. }
  26.  
  27.  
  28.  
  29. ul,li,a ul, a li {
  30.     text-decoration:none;
  31. }
  32.  
  33. #sidebar {
  34.     float:left;
  35.     display:block;
  36.     border:solid 1px #333333;
  37.     height:150px;
  38.     width:150px;
  39.     overflow:auto;
  40.     position:absolute;
  41. }
  42.  
  43. #topbar {
  44.     width:100%;
  45.     height:30px;
  46.     font-family:Verdana;
  47.     font-variant:small-caps;
  48.     text-decoration:underline;
  49.     font-style:italic;
  50.     background-color:#353535;
  51.     background-image: url(images/button3.gif);
  52.     overflow:hidden;
  53.     border-top: solid 1px #ffffff;
  54.     border-bottom: solid 1px #333333;
  55. }
  56.  
  57. #buttonconatiner {
  58.     width:1100px;
  59.     height:30px;
  60.     margin:0 auto;
  61.     overflow:hidden;
  62.    
  63. }
  64.  
  65. #buttons {
  66.     margin:0 auto;
  67.     height:30px;
  68.     width:700px;
  69.     text-align:center;
  70.     overflow:hidden;
  71. }
  72.    
  73. #buttons ul {
  74.     height:30px;
  75.     float:none;
  76.     clear:both;
  77.     padding:0px;
  78.     margin-top:0px;
  79.     margin-bottom:0px;
  80.     margin-left:0px;
  81.     margin-right:0px;
  82.     overflow:hidden;
  83. }
  84.    
  85. #buttons li {
  86.     padding-top:3px;
  87.     padding-bottom:0px;
  88.     padding-left:0px;
  89.     padding-right:0px;
  90.     height:30px;
  91.     width:140px;
  92.     text-align:center;
  93.     list-style-type: none;
  94.     float:left;
  95.     display:block;
  96.     overflow:hidden;
  97.     cursor:pointer;
  98. }
  99.  
  100. .selected, .selected a {
  101.     color:#e1a902;
  102.     overflow:hidden;
  103.     background-repeat:repeat-x;
  104.     cursor:pointer;
  105.     }
  106.    
  107. #buttons li:hover {
  108.     background-image: url(images/button3sel.gif);
  109.     height:30px;
  110.     width:140px;
  111.     text-decoration:underline;
  112.     overflow:hidden;
  113.     cursor:pointer;
  114.     display:block;
  115. }


The version that I linked too is an older version where the links aren't blocked so you can't tell just from that version, the css I posted is the latest version.

The CSS has been validated also and it's passed.
Would you like to answer this question?
Sign up for a free account, or Login (if you're already a member).
drhowarddrfine's Avatar
drhowarddrfine
Expert
4,301 Posts
May 11th, 2008
12:01 AM
#2

Re: Firefox ignoring text-decoration:none for <li>? Text of <li> is only clickable?
#buttonconatiner ?
In #topbar, you are setting text-underline and that's where it comes from. Firefox is correct.

To get the links to fit inside the li, add display:block to the <a>

Reply
GloStix's Avatar
GloStix
Member
54 Posts
May 11th, 2008
04:19 AM
#3

Re: Firefox ignoring text-decoration:none for <li>? Text of <li> is only clickable?
Quote:
Originally Posted by drhowarddrfine
#buttonconatiner ?
In #topbar, you are setting text-underline and that's where it comes from. Firefox is correct.

To get the links to fit inside the li, add display:block to the <a>

Man you're the best. I bet you've seen my site like 4 times now xD

I can't believe I missed that one.

Reply
Reply
Not the answer you were looking for? Post your question . . .
183,943 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).

Latest Articles: Read & Comment
Top HTML / CSS Forum Contributors