Jump to content

A Href And Hover Link Issue


sawild
 Share

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>

Edited by dsonesuk
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...