Jump to content

Dashed underlined link


ldsmike88

Recommended Posts

I have the following code on my CSS document.

[code]a:link {
    color: #000000;
    text-decoration:none;
    border-bottom:1px dashed;
}[/code]

Now the only problem with this is that it underlines my image links as well. Is there a way I can make the pictures be not underlined? Thanks!

Mike
Link to comment
Share on other sites

This works for me in both Opera and IE 7.

CSS:
[code]a {
    color: blue;
    text-decoration: none;
}

a:link {
    text-decoration: underline;
}

img {
    border: 0;
}[/code]
HTML:
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<a href="test.php">here</a>
<br /><br /><br />

<a href="test.php"><img src="../images/animated_timer_bar.gif" width="220" height="18" alt="" /></a>

</body>
</html>[/code]
Link to comment
Share on other sites

It isn't working for me and I'm using IE 7.

CSS:[code]a:link {
    color: #000000;
    text-decoration:none;
    border-bottom:1px dashed;
}
img {
    border: 0;
}[/code]

HTML:[code]<a href="item.php?make=Crysler"><img src="productImages-thumb/1356-4900-06-1.jpg" width="141" height="100" border="0" /><br />
                      Honda Ridgeline Stainless Steel Accent Kit</a>[/code]
Link to comment
Share on other sites

[!--quoteo(post=376577:date=May 23 2006, 09:43 PM:name=ldsmike88)--][div class=\'quotetop\']QUOTE(ldsmike88 @ May 23 2006, 09:43 PM) [snapback]376577[/snapback][/div][div class=\'quotemain\'][!--quotec--]
Nope, still doesn't work. I tried the following three and more:
[code]a img{border:none;}
a:img{border:none;}
a.img{border:none;}[/code]
[/quote]

One possible solution is to give your links a class and then assign the dashed bottom-border only to the those text links.

So say:

[code]
CSS

a.test:link
{
    color: #000000;
    text-decoration:none;
    border-bottom:1px dashed #000000;
}

[/code]

[code]
HTML
<a href='XXX' class='test'>XXX</a>
[/code]

And no images should have the dashed border
Link to comment
Share on other sites

The problem is that the link is the object with the under line (not the image). Because the image is what control the size of the link, the underline goes accrose. To fix this, you would need to make the image float in the page like this
[code]
a img {float:left;}
[/code]
You man have some issues with alignment in the pages though.
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.