Different display Firefox/IE

[kaibo]

hi all,

i've been playing with the sliding doors css stuff. what i currently have
looks good in firefox, but it is not lining up correctly in IE. mainly, the
tabs are not centered correctly, and the submenu is not aligned with it's
'background'. any help would be greatly appreciated.

here is the link to the main page...click on the 'products' tab to see a
submenu.

www.monkeymynd.com/testcr/index.php

thanks in advance,
stacey

 

[=?ISO-8859-1?Q?L=FCpher_Cypher?=]

hi all,

i've been playing with the sliding doors css stuff. what i currently have
looks good in firefox, but it is not lining up correctly in IE. mainly, the
tabs are not centered correctly, and the submenu is not aligned with it's
'background'. any help would be greatly appreciated.

here is the link to the main page...click on the 'products' tab to see a
submenu.

www.monkeymynd.com/testcr/index.php

I've had the same problem some time ago. However, I was outputting html
from php. Anyways, I ended up checking the client browser in the script
and making appropriate changes (such as padding:1px for Firefox and
padding:2px for IE, etc.) That could be done with javascript as well,
although I think there should be a simplier solution

 

[kaibo]

it seems that the problem lies in the .css. there is a width attribute on
the 'ul' for the tab navigation. when i comment out the 'width:44em' then it
starts to line up correctly. still, how can i make the .css work for both
browsers if they are conflicting?

 

[Disco Octopus]

hi all,

i've been playing with the sliding doors css stuff. what i currently have
looks good in firefox, but it is not lining up correctly in IE. mainly, the
tabs are not centered correctly, and the submenu is not aligned with it's
'background'. any help would be greatly appreciated.

here is the link to the main page...click on the 'products' tab to see a
submenu.

www.monkeymynd.com/testcr/index.php

thanks in advance,
stacey

I had breakfast today, so I thought I might just play around with your CSS.
This is what I came up with.....

change this....
#header ul {
margin:0 auto;
padding:10px 0;
list-style:none;
width:40em/*44em*/;
}


to this....
#header ul {
margin:0 auto;
padding-botton:0px;
padding-top:10px;
list-style:none;
width:40em/*44em*/;
}


This may be what you need to do.???

 

[Mark Parnell]

Deciding to do something for the good of humanity, Disco Octopus

padding-botton:0px;
padding-top:10px;

Yep, I got that far too. But that then screws up the sub-menu
differently. AFAICT fixing it will require removing the absolute
positioning on the sub-menu, which when messes it up even more.

I don't have the time ATM to play with it beyond that, so I'll leave it
as an exercise for the OP.

 

[=?ISO-8859-1?Q?L=FCpher_Cypher?=]

it seems that the problem lies in the .css. there is a width attribute on
the 'ul' for the tab navigation. when i comment out the 'width:44em' then it
starts to line up correctly. still, how can i make the .css work for both
browsers if they are conflicting?

I think the problem is rather in browser's interpretation and defaults
That's exactly what I want to study more closely now. I think if you
want css to work for both, you'd have to look up specific elements and
compare the defaults, etc., and then pretty much specify almost
everything I wish there was a site where one would enter an element's
name and get the issues with cross-browser compatibility for that element

 

[kaibo]

well, thanks to all of the suggestions and a bit of playing, i've got the
menu to line up correctly in both browsers (code has been updated on the
web). the only thing left to do is ask why IE does not center the tabs like
FireFox does? i'd greatly appreciate it if anyone can tell me how to do
this...

thanks,
stacey

 

[Mark Parnell]

Deciding to do something for the good of humanity, kaibo

the only thing left to do is ask why IE does not center the tabs like
FireFox does?

Because IE is broken, especially when in Quirks mode.

i'd greatly appreciate it if anyone can tell me how to do
this...

#header {text-align: center;}

But better to add a doctype so the browser is in Strict mode. Stick this
at the top of your page and see what happens:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

BTW: You might want to try increasing the font size a few times to see
what happens to your menu - that's one of the problems with absolute
positioning.