CSS help: Compatibility problem with Mozilla/any other browser using Gecko engine.

[screw3d]

Here is the link for a page I'm working on, and here is the CSS file.

It displays the way I intended in IE6, but when I tried it on Mozilla, the whole layout totally screwed up. Can someone tell me what did I do wrong?

Another question: In IE6 as seen through the link, there is a black vertical bar right below the top banner. Why does that appear?

Yes, I'm a CSS n00bs. Gotta start from somewhere!

TIA!

 

[ComputerMonkey]

Alright. It's 1:38 in the morning and I'm drunk, but I can help ya. First of all here's your problem with Mozilla. The code doesn't validate. These two lines need to be fixed up:

"<a href="#" div id="currentnav">.: The Great Plan</a>"
"<p div id="copyright">© marvin tam 2003"

You need to get rid of the "div id" and change it to "class", then in the stylesheet change "div.currentnav" and "div.copyright" to just ".currentnav" and ".copyright".

Not to confuse you, but there is also an alternative way to fix this. You could get rid of the "div" and leave the "id", then in the stylesheet you could change "div.currentnav" and "div.copyright" to "#currentnav" and "#copyright".

To get rid of the black bar, I have a feeling that it is being caused by the space between the end of the <img> tag and the </p> tag. This might not be the cause, but extra spaces sometimes cause wacky stuff to happen.

This should help you out. Keep at it and way to do it without tables!

 

[dukdukgoos]

Yep, always start by validating your HTML and CSS. You should't even start to debug browser compatibility issues until you basic code is error-free.