Microsoft Knowledge Base Article
This article contents is Microsoft Copyrighted material.
©2005-©2007 Microsoft Corporation. All rights reserved.
Terms
of Use |
Trademarks
Article ID: 883631 - Last Review: May 18, 2007 - Revision: 1.2
BUG: You cannot reduce the top margin and the bottom margin of the horizontal rule element to nothing by using CSS
You cannot reduce the top margin and the bottom margin of the horizontal rule (HR) tag to nothing by using cascading style sheets (CSS). When the
CSS style margin:auto is applied to the HR elements in Microsoft Internet Explorer, the top margin and the bottom margin are maintained. You can see the symptoms of the problem if you put the following sample code in a text file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
<!--
hr { margin-top: auto; margin-bottom: auto;}
.RedRule { border: none; border-bottom: 1px solid red; }
-->
</style>
</head>
<body>
Text Above
<hr>
<hr noshade class="RedRule">
<hr>
Text Below
</body>
</html>Save the text file with either an .htm file name extension or with an .html file name extension. Then, view the file by using Internet Explorer.
The following workarounds use DIV tags instead of HR tags:
Workaround 1Use an HR tag that is contained inside a DIV tag. This provides better backward compatibility with browsers that do not support DIV tags or CSS. This is the recommended workaround.
Workaround 2Use the font-size style to provide the height for the DIV tag.
Workaround 3 Use an empty DIV tag inside a styled DIV tag to provide the height for the DIV tag.
The following sample code demonstrates the workarounds:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zero margin horizontal rule workarounds in Internet Explorer</title>
<style type="text/css">
<!--
div.RedRule {
border: 1px solid gray;
background-color: red;
height: 1px;
}
div.RedRule hr { /* for CSS1 browsers */
display: none;
}
div.RedRule * { /* for CSS2 browsers */
display: none;
}
-->
</style>
</head>
<body>
<h2>Zero margin horizontal rule workarounds in Internet Explorer</h2>
<p>There are three DIV tags. HR tags are inside for down-level compatibility.</p>
<div class="RedRule" style="background-color: blue;"><hr></div>
<div class="RedRule"><hr></div>
<div class="RedRule" style="background-color: blue;"><hr></div>
<p>There are three DIV tags. Height is specified by font-size.</p>
<div class="RedRule" style="font-size: 1px; background-color: blue;"> </div>
<div class="RedRule" style="font-size: 1px;"> </div>
<div class="RedRule" style="font-size: 1px; background-color: blue;"> </div>
<p>There are three DIV tags. Each one contains a DIV for height:</p>
<div class="RedRule" style="background-color: blue;"><div></div></div>
<div class="RedRule"><div></div></div>
<div class="RedRule" style="background-color: blue;"><div></div></div>
</body>
</html>
The document type definition (DTD) specification at the beginning of the sample code is required for Internet Explorer to support Workaround 1 and Workaround 3. This is because the border location of the DIV tag is treated differently based on the DTD specification.
For additional information, visit the following Microsoft Developer Network (MSDN) Web sites:
CSS enhancements in Internet Explorer 6
Margin attribute | Margin property
HR element | HR object
APPLIES TO
- Microsoft Internet Explorer (Programming) 5.5 SP2
- Microsoft Internet Explorer (Programming) 6.0
- Microsoft Internet Explorer (Programming) 6 (SP1)
| kbtshoot kbprb kbbug kbcssi kbinetdev kbfaq kbmshtml KB883631 |
Retired KB Content DisclaimerThis article was written about products for which Microsoft no longer offers support. Therefore, this article is offered "as is" and will no longer be updated.
Community Feedback System
Very often, it takes hours to solve a problem. Very often, you've looked high
and low, and have tried a lot of solutions. When you finally found it, chances
are, it was because someone else helped you. Here's your chance to give back.
Use our community feedback tool to let others know what worked for you and what
didn't.
Please also understand that the community feedback system is not warranted to be
correct, it's simply a system that we've built to let people try and help each
other. If something in a feedback response doesn't make sense to you, or you're
not comfortable making changes that the feedback talks about (like registry
edits), please consult a professional.
Thank you for using kbAlertz.com Feedback System.
-- Scott Cate