1 px shift in IE6/7 compare to FF


I have this small test case : http://www.webdevout.net/test?0G&raw
Why is there a 1 pixel difference in the green div height?

Thanks :slight_smile:

The green div doesn’t have a height so how do you know it’s different :slight_smile:

If you are expecting that they should be the same height based on content alone then that’s a big assumption to make.

The difference is likely to be the default line-height that you have not addressed anywhere.


However browsers will treat font height differently and you will always get 1px rounding errors in some fonts and at some line-heights due to the different rounding algorithms used.

If you need an exact height for an element then give it the height you want. However in most cases you would just want the content to take the flow without needing a height and differences won’t usually be noticable.

Thanks for the answer!

Just for information, I needed an exact height because the blue div underneath will be aligned with another div floated to the left :slight_smile:

The line-height should sort that out then. You can reduce it if you need the line smaller but don’t make it smaller than 1.0 or the text may get cut off in some browsers.

Setting the line-height fixed the problem, thank you very much!