...

View Full Version : Problem Making Horizontal menu congruent on firefox and internet explorer



eperkins153
04-20-2011, 08:23 PM
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

jcdevelopment
04-20-2011, 09:07 PM
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.

effpeetee
04-20-2011, 09:23 PM
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

eperkins153
04-20-2011, 09:33 PM
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 ?

effpeetee
04-20-2011, 09:43 PM
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" />

teedoff
04-20-2011, 09:53 PM
The menu looks the same for me viewing in FF 3.6.14 and IE8.

Refresh your browser maybe?

eperkins153
04-20-2011, 10:05 PM
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 ?

effpeetee
04-20-2011, 10:09 PM
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

teedoff
04-20-2011, 10:10 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum