Andy17 Posted April 2, 2010 Share Posted April 2, 2010 Hello haku Sorry, I couldn't come up with a very descriptive title. I have a news "teaser" that I would like to link to the full news itself. I do, however, want some line spacing, so I have a line height of 1.4em. When I put a hover effect on the link, it "blinks" when you move your mouse up and down over the text because of the spacing. To illustrate this, move your move up and down on the text. Link HTML: <!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>Title</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <p class="newsTextLink"><a class="manchet" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus vulputate massa, eget malesuada augue pellentesque id. Maecenas pulvinar, odio eu bibendum lacinia, odio tellus adipiscing mauris, pellentesque porta nunc metus eu lectus. Suspendisse fermentum sapien eget velit suscipit at consequat lorem lacinia. Sed adipiscing, urna ut cursus pharetra, lorem justo vulputate turpis, a semper magna arcu non sem. Aliquam fringilla dui in erat venenatis adipiscing. Vestibulum vitae purus sed nisl lobortis vulputate id sed metus. Donec sodales vestibulum tortor. Integer commodo ligula ut libero varius ultricies. Duis malesuada, mi vitae rhoncus dignissim, nunc risus ornare purus, vitae tincidunt mi arcu pharetra sapien. Etiam eros ligula, vulputate quis dictum ut, rhoncus quis sem. Aenean iaculis dignissim quam ut ultricies. Suspendisse potenti. Fusce neque libero, consectetur ac dictum sit amet, aliquet rutrum sapien. Proin quis mauris in erat interdum pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur dictum pellentesque faucibus. Integer blandit convallis odio, at rutrum sem facilisis ut. Nulla facilisi. In condimentum posuere lacinia. </a></p> </body> </html> CSS: a { text-decoration:none; } p.newsTextLink { font-size:13px; font-weight:normal; line-height: 1.4em; } .manchet:hover { color:#FF3500; } Any idea how to make that "blinking" go away and keeping the hover effect as well as the line height? Thanks in advance! Quote Link to comment Share on other sites More sharing options...
JustLikeIcarus Posted April 2, 2010 Share Posted April 2, 2010 You can fix this by adding display:block; to the link. Just add this to your css. p.newsTextLink a { display:block; } Quote Link to comment Share on other sites More sharing options...
Andy17 Posted April 2, 2010 Author Share Posted April 2, 2010 Ohhh, that worked perfectly. Thanks a lot! Quote Link to comment 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.