Whats wrong with my site?

[vahsi000]

I recently got my friend to view my site mmorpg website (i'll be getting a domain name for it soon for those read my other posts) on his Firefox browser, i was so confident that it wouldn't have any errors, although I was right he sent me a screenshot where the layout was messed up, now I know i'm not a professional coder, neither have i taken courses to learn nor has someone taught me, i've taught myself just like alot of people on the internet...

i've been an internet explorer user my whole "internet" life so i practically grew up around tables, now with this trend to Firefox, i've been slowly increasing the amount of css every time.

The part i don't understand is there are 2 elements i've used as coding, html & css, now i'm pretty sure firefox supports css pretty well then the problem would be with the html (although i have more knowledge of html then knowledge of the back of my hand), but if it was with the html coding then i wouldn't have been able to validate it at w3c.

Can someone with firefox tell me if they too see the layout messed up and if it is I would greatly appreciate if someone can educate me with whats wrong with me...
www.vahsi000.com/mmorpg

[KelliShaver]

Works fine for me. FF 1.5.0.2

[Shyflower]

I see the line you're talking about in Firefox. The problem is in your css. However, you are defeating your purpose by placing all your css within your html. Take it out and put it either in the style information in your head or create an external style sheet. Then you can use the css validator at the w3c to help you find the problems. :)

Two things I noticed are:
1) you have a couple of css mistakes like div#input in your source. This should read either div #input or #input div, depending on what you are trying to do. Either way, you are forgetting a space.

2) if you are going to use style info within your html, this is wrong:
style="background-image:url(images/index_03.jpg)"

it should be

style="backgrond-image:url('images/index_03.jpg')"

you need either quotes or an apostrophe after the leading and before the following parentheses.

Neither of these are probably the line-creating culprits, but the more mistakes you have, the more difficult it is for the browser to parse, and Firefox is not forgiving of mistakes.

[fredarn]

Works fine for me too, Opera 9 Beta (http://opera.com - a GREAT browser by the way)

[vahsi000]

Thx shyflower, i got a question for you. See how i'm trying to have that liquid design effect on the pages, well i do it so that the pages are "screen resollution friendly" like i've never used resollution below 1024x768 on my computer but i know of others who use 800x600 (still, lol). My question is can i have that liquid effect by coding the template just with css and not use any tables and still have that liquid effect?

[Shyflower]

Oh yes! In fact if you get rid of the tables, it will work even better. :)

[vahsi000]

is there a guide on the net that would take me through the whole process? You know of any good tutorial websites you know of?
this is the reason my coding is all over the place, i normally search for a specific css code learn from it whatever i can and experiment on it.

[Shyflower]

is there a guide on the net that would take me through the whole process? You know of any good tutorial websites you know of?
this is the reason my coding is all over the place, i normally search for a specific css code learn from it whatever i can and experiment on it.

This one is sort of corny, but it's easy to follow and does show you how to both use css with and without tables.

http://www.hotdesign.com/seybold/