CSS - Navigation Underline Help

When hovering over a link, how can I make the underline thicker? Check out this site.

link

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

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.

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

What is the best practice for giving an <a> a different color than the underline? Background image? <a><span></span></a>? Something else?

I wonder how to create a link without an underline in HTML? Maybe you have also met such problems.

Anyone helps? Thanks in advance.

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

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>&nbsp;</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>&nbsp;</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.

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; }

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;
} 

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.

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.