|
CSS - Text-decoration:underline Not Working In Ff
Not sure if I'm missing something or if there's a hack for FF (and possibly other browsers), but on hover, text-decoration:underline doesn't seem to work in FF.
Here's the HTML: Code: <div class="prod_container"> <div class="leftprods"> <div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_ta.gif" style="border:0;" alt="Time and Attendance" /><div class="prod_text">Time and Attendance</div></a></div><div> </div> <div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_devkit.gif" style="border:0" alt="Development Kits" /><div class="prod_text">Development Kits</div></a></div> </div> <div class="rightprods"> <div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_access.gif" style="border:0" alt="Access Control" /><div class="prod_text">Access Control</div></a></div><div> </div> <div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_finger.gif" style="border:0" alt="Fingerprint Readers" /><div class="prod_text">Fingerprint Readers</div></a></div> </div> </div> Here's the CSS: Code:
.leftprods { text-align:left; float:left; }
.leftprods a{ text-decoration:none; color:green; }
.rightprods { text-align:left; float:right; }
.rightprods a{ text-decoration:none; color:green; }
.prod_text { font-size:16px; color:green; font-weight:bold; padding-bottom:5px; }
.prod_container a:hover { text-decoration:underline; }
Thanks. Similar Tutorialshi, i would like the underline of my top level links to be as wide as the naviagtion box, it is currently only streching to the end of the text itself PHP Code: <ul> <li><a href="?action=abouUs">about us</a> <ul> <li><a href="?action=press">press</a></li> <li><a href="?action=tellFriend">tell a friend</a></li> <li><a href="?action=feedback">feedback</a></li> </ul> </li> <li><a href="?action=new">fitting room</a></li> <li><a href="?action=offers">best sellers</a></li> <li><a href="?action=col">useful info</a> <ul> <li><a href="?action=pay">payment options</a></li> <li><a href="?action=delCharge">delivery charges</a></li> <li><a href="?action=retPol">returns policy</a></li> </ul> </li> </ul> PHP Code: /* LEFT NAV */ #leftNav { color: #000; float: left; margin: 0; padding: 0; width: 128px; } #leftNav a { border-bottom: 1px solid #000; text-decoration: none; width: 120px; } #leftNav ul li ul a { border-bottom: none; } #leftNav ul { list-style: none; margin: 0; padding: 10px 0 0 10px; display: block; border: none; } #leftNav ul li { margin: 0; padding: 0 0 10px 0; width: 110px; font-size: 14px; font-weight: bold; } #leftNav ul li ul { margin: 0; padding: 5px 0 0 10px; } #leftNav ul li ul li { margin: 0; padding: 0; list-style: none; font-size: 12px; font-weight: 300; width: 95px; } /* END OF NAV */ thanks for your help Page coding: Code: <div class='btn'><div class='btntxt'><A HREF="#"><nobr>Harness in Art</nobr></A></div></div> <div class='btn'><div class='btntxt'><A HREF="#">Jewelry</A></div></div> <div class='btn'><div class='btntxt'><A HREF="#">Wearable</A></div></div> <div class='btn'><div class='btntxt'><A HREF="#">Decorative</A></div></div> <div class='btn'><div class='btntxt'><A HREF="#">Glass</A></div></div> <div class='btn'><div class='btntxt'><A HREF="#"><nobr>More Fun</A></nobr></div></div> CSS coding Code:
.btn {
float: left;
width:80px;
min-width:40px;
max-width:129px;
height: 42px;
margin: 2px;
padding: 3px 3px 2px 34px;
border-bottom: 4px solid #<?= $basea->bg['-1'] ?>;
border-left: 3px solid #<?= $basea->bg['+3'] ?>;
border-right: 4px solid #<? echo $darka; ?>;
border-top: 3px solid #<?= $basea->bg['+4'] ?>;
background: #<?=$basea->bg['+2']; ?> url(images/LinkBtnTN.jpg) 0 0 no-repeat;
}
.btntxt {
float: left;
width: 100%;
height: 100%;
margin: 0;
padding: 15px 0 0 0;
}
.btntxt a:link {color: #<?= $baseb->bg['+5'] ?>; text-decoration: none;}
.btntxt a:hover {color: #<?= $basea->bg['+5'] ?>; text-decoration: none;}
Ignore the embedded PHP, please. Why does the hover work and the a:link not? This is driving me nuts! Everything else rocks. Thanks. HeadElf I'm making my images links, but I keep getting the blue and purple links around the images. I have the text-decoration:none; everywhere I can think. What am I doing wrong. markrobinsondesign.com is my website so you can go and look at the source code. If you need me to post the code here let me know. I have: td.a1 { background-color: white; color: #003399; width: 120px; height: 30px; font-family: "MS Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center; } how do I alter so I can hyperlink the text spanned by the above so that no usual underlines, change of color etc. occur when the text is hovered, clicked. The below added to the css above doesn't work... link text-decoration: none; visited text-decoration: none; active text-decoration: none; hover text-decoration: none ie: td.d0 { background-color: white; color: #003399; width: 120px; height: 30px; font-family: "MS Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center; link text-decoration: none; visited text-decoration: none; active text-decoration: none; hover text-decoration: none } doesn't stop the underlining, change of color etc. Hello, more issues(!) I'm using "text-decoration: line-through" to cross out retail prices - catalogue style. The trouble is, when the effect is used with certain numbers like "8" and "3", the numbers become unreadable and it looks like we're charging more than the retail price on some products. My boss likes the effect, so I need to find out how to raise the height of the line-through. Does anyone know how I can do this, or any other methods (such as border control) that will be more effective. Many thanks! I am having an issue with my text decoration for a link in a unordered list not being declared correctly. I have set the href link to text-decoration: none value, but it is still getting the declaration from the #gt_links tag. Why isn't it picking up the #gt_links li a tag. here is the code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NONE</title>
<style>
#gt_links {
position: relative;
top: 139px;
height:auto;
width: 138px;
margin: auto;
font-size: 12px;
font-weight:bold;
color: #ffcc66;
text-decoration: underline; // believe is culprit
margin-top: 5px;
}
#gt_links li, ul {
margin: 0;
padding: 0;
list-style: none;
text-decoration:none;
}
#gt_links li a {
display: inline;
position: relative;
font-size: 10px;
font-weight: normal;
text-decoration: none;
color: #ffcc66;
}
#gt_links a {
display: inline;
position: relative;
font-size: 10px;
font-weight: normal;
text-decoration: none;
color: #ffcc66;
}
#gt_links a:hover{background:none;text-decoration:none;}
#gt_links li:hover{background:url(http:/static.grepolis.com/images/game/layout/menu_hover.png)no-repeat;}
</style>
</head>
<body>
<div id="gt_links">Grepolis Tools
<ul>
<li><a id="w_pref" href="#">Preferences</a><span style="color:#FFCC66;"> | </span><a id="w_help" href="#">Help</a></li>
<li><a id="w_toggle" href="#">Show/Hide</a></li>
</ul>
</div>
</body>
</html>
Yes I know if you pull it up it is very ugly. This is just the part of a page which is relative to my issue. Please help. Thanks How do I remove the text decoration (make underline invisible) in table by CSS? text-decoration: none; cannot work in my CSS..... <style type="text/css"> table { font-family: Verdana; font-size: 12px; text-decoration: none; } </style> Good Morning All, Been having a slight problem with the visual in the screenshot below. The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement. ***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned. text ----------------------------------------------------------- rather than text ------ and obviously by the css, the underline on the headers is a small image, repeated - x. Please see relevant css information. * (line 23) { margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; } h2, h3, h4, h5, h6 (line 101) { font-size: 1.2em; font-weight: normal; padding-bottom: 4px; margin-top: 0.6em; margin-right: 0pt; margin-bottom: 0.8em; margin-left: 0pt; text-align: center; } .contentArea h2, #secondaryNavigation h2 (line 114) { background-color: transparent; background-image: url("../images/h2_gradient_bg.gif"); background-repeat: repeat-x; background-attachment: scroll; background-position: left bottom; color: #0066cc; } Many Thanks in advance. Marc. Hello I'm trying to figure this out. I want different color on the text-decoration overline and underline then the text. I know it's possible but how? It works if i change it into border but that's not the case. Here's a picture to give you the idea. Please help Thanks in advance Since i can't link url here's the link for the picture i41.tinypic.com/29bvd1.png Hi, I am trying to make a link's text black with a blue underline. Is this possible? Here is my code, which produces black text with a black underline: Code: .link{ text-align:left;
color:#000000;
font-size:14.5pt;
font-family:times new roman,serif;
font-weight:normal;
text-decoration:underline color:#09328a; }
Let say you have this: <a href="#"> <img src="some.gif" alt=""> Some text </a> I want to have underline for the text on hover, but not for image. How do I do that for the above A IMG text? I want both the IMG and text within the A tag. Would appreciate a solution that worked in at least: IE, FF, OP, NE, Safari For me it is working in IE and OP but not in the gecko browsers.... FF, NE Regards Hi Folks, I've implemented a custom underline for all text links using background properties, but have found that my linked transparent PNG images are now affected with the underline as well. I've tried correcting this by applying background-image:none; to the affected PNGs -- I even used !important;. No luck. I also saw some mention of using the display:block; property to correct a similar problem. No luck. Suggestions? Thanks in advance! P.S. I was all set to post a link to a live example, but it seems new users can't post links? Hopefully the above description will suffice. To emphasis a link I put a small image (its an "X") before the link. See attached picture. GOOD this works well for text links: Code: <a href="...">text</a> ---> X text BAD I integrate a picture and define the picture as link Code: <a href="..."><img src="..."></a> ---> X <image> How can I avoid to show the X in front of the picture? Here is my CSS code: Code: #content a {
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
padding-left: 22px;
text-decoration: none;
color: #990000;}
#content a:hover {
text-decoration: underline;}
Something like this does not solve the problem Code: 01 #content img a { background-image: none; }
02 #content img>a { background-image: none; }
Any idea is greatly apreaciated. Thanks. I have a simple navigation with a undeline on hover in css. but what i would like is that when a link is click and it goes to the page the underline stays under that link , ie page1 - page2 - page3 - page4 when you hove over say page3 it shows page3 when you remove it shows page3 but when you click on page3 and it goes to the page it shows up as page1 - page2 - page3 - page4 Can some please help me with this my css code is below .underlinemenu{ font-weight: bold; width: 100%; } .underlinemenu ul{ padding: 6px 0 4px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/ margin: 0; text-align: right; //set value to "left", "center", or "right"*/ } .underlinemenu ul li{ display: inline; } .underlinemenu ul li a{ color: #ffffff; padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/ margin-right: 10px; /*spacing between each menu link*/ text-decoration: none; border-bottom: 0px solid gray; /*bottom border is 3px*/ } .underlinemenu ul li a:hover, .underlinemenu ul li a.selected{ border-bottom: 3px solid #c12344; } Hi, I've been having a few problems with underlining text when hovered over. Here is a site that I've made that has underline on hover implemented: www . amazanproperties . co.uk Here are the problems: On Chrome, it used to work, but now doesn't. On hover, it updates the text shadow of the underline, but doesn't actually show the underline. This started happening today. On every browser except for Chrome, Safari, and IE (compatability mode), it doesn't work at all. Does anyone know what the problem is? Thanks! I've been playing with this for a while now, and I can't figure out what the heck I'm doing wrong. Here's my site: http://kick.hopto.org Basically, I want the links inside the .storytitle class to NOT underline when they are hovered over (as the class name suggests, I'm talking about the story titles). I thought this would work, but it seems to have no effect: Code: .storytitle a, .storytitle a:hover, .storytitle a:active
{
text-decoration: none;
border-bottom: 0;
}
Any help would be greatly appreciated. http://www.cad-design-engineering.com/New/index.php Problem is most noticeable in IE, of course, because it also puts a space under the header image. I need to get rid of that line, and the space. Have validated both XHTML and CSS. Thank you. I have a page that has a bunch of thumbnails on it and using css to format those images, i've added a margin to both sides for spacing. The class is applied to the href and set to have the img as a descendant. When the page renders in FF, there is no problem. But when it renders in IE, i get the nice little hyperlink underline where the margin is between two thumbnails. Any help would be great. HTML <a href="hometour/defiancemo/P9010045.jpg" class="thumbs" target="_blank"> <img src="hometour/defiancemo/thumbs/P9010045.jpg" alt="" /> </a> CSS a.thumbs img {margin: 0px 5px 10px 5px;text-decoration: none;color: #019934} Hey guys! I have the following code in my CSS that controls the links in my document. The trouble is all my visited links appear as not underlined and all my unvisted links appear underlined? could someone help me to remove this? I can't get it to work PHP Code: #nav.a:link{ color: #FFF; text-decoration: none; background: transparent; padding: 0px 0px 0px 5px; } #nav a:visited { color: #FFF; text-decoration: none; background: #9CC9E3; background: transparent; padding: 0px 0px 0px 5px; } #nav a:hover { color: #9CC9E3; text-decoration: none; background: #9CC9E3; background: transparent; padding: 0px 0px 0px 5px; } Thanks Charlie The IPad is underlining my phone links automatically making them invisible. I am aware of the fix using the meta tag. The problem is that these numbers are substituted by javascript in our AdWords tracking. I am afraid the <meta name="format-detection" content="telephone=no" /> will cause the phone tracking not to work on IPad. This is the simple css for the phone number: #phone { position:absolute; left:285px; width:250px; top:237px; height:25px; font-size:18px; color:#0F2532; } and the site is assistedfertility.org. Is there a css rule I can add to #phone that will remove the automatic underline? What other ways that wont effect javascript number tracking? Thanks |
|||||||