Jump to content

A Href And Hover Link Issue


sawild

Recommended Posts

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

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

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

Archived

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

×
×
  • Create New...