sawild Posted August 7, 2009 Share Posted August 7, 2009 Hi Guys!So this one is driving me crazy! I have two links and they are set so that when someone hovers over them they change color. Without the <a> tag they worked great. When I add the <a> tag and when you click on the links a 1px dot appears in each corner. It only happens in firefox. Safari and IE don't have this problem. Anyone have any suggestions? here is the relevant css: div.bottombuttons a> p.bottomlink { font-family: Perpetua Titling MT; font-weight: bold; font-size: 10pt; color: #F10990; text-align: center; line-height: 35px;}div.bottombuttons a> p.bottomlink { margin: 0 auto;}div.bottombuttons a:hover > p.bottomlink { display: block;}div.bottombuttons a:hover > p.bottomlink { color: black; font-family: Perpetua Titling MT; font-size: 10pt; font-weight: bold; text-align: center; text-decoration: none; outline: none; border: 0px;}a{text-decoration: none;} Thanks a lot! Link to comment Share on other sites More sharing options...
dsonesuk Posted August 7, 2009 Share Posted August 7, 2009 it looks as though you are putting a block-level element "<p>" inside an inline element "<a>". it be better to use a span instead, see below <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">a{text-decoration: none;}div.bottombuttons a > span.bottomlink{display: block;outline: none;border: 0px;font-family: Perpetua Titling MT;font-weight: bold;font-size: 10pt;color: #F10990;text-align: center;line-height: 35px;margin: 0 auto;}div.bottombuttons a:hover > span.bottomlink {color: black;}</style></head><body><div class="bottombuttons"><a href="#"><span class="bottomlink">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</span></a> </div></body></html> Link to comment Share on other sites More sharing options...
sawild Posted August 10, 2009 Author Share Posted August 10, 2009 it looks as though you are putting a block-level element "<p>" inside an inline element "<a>". it be better to use a span instead, see below <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">a{text-decoration: none;}div.bottombuttons a > span.bottomlink{display: block;outline: none;border: 0px;font-family: Perpetua Titling MT;font-weight: bold;font-size: 10pt;color: #F10990;text-align: center;line-height: 35px;margin: 0 auto;}div.bottombuttons a:hover > span.bottomlink {color: black;}</style></head><body><div class="bottombuttons"><a href="#"><span class="bottomlink">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</span></a> </div></body></html>Awesome! I'll give it a try and report back. Thanks! Link to comment Share on other sites More sharing options...
sawild Posted August 10, 2009 Author Share Posted August 10, 2009 Didn't work. But thanks for the suggestion. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 11, 2009 Share Posted August 11, 2009 In what way, did it not work? Link to comment Share on other sites More sharing options...
Ingolme Posted August 11, 2009 Share Posted August 11, 2009 By default, an <a> element is surrounded by a dotted line when focused.You can change it with CSS a:focus { outline: none; } Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.