Jump to content


Photo

Dashed underlined link


  • Please log in to reply
9 replies to this topic

#1 ldsmike88

ldsmike88
  • Members
  • PipPipPip
  • Advanced Member
  • 168 posts
  • LocationFlorida

Posted 20 May 2006 - 02:50 PM

I have the following code on my CSS document.

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

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

#2 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 20 May 2006 - 03:11 PM

img {
    border:0;
}
Might help.
Legend has it that reading the manual never killed anyone.
My site

#3 ldsmike88

ldsmike88
  • Members
  • PipPipPip
  • Advanced Member
  • 168 posts
  • LocationFlorida

Posted 20 May 2006 - 03:16 PM

That didn't work...

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

img {
    border: none;
    border-bottom: none;
    text-decoration:none;
}


#4 ober

ober
  • Staff Alumni
  • Advanced Member
  • 5,337 posts
  • LocationEast Coast, USA

Posted 23 May 2006 - 07:55 PM

This works for me in both Opera and IE 7.

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

a:link {
    text-decoration: underline;
}

img {
    border: 0;
}
HTML:
<!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>

Info: PHP Manual


#5 ldsmike88

ldsmike88
  • Members
  • PipPipPip
  • Advanced Member
  • 168 posts
  • LocationFlorida

Posted 23 May 2006 - 09:42 PM

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

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

HTML:
<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>


#6 Heero

Heero
  • Members
  • PipPipPip
  • Advanced Member
  • 50 posts

Posted 24 May 2006 - 04:10 AM

Instead of using border: 0 try using border: none for images.

So:

a img{border:none}



I'm learning PHP and mySQL. Please forgive my ignorance :(

#7 ldsmike88

ldsmike88
  • Members
  • PipPipPip
  • Advanced Member
  • 168 posts
  • LocationFlorida

Posted 24 May 2006 - 05:43 AM

Nope, still doesn't work. I tried the following three and more:
a img{border:none;}
a:img{border:none;}
a.img{border:none;}


#8 Heero

Heero
  • Members
  • PipPipPip
  • Advanced Member
  • 50 posts

Posted 24 May 2006 - 06:13 AM

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

CSS

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


HTML
<a href='XXX' class='test'>XXX</a>

And no images should have the dashed border
I'm learning PHP and mySQL. Please forgive my ignorance :(

#9 ldsmike88

ldsmike88
  • Members
  • PipPipPip
  • Advanced Member
  • 168 posts
  • LocationFlorida

Posted 24 May 2006 - 03:16 PM

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.

#10 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 25 May 2006 - 08:03 AM

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
a img {float:left;}
You man have some issues with alignment in the pages though.

NoGray.com





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users