Microsoft KB Archive/883631

= BUG: You cannot reduce the top margin and the bottom margin of the horizontal rule element to nothing by using CSS =

Article ID: 883631

Article Last Modified on 5/18/2007

-

APPLIES TO


 * Microsoft Internet Explorer (Programming) 5.5 SP2
 * Microsoft Internet Explorer (Programming) 6.0
 * Microsoft Internet Explorer (Programming) 6 (SP1)

-





SYMPTOMS
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 &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;> 

Text Above  Text Below 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.



WORKAROUND
The following workarounds use DIV tags instead of HR tags:

Workaround 1

Use 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 2

Use 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 &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> Zero margin horizontal rule workarounds in Internet Explorer 

Zero margin horizontal rule workarounds in Internet Explorer There are three DIV tags. HR tags are inside for down-level compatibility.    There are three DIV tags. Height is specified by font-size.   

There are three DIV tags. Each one contains a DIV for height:   

Note 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.

