Menu Bar IE Problem

[Mike]

I have made a menu bar with CSS and it works perfectly with IE. But it's
*way* off in FF. I have fiddled with it for quite some time and can't
get it to cooperate. Can anyone help?

http://www.giftbasketsandtrinkets.com

Thanks!

[John Hosking]

Mike wrote:

I have made a menu bar with CSS and it works perfectly with IE. But it's
*way* off in FF. I have fiddled with it for quite some time and can't
get it to cooperate. Can anyone help?

http://www.giftbasketsandtrinkets.com

I bet if you used a strict doctype to put your page in standards mode,
IE6 would "mess up" just like FF. I think you are looking at two
different box models, since your transitional doctype leaves you in
quirks mode.

Look at:
#globalnav li a {
width:70px;
padding:0.2em 0.6em;
font-size: 12px; }

Real browsers make your link (roughly) 70px + 2*(.6*font-size) wide, so
FF shows them at about 86px. IE in quirks mode doesn't add padding to
the specified width, but deducts it from the total available (so it has
to wrap the menu texts). IE's menu is shorter across, but FF's conforms
to the W3C's specs.

HTH
--
John

[dorayme]

In article <ptZLh.15372$1a6.3671@trnddc08>,
Mike <mm**@earth.netwrote:

I have made a menu bar with CSS and it works perfectly with IE. But it's
*way* off in FF. I have fiddled with it for quite some time and can't
get it to cooperate. Can anyone help?

http://www.giftbasketsandtrinkets.com

Thanks!

There are quite some things wrong about the design, but it looks
better if you simply get rid of "width:70px;" altogether from
your:

#globalnav li a {
float:left;
/*width:6.5em;*/
width:70px;

--
dorayme

[Mike]

dorayme wrote:

In article <ptZLh.15372$1a6.3671@trnddc08>,
Mike <mm**@earth.netwrote:

>I have made a menu bar with CSS and it works perfectly with IE. But it's
*way* off in FF. I have fiddled with it for quite some time and can't
get it to cooperate. Can anyone help?

http://www.giftbasketsandtrinkets.com

Thanks!

There are quite some things wrong about the design, but it looks
better if you simply get rid of "width:70px;" altogether from
your:

#globalnav li a {
float:left;
/*width:6.5em;*/
width:70px;

That fixed it!

Thank you!!