Welcome to WebmasterWorld Guest from 54.144.80.75

Forum Moderators: not2easy

Message Too Old, No Replies

Dotted underline on links in IE7

     
5:25 pm on Feb 16, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Dec 2, 2008
posts:64
votes: 0


Everything works in every other browser, including IE8. Everything appears fine in IE7 except the dotted line. I have a sneaking suspicion I have seen this issue before...

<body class="login">
<div class="heading">
<p class="alt-action">or <a href="login">Log In</a></p>
</div>
</body>


body.login .alt-action a {
margin:0 0 0 4px;
padding-bottom:1px;
border-bottom:1px dotted;
text-decoration:none;
color:#134B57;
}
4:47 am on Feb 17, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


Sometimes simple test cases create their own problems ;)
In this case ie7 is calculating the heights as too small to allow room to draw the border.
See this in action by applying a border to the p (the <a> border will appear, but slightly below the border for the <p> ), or insert a line-break and some words.

The easy fix is to set a line-height - it is good practise, and your working css is likely to have one anyway.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members