How to fix difference in logo position within IE 7 and other browsers (IE8, FF, Chrome)

Question

Hi there,

I am discovering css and I found a problem I can't fix. My logo has a different position in IE7 than in other browsers like IE8, FF and chrome.

This is IE7:

http://www.prestashop.com/?ACT=29&fid=9&aid=16515_Awto8qE0tmhdhVFv8yWF&board_id=1

While IE8 and others show it correct, between the black and grey borders.

The css code:

#logo { float:left; margin-top:-45px; margin-left:20px;

How can I fix this?

Answer 1

Different browsers have different default values for page elements. You should set all the elements to a base value. the best way to do this is using a CSS reset.

"The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on."

Check this tutorial out: http://meyerweb.com/eric/tools/css/reset/

All the best.