ldsmike88 Posted May 20, 2006 Share Posted May 20, 2006 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 Quote Link to comment https://forums.phpfreaks.com/topic/10065-dashed-underlined-link/ Share on other sites More sharing options...
AndyB Posted May 20, 2006 Share Posted May 20, 2006 [code]img { border:0;}[/code]Might help. Quote Link to comment https://forums.phpfreaks.com/topic/10065-dashed-underlined-link/#findComment-37435 Share on other sites More sharing options...
ldsmike88 Posted May 20, 2006 Author Share Posted May 20, 2006 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] Quote Link to comment https://forums.phpfreaks.com/topic/10065-dashed-underlined-link/#findComment-37438 Share on other sites More sharing options...
ober Posted May 23, 2006 Share Posted May 23, 2006 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] Quote Link to comment https://forums.phpfreaks.com/topic/10065-dashed-underlined-link/#findComment-38363 Share on other sites More sharing options...
ldsmike88 Posted May 23, 2006 Author Share Posted May 23, 2006 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] Quote Link to comment https://forums.phpfreaks.com/topic/10065-dashed-underlined-link/#findComment-38394 Share on other sites More sharing options...
Heero Posted May 24, 2006 Share Posted May 24, 2006 Instead of using border: 0 try using border: none for images.So:[code]a img{border:none}[/code] Quote Link to comment https://forums.phpfreaks.com/topic/10065-dashed-underlined-link/#findComment-38457 Share on other sites More sharing options...
ldsmike88 Posted May 24, 2006 Author Share Posted May 24, 2006 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 Link to comment https://forums.phpfreaks.com/topic/10065-dashed-underlined-link/#findComment-38478 Share on other sites More sharing options...
Heero Posted May 24, 2006 Share Posted May 24, 2006 [!--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]CSSa.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 Quote Link to comment https://forums.phpfreaks.com/topic/10065-dashed-underlined-link/#findComment-38483 Share on other sites More sharing options...
ldsmike88 Posted May 24, 2006 Author Share Posted May 24, 2006 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. Quote Link to comment https://forums.phpfreaks.com/topic/10065-dashed-underlined-link/#findComment-38597 Share on other sites More sharing options...
nogray Posted May 25, 2006 Share Posted May 25, 2006 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. Quote Link to comment https://forums.phpfreaks.com/topic/10065-dashed-underlined-link/#findComment-38810 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.