1px height div in ie6

Category: Web Designing » HTML » Tips and Tricks

You can use one of the following solutions
Method 1:

<html>
<head>
<title>1px heigh div in ie6</title>
<style type="text/css" rel="stylesheet">
.red {background-color:#f00}
.green {background-color:#0f0}
.blue {background-color:#00f}
.hr
{
	height: 1px;
	overflow:hidden;
}
</style>
</head>
<body>
<div class="hr red"></div>
<br />
<div class="hr green">&nbsp;</div>
<br />
<div class="hr blue">&abcd</div>
</body>
</html>

Method 2:

<html>
<head>
<title>1px heigh div in ie6</title>
<style type="text/css" rel="stylesheet">
.hr_red
{

	background-color:#f00;
	line-height: 1px;
}
</style>
</head>
<body>
<div class="hr_red"></div>
<br />
<div class="hr_red">&nbsp;</div>
</body>
</html>

Method 3:

<html>
<head>
<title>1px heigh div in ie6</title>
<style type="text/css" rel="stylesheet">
.hr_red
{

	background-color:#f00;
	height: 1px;
	font-size:0;
}
</style>
</head>
<body>
<div class="hr_red"></div>
<br />
<div class="hr_red">&nbsp;</div>
</body>
</html>
Tags: ie6, div, 1px