Tuesday, July 28, 2009

1 pixel heigh div in IE 6

If you want to create a 1px horizontal line, some people may use a 1px height div with a color background to accomplish it instead of using
tag. For example,

div.details-sep-hr {
background-color:#CCCCCC;
border:0 solid black;
height:1px;
margin:0;
padding:0;
}


This works perfect with all modern browsers but not in IE6. IE may generate a line more than 1px height. To fix this, add overflow hidden to the class.

div.details-sep-hr {
background-color:#CCCCCC;
border:0 solid black;
height:1px;
margin:0;
padding:0;
overflow: hidden;
}

No comments: