I'm carrying out a website within the joomla16 framework, utilizing a modified beez5 template. I get an unusual derive from IE. Chrome shows the website because it is intended, however IEE is adding a padding I can not appear to locate anywhere. I have used IE dev tool versus. the Chrome element inspector to locate this discrepancy, but it is nowhere found.

The website is

Any help or suggestions could be happily appreciated.


I'm testing with IE 8..(7601)


I appear to possess found something within the IE dev tool. While using layout pane you will get the calculated dimensions from the different elements.

The div id="header-image" includes a size 1050x137, whereas the a categoryEqualsInchlogo design" and also the img class="logo design" have a size 1050x134.

This could take into account the three pixel line, however i aren't seeing where it's produced.

Case a guess: IE might run your website in eccentricities mode, where it looks like the behavior of IE6. To disable eccentricities mode, you need to specify a proper doc type. The right doctype for HTML5 is for instance:


It appears I've discovered the answer, although it is a strange one.

By setting height of div id="header-image" to some fixed 134px ( header-image) the issue is solved, and also the results are identical in IE and Chrome.

However, I'm not sure why IE is adding a 4 pixel difference within the element, once the absolute height isn't joined.