Mywebdunia's Blog

If you are creating a layout, with some very small heights as custom borders for elements. Usually, what you will do is you’ll just have to add height: XXpx to the style’s declarations and think that it should be fine.but check your page once in IE and you’ll probably know what is the answer.

Check out with this example

HTML Code:
<div> id=”smallHeight”</div>

CSS Code:
#smallHeight{
background: #ccc;
border: solid 1px #333;
width: 400px;
height: 2px;
margin: 30px 0;
}

Surprised to see a block with around 22px height in IE.

Well you might be thinking now how to fix this issue. Thats very simple one, we have two fixes for such IE bugs.

1 Solution:
Simply add a font-size:0 for the div, this is because IE refuses to set the font-size less than the default one. So the height of the div is set to approx 22px.

#smallHeight{
background: #ccc;
border: solid 1px #333;
width: 400px;
height: 2px;
margin: 30px 0;
font-size:0;
}

This will solve your problem.

2 Solution:
Well second solution is to set overflow:hidden for the particular div block.

#smallHeight{
background: #ccc;
border: solid 1px #333;
width: 400px;
height: 2px;
margin: 30px 0;
overflow:hidden;
}

Thats quite a very handy and a simple solution. 🙂