How do i render html/css same in firefox and IE

Question

i am making a menu for my school assignment and it needs to work in both IE and firefox. I am done the menu and it works perfectly in firefox, but i am having trouble getting it to display properly in IE

A part can be found over here: http://tutudragon3.info/ie-trying.php

When i click the home image in firefox, a dropdown sort of thing pops-up with 2 images with text "d" and "d". In firefox, there is no space between those dropdown images, but when i try it in IE, I see a small blank space between them.

how could i fix this (delete that space) please. I tried many different things but it didn't work.

Using IE8 by the way.

Answer 1

Before worrying about any specific bugs:

1. Use a Doctype that triggers standards mode, as quirks mode inconsistencies are a nightmare to deal with. If in doubt, use HTML 4.01 Strict: http://www.w3.org/QA/2002/04/valid-dtd-list.html
2. Deal with machine detectable errors

Answer 2

If you have done the things David mentions, and still see some differences, you might want to take a look at ie7.js, it is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser.

Answer 3

I don't find any problem in IE7. But if you are having the problem, try giving display:block; to the <A> and <IMG> tags. The problem should vanish.