Welcome to WebmasterWorld Guest from 54.144.79.200

Forum Moderators: not2easy

Message Too Old, No Replies

Dotted underline on links in IE7

     

migthegreek

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

5+ Year Member



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;
}

alt131

4:47 am on Feb 17, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month