Problem Making Horizontal menu congruent on firefox and internet explorer

This is how my horizontal top menu displays in firefox http://i882.photobucket.com/albums/ac26/eperkins153/ff.png

This is how my horizontal menu display in internet explorer
http://i882.photobucket.com/albums/ac26/eperkins153/ie.png

this is my site

www.perkinscomputerrepair.com

I'm using the spry menu from dreamweaver cs5

I just want to know how to make them look the same, the firefox look is correct the internet explorer is wrong.

any help appreciated thanks

you have a few errors when validating. You should clean that up as a precautionary. also try adding this:

* {
padding:0px;
margin:0px;
}

Couldn't find it in your code. All browsers have their own default padding and margin.

I have added a bit of CSS to it (http://www.exitfegs.co.uk/Document20.htm)here.
{CODE]*{padding:0;
margin:0;}

Resets the browsers to zero before the other css goes in.
}/CODE]

See if it is any better.

Frank

I have added a bit of CSS to it (http://www.exitfegs.co.uk/Document20.htm)here.
{CODE]*{padding:0;
margin:0;

Resets the browsers to zero before the other css goes in.
}/CODE]

See if it is any better.

Frank

you have a few errors when validating. You should clean that up as a precautionary. also try adding this:

* {
padding:0px;
margin:0px;
}

Couldn't find it in your code. All browsers have their own default padding and margin.

That didn't fix it, it still displays incorrectly on internet explorer.

any other suggestions ?

It seems OK with my IE9. What exactly is wrong with it.
What screen resolution?

Frank

The extra code is here.
<link href="_Assets/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
[B<style type="text/css">
*{padding:0;
margin:0;
}
</style>
<link href="_Assets/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="_Assets/_css/main.css" rel="stylesheet" type="text/css" />

The menu looks the same for me viewing in FF 3.6.14 and IE8.

Refresh your browser maybe?

It seems OK with my IE9. What exactly is wrong with it.
What screen resolution?

Frank

The extra code is here.
<link href="_Assets/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
*{padding:0;
margin:0;
}
</style>
<link href="_Assets/_css/main.css" rel="stylesheet" type="text/css" />

Ok It seems to be fixed thank you all

Can someone explain, why these changes fixed the issue so I know in the future, and why is there an * used as the selector ?

Not all browsers start off zeroed. This simple pair are used at the start of your CSS to reset the browsers to zero and a level playing field.

* is the universal selector. (http://webdesign.about.com/od/cssselectors/qt/cssseluniversal.htm) Click here.
Frank

Different browser "apply" default margins to elements. The * is a global value that you can apply style rules to and will affect every element in a document. So:

* {margin: 0; padding:0;}

is in effect, zeroing out every elements margin and padding so you're starting with a clean slate. Then you apply them to each element to get your desired effects.