Search code examples
htmlcssinternet-explorerinternet-explorer-6

a div with height:1px appears very thicker in internet explorer 6. How to reduce it?

This is my css properties:

.line-separator {
height: 1px;
background: #d2d2d2;
border-bottom: 0px solid WindowFrame;
color: #d2d2d2;
width: 984px;
    }

this is my DIV: (i use one more like this for the bottom one.)

<div class="line-separator" style="margin-left: 3px;">
</div>

IE 7 : This is the required look

IE 7 : This is the required look .

IE 6 : It appears very thick. It should not be the case. IE 6 : It appears very thick. It should not be the case.

Please avoid comments like dont use ie6 or move on etc., I am aware its going extinct. I have a requirement in ie6. How to solve it ?

Solution

  • Add line-height: 1px or overflow: hidden. That will do the trick.