Why does Firefox hate my CSS?!

[Ԍuest]

I am having more CSS woes. My navigation bar seems to work just fine in IE, but in Firefox and maybe Chrome, the whole thing is stretched out WAY too far!

http://dojo.secretworldwideorgofunitedninja.pcriot.com/index.php

Here is the code:

http://pastebin.com/gvi55S14

 

[torwald.lung67]

Sorry, maybe offtopic but, on samsung mobile browser (good web browser based on WEBKIT open source) it looks very messy. I think u should install chrome browser on ur computer and start build this site again from very begining saporting yourselve with webkit tools. If u designe proper look for "chrome" it should look fine in any other modern browser. Don't make "ie" ur main testing browser.

 

[cybrax]

guest => upload your new css code and test it yourself,


torwald.lung => If only it was that simple. Chrome, IE, Opera, Safari and FireFox all deal with CSS slightly differently. No single web browser is best and a good designer will check their work against the current top five .

 

[Ԍuest]

I may need to start making seperate versions for each browser, but I still don't know how to correct the code for Firefox. I'm new to CSS. The code you see in the bin is actually live.

 

[torwald.lung67]

Ok! I did't looked at ur code before my firs replay (i did't had access to computer). Now it is in front of me and i wonder how it happend that ur site with one picture, four links two form files and one button takes 248 lines of code ???
First and most importent: U dont have document type declaration (DOCTYPE) so browser don't know how to render ur website. U must do it, to let browser know, what kind of content it deals with and what rules should be used.
If u are using CSS technique u shoudn't use old metods as <center> (it is depreciate).
U have so many unneeded and empty inputs in CSS and so many mistakes that it is hard to explain what is wrong. But i must say:
Your CSS formating elements which u don't have (every span element ) on your site (or maybe i am blind or something)
or this:
ul.pureCssMenum0 li li {
margin:2px 0px 0px 2px;
}
it means li element inside anather li element (u don't have such construction in your website)

 

[cybrax]

What you need to do is go back and look at your CSS.

Remember computers only do as they are told...
have you told it how wide the menu box is supposed to be?

Judging by the code so far, it looks like you are indeed just begining to learn about just how difficult it can be to write a web page from scratch. Don't take any comments about sloppy coding to heart, all designers borrow code at one time or another and CSS is no exception. I would suggest that you work your way through the Tizag tutorials these are a good place to start.

 

[jmannz]

I have found the CSS validation at this site the very best.

http://jigsaw.w3.org/css-validator/

There is also a html/xhtml validator at:

http://validator.w3.org/

 

[prateems32]

Firefox 4 RC renders my site a little oddly as well. Chrome/IE/Opera/Safari renders my CSS fine (for me, the discrepancy between the browsers is margin settings using CSS for div layers - the 4 vs. FF have a difference of 1 pixel between them), but Firefox creates a random 1 pixel space.