fsiebert Posted October 15, 2011 Share Posted October 15, 2011 In the style section of my website, I put in a:link { color:#D93A2B; text-decoration:none; } a:visited { color:#D93A2B; } a:hover { color:#FFF; background-color:#D93A2B; } However, when I have an image that acts as an url, the image also gets the "background-color" line. How can I differentiate it? Thank you. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 15, 2011 Share Posted October 15, 2011 Must be IE, by default when image is used as link it produces a border whose colour matches the colour for the text, to remove it use a img {border: none;} Link to comment Share on other sites More sharing options...
fsiebert Posted October 15, 2011 Author Share Posted October 15, 2011 Hmm, doesn't work. I haven't tried IE, but it's a problem with both Safari and Google Chrome. The website is http://www.francissiebert.com and here's the whole code. <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title> {Title} </title> <style> #container { width:60%; margin:0 auto; background-color:#FFF; padding:50px; box-shadow:0 0 15px #888; } #footer { margin:0 300px 0 315px; } #spacer { height:50px; clear:both; } body { background-color:#F6F6F6; font-family: HelveticaNeue-Light, arial; font-size:10pt; color:#4D4D4D; } a:link { color:#D93A2B; text-decoration:none; } a:visited { color:#D93A2B; } a:hover { color:#FFF; background-color:#D93A2B; } li { list-style:none; } ul.menu { display:inline; margin:0; padding:0; } ul.menu li { display:inline; list-style:none; margin:0; padding:0; } ul.tags { display:inline; margin:0; padding:0; } ul.tags li { display:inline; list-style:none; margin:0; padding:0; } ol.notes { padding: 0px; margin: 25px 0px; list-style-type: none; } ul.tags li:after { content: ", "; } ul.tags li:last-child:after { content: ""; } </style></head><body><div id="container"><a href="http://www.francissiebert.com/"><img src="http://i54.tinypic.com/xenzt1.png"/></a><div id="spacer"></div>{block:Posts}{block:Text} <h2> <a href="{Permalink}">{Title}</a> </h2>{block:Date} <strong> Posted on {DayOfWeek}, {ShortMonth} {DayOfMonth}{DayOfMonthSuffix} {Year} </strong>{/block:Date}{body}{block:More} <h4> <a href="{Permalink}">Read More</a> </h4>{/block:More}{/block:Text}Filed Under:{block:HasTags} <ul class="tags">{block:Tags} <li> <a href="{TagURL}">{Tag}</a> </li>{/block:Tags} </ul>{/block:HasTags}{block:NoteCount} {PostNotes}{/block:NoteCount}{/block:Posts}<div id="spacer"></div><div id="footer> <ul class="menu"> <li> Who writes this ######? | <a href="https://twitter.com/#!/FrancisSiebert">Follow me</a> | <a href="{RSS}"> Subscribe </a> </li></ul></div></div><!—End Container—></html></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted October 15, 2011 Share Posted October 15, 2011 Its not a border problem, but you will still have it in IE you have to give the anchor that surrounds the image a class or id name to cancel out the background color set by a:hover {color:#FFF;background-color:#D93A2B; <a id="logo" href="http://www.francissiebert.com/"><img src="http://i54.tinypic.com/xenzt1.png"></a> then use a#logo {background-color: transparent;}a img {border:none;} /*will be required for IE*/ Link to comment Share on other sites More sharing options...
fsiebert Posted October 16, 2011 Author Share Posted October 16, 2011 thanks a lot! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.