Jump to content

Archived

This topic is now archived and is closed to further replies.

ldsmike88

Dashed underlined link

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

Share this post


Link to post
Share on other sites
[code]img {
    border:0;
}[/code]
Might help.

Share this post


Link to post
Share on other sites
That didn't work...

I had tried this, but it didn't work either:

[code]img {
    border: none;
    border-bottom: none;
    text-decoration:none;
}[/code]

Share this post


Link to post
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]

Share this post


Link to post
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]

Share this post


Link to post
Share on other sites
Instead of using border: 0 try using border: none for images.

So:

[code]
a img{border:none}
[/code]


Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
Yes, I could do that. I might end up doing that, but I don't really want to go through each page and change all the links with pictures in them.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

×

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.