CSS - How To Create A Link Without An Underline In Html?

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

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

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'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.

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

link

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>&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.

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

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.

Alright, this has to be the most annoying thing I've ever dealt with in any sort of anything.

According to w3schools, and a few threads I read here trying to find my problem, you link your HTML and CSS files by using

<head>
<link ref="stylesheet" type="text/css" href="file.css" />
</head>

Or, you can use internal styling with

<head>
<style>
(code)
</style>
</head>

Well, linking doesn't work. Using Dreamweaver, when I enter href= I get the option to browse to the file. I do so, and I open the .CSS file from there. So I know I'm getting the exact location of the .CSS file.

However, when I use <style> , it works fine. If I copy and paste the code in the .CSS file and paste it between <style> tags, then the page works fine.

What the heck?

Hi,

I'm using html:link with a background image. This works fine on IE and Firefox, but the link won't show in Mozilla. Could changes to the css fix this? Does anyone know how to solve this?

Regards,
Nina