|
CSS - Pink Underline In Header
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. Similar TutorialsHi, 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 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 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 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} 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. When hovering over a link, how can I make the underline thicker? Check out this site. link Does anyone know if/how I can get a CSS script for link classes that would only change the colour of the underline like the one at the top of Altavista's translate page?? I have tried viewing the source but can't seem to put my finger on it. Any help would be greatly appreciated. Cheerz, sheermonkey. 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 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 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 As soon as I apply the floating to my footer spans the dashed border on the links stops working. Can anyone tell me why please? PHP Code: <div id="footer"><img src="../images/spacer.gif" alt="Whitespace Image" width="100%" height="4" align="top" /> <span class="spanLeft footerText"> Copyright 2005 <a href="http://www.xxxxxxxxx.co.uk" target="_blank" class="gray">xxxxxxxxxxx</a>. </span> <span class="footerText spanRight"> <a href="#" target="_blank" class="gray">xxxxxxxxxx</a> xxxxxxxxxxxxxx </span> </div> PHP Code: .footerText { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight: bold; text-decoration: none; color: gray; } .spanRight { float: right; margin-right: 5px; } .spanLeft { float: left; margin-left: 5px; } A.gray { text-decoration: none; color: gray; } A.gray:Hover { border-bottom: 1px dashed; color: #009966; } 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. I wonder how to create a link without an underline in HTML? Maybe you have also met such problems. Anyone helps? Thanks in advance. What is the best practice for giving an <a> a different color than the underline? Background image? <a><span></span></a>? Something else? 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 The underline is on the contact page (the google map has been freaking out on IE, so try FF). I want "Hours" to be underlined, but it isn't showing up. It's an h1 with a class of "comment" and the CSS is Code: h1.comment {
text-decoration: underline;
}
The float problem uses this CSS. The page in question shows all the previous presidents . There's a 0 margin and it does float, it just is aligned wrong. The CSS for both columns is Code: #pastpres table {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .8em;
border-collapse: collapse;
margin-bottom: 1em;
margin-right: 0;
}
#pastpres tr {
border-bottom: 1px solid #775b36;
}
#pastpres2 table {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .8em;
border-collapse: collapse;
margin-bottom: 1em;
float: right;
margin-top: 0;
margin-left:0;
}
#pastpres2 tr {
border-bottom: 1px solid #775b36;
}
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. Hi all, I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's. 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. |
|||||||