| Dotted underline on links in IE7
|
migthegreek
msg:4268036 | 5:25 pm on Feb 16, 2011 (gmt 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;
}
|
alt131
msg:4268289 | 4:47 am on Feb 17, 2011 (gmt 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.
|
|
|
