Getting some errors with my CSS in Mozilla, but not IE

[QuackHead]

Ok, I've made a website for my company, but I'm in the middle of re-writing the side menu and making it a little nicer. (I used to be using a popup menu (kind of like windows), and now I'm trying a different style.)

For some reason, I'm getting some rather odd-looking rendering in Mozilla, but it seems to be fine in IE. Now, I know that IE doesn't usually conform 100% to the W3C standards, but even when I looked at the code examples from w3schools.com, I still couldn't come up with a solution.

If anyone has Mozilla (or if you're a netscape die-hard) and IE, and you'd be willing to take a look at my site, I'd really appreciate it. I've put up a mock URL that inclues everything needed. In the <style></style> tags, there's a section that's clearly commented for the Menus, that's the part I need help with.... EITHER THAT, or it could be in the javascript (which again, for the menus, is clearly commented)

Here's the URL: http://beta.katlyn.com/menutest/about.asp (click on the Profile, Cielo Software, or Projects buttons to open the menus)

Thank you so much for your time, if anyone can help, please try :D

Thanks again

~Quack

[QuackHead]

Anyone got any ideas at all?

[brothercake]

It looks fine to me - exactly the same between moz1.3 and IE6.

btw - it's much easier to develop in moz and then tweak it for IE afterwards, than it is to do it the other way round. Much, much easier.

[QuackHead]

brothercake,

Thanks for your reply... question though, did you click on the buttons and have the sub-menus appear?

I'm having some issues with the menus in Mozilla...

Anyways, My version of Moz is 1.2.1, so I'm gunna update and see if it changes anything... (Note, same bugs are present in Netscape 7)

Let me know, thanks

~Quack

[Catman]

I see the problems you mention with Mozilla 1.3, Netscape 7, and Opera 7 (though with Opera, the submenu text doesn't show at all).

I'd say the problem might lie with slideincrement -- does leaving that at 0 help or hurt with Mozilla and Netscape? If so, then simply sniffing for IE and changing slideincrement only when isWinIE is true could take care of things.

[QuackHead]

Thanks Catman,

Did you notice in Mozilla and Netscape that the submenu text is really low? (It's lower than it should be...)

I think it will have more to do with the CSS and <div> tags I'm using....

what do you think?

~Quack

[Catman]

Yes, that's why I suggested looking at the slideincrement variable in the script -- the submenus get more out of alignment the lower you go, which suggests that for Mozilla and Netscape, it's not needed for them.

[QuackHead]

Hmmmm... see, the slide increment is the value that the div "grows" every 5/100ths of a second....

so if I set it to 0, the divs wouldn't grow at all...

:( QuackHead is frustrated with different browsers... why can't we all just get along!

~Quack

[Catman]

Ah. I misread the code then. At first glance it seemed to be related to positioning ... I've have to have another look (later this afternoon).

[brothercake]

Originally posted by QuackHead
why can't we all just get along!
Don't worry - it will get better; standards-compliance is, after all, the new rock 'n' roll.

Anyhoo ... my gut feeling is that the movement is actually fine, but the underlying layout is positionally or dimensionally slightly different; it might be a box-model issue - try adding an XHTML Strict doctype to the page (to force IE into standards mode) and see if that makes a difference (if it does, it will probably make it look wrong in every browser including IE, but then at least you have common ground to work from ;))

Alternatively - copy your original and try modifying the code to change the initial and final position values - so that it looks right in moz, and then compare those sets of figures - how they are in moz, and how they were in IE. The difference may strike a chord with you.

btw - you're right - I didn't see the menus at all. Perhaps some kind of arrow or (+) symbol could indicate a nested level?

[Catman]

Try changing position from absolute to relative in this line as shown:

.navMenuLinks {position: relative; top: 0px; width: 114px; padding-right: 10px;}

That seems to have some positive effect (but it's hard to say since I had only the shell and none of the image files).

[QuackHead]

It changes the link position, but I can't get the background image in behind the links...

even with specifying the css {background-image: url("side-nav-bg.gif");} property... any ideas?