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 )
a { color:#CC9900; text-decoration:none; } a:visited { color:#CC9900; text-decoration:none; } a:hover { text-decoration:underline; } /*NAVIGATION*/ ul a,a:visited,a:focus { color:#ffffff; text-decoration:none; cursor:pointer; display:block; } ul,li,a ul, a li { text-decoration:none; } #sidebar { float:left; display:block; border:solid 1px #333333; height:150px; width:150px; overflow:auto; position:absolute; } #topbar { width:100%; height:30px; font-family:Verdana; font-variant:small-caps; text-decoration:underline; font-style:italic; background-color:#353535; background-image: url(images/button3.gif); overflow:hidden; border-top: solid 1px #ffffff; border-bottom: solid 1px #333333; } #buttonconatiner { width:1100px; height:30px; margin:0 auto; overflow:hidden; } #buttons { margin:0 auto; height:30px; width:700px; text-align:center; overflow:hidden; } #buttons ul { height:30px; float:none; clear:both; padding:0px; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; overflow:hidden; } #buttons li { padding-top:3px; padding-bottom:0px; padding-left:0px; padding-right:0px; height:30px; width:140px; text-align:center; list-style-type: none; float:left; display:block; overflow:hidden; cursor:pointer; } .selected, .selected a { color:#e1a902; overflow:hidden; background-repeat:repeat-x; cursor:pointer; } #buttons li:hover { background-image: url(images/button3sel.gif); height:30px; width:140px; text-decoration:underline; overflow:hidden; cursor:pointer; display:block; }
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).
|
|
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>
|
|
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.
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
|