homepage Welcome to WebmasterWorld Guest from 54.242.231.109
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved