Help! IE to anything else... CSS

HELP! IE works great, anything else fails miserably!

OK, I don't know if this will work, but I've spent countless hours reading forums, researching and assides lacking sleep, I have not been sucessful identifying the problems in a website I am trying to get going in CSS to work in anything other than IE. Can someone help? Link of site is www.dresch.org/web/cascademailing/default.asp
and the supporting css files are
(main: www.dresch.org/web/cascademailing/assets/css/cmv2Home.css and
(sub: www.dresch.org/web/cascademailing/assets/css/cmv2CreditCards.css



Looks perfect in IE but doesn't even display in Mozilla or firefox. HELP????

First, I haven't downloaded and testet my proposal so I can't guarantee that i will help you, but...

You have a tiny error in cmv2Home.css so it doesn't validate, but I don't think that is the main problem.

Your problem I think is that you are using z-index together with float some places. Z-index can only be used on elements that have been positioned (eg position:absolute;)!
http://www.w3schools.com/css/pr_pos_z-index.asp

Another possibility could be that you are using div.all{height:100%;}
I don't see why you have used this since your design isn' built for allways fill the screen 100% in the height, but if you wan't to do that, take a look here:
http://www.bzabza.com/css/1/

You are also using height:auto; many places, could also be a reason.

Another quick way to make your design could be this:
http://www.ssi-developer.net/main/templates/

And finally, it's normally not a good idea to use two CSS-files, easer to control what is in one file than two.

Hope this helps.

Thanks for your feed back. The main page will validate as XHTML now and the CSS will as well.

The templates look great and will use those for the next site I'm doing (@ the same time of course), but with the special overlay this one has, was wanting to try to get it to work right.

Adjusted the absolute position z-index issues as well and it still is the same.

One of the sites I used for trying to identify the problem said that OPERA had some issues with the container not being completely defined, so added the extra height: auto stuff for that. Removed them and looks just fine IE still, so will leave them out and try to get opera after I get the mozilla/firefox issues resolved. Thanks so much for getting back. (STILL up and trying to get this resolved.)

I used two files cause another site talked about using the Cascading portion style sheets to care stuff over as you have it working right. So the smaller Credit card css file only contains the W3C icon CSS and the Credit card stuff.

Any other feed back or areas to study/play/peruse next? This is my first forray into CSS and tho I've been studying forever it seems, any leads you can give are greatly appreciated.

Thank you thank you thank you for all,

Best

D

Ok, I have taken a closer look, it's not easy to point out what's the main reason for your problem. I have experimented a little bit with your code, but it doesn't work as intented, it will be much work for me to do this so I won't fix it for you.

But what I see is this:
You are mixing uppercase and lowercase on your names for the div's for example. In your HTML-file you are using <div id="list-Menu"> but in your CSS you are using list-menu. Remember, they are case-sensitive. Another thing, don't use hyphens - , this can also cause the trouble. Use listmenu, don't list-menu.

And, your menu will not be shown properly in Opera and Mozilla, use list's for making menus. You will find many good examples here:
http://css.maxdesign.com.au/listamatic/

Also, your logoMain.gif is 1152x446 pixels, don't just scale it down in your source-code, use a image-program to scale it down correctly.

Thanks for more observations. All have been enacted except for the image size and changing A to LI for the menu. I'll enact that soon. However, I still have no luck with getting anything else to display in mozilla or opera, as u suggested.


Thanks for the cleaner code help and if anyone or anything to help make this cross-platform compatible would be appreciated.

Bests and again thanks,

rls

Ok, you are using negative values on the z-index. Change them to positive values and you will start to see your design. But you still have some work to do.

And also remember, you will get a horizontal scrollbar because you have set the width to 100%, but are using left: 4px; as an example. This means 100% + 4 pixels.

OMG, it's displaying something! Is there a rule or information out there where mozilla and firefox don't support negative z-index values? Changed the 100% value to 99% and it basically does what I was hoping for. Learned my lesson this time and will use those templetes forward like.

Couple other stupid questions: Since the background image isn't displayed in either M or F, do they not support those attributes or is it something else?

Does the order of the values defeined in the CSS sheet change the layout?

Thanks again with all your help and I will be changing to the li format.

Bests,

No, there isn't a rule that Mozilla and Firefox don't support negative z-index values, they do support it, they support more CSS-code than IE. But something in your CSS-code is making this happen, I can't point exactly on what.

Background-images are supported well in Mozilla and Firefox, again it's something that I can't put my finger on what exactly is causing this.

The order of the values do matters sometimes. An example here: http://www.w3schools.com/css/css_pseudo_classes.asp

And one tip to make your CSS-code smaller:

color:#ccc; it's the same as color:#cccccc; etc.

This:
background-color: #336666;
background-image: url(/assets/pics/red2.jpg);
background-repeat: no-repeat;
background-position: bottom;

can be written like this:
background: #336666 url(/assets/pics/red2.jpg) no-repeat bottom;

Performed those changes as well. Thanks again. The background pictures seem to be working, but they don't seem to be anchoring to the fixed attribute of each of those elements. Ideas?

Thanks for the sortage of code nominclature. New 2 me as well. Looking for a site that list those, any suggestions? The W3school didn't contain that.

Bests, and again I bow to you,

Rush's biggest fan