website broken in firefox2, no idea

hi, i'm kind of new to website design and trying to start something up for myself. i've spend hours coding this thing and it works perfectly in ie6....but completely broken in firefox.

all my knowledge for html and css basically came from reading the source code from various sites and then trying it myself. i've come up with something...not very good mind you, but something.

problem is, i have no idea what's wrong. any tips or suggestions will be greatly appreciated.

here are the html and css files for the site.

http://www.itwonthurt.com/index.htm

http://www.itwonthurt.com/main.css


thanks in advance.

Welcome to CodingForums, vassili. :)

This won't necessarily fix the problem, but your code doesn't validate (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.itwonthurt.com%2Findex.htm). Fix that first, then try again.

ahhh, i validated my html and css. it's less broken now, but still not displaying the page corectly in firefox. it looks to have something to do with the order of the divs. ie renders .container2 behind .container which is what i want, but ff renders .container2 on top of .container.

<div class="container2">...stuff...</div>

<div class="container">...stuff... </div>


is there a way around this?

Maybe you should try the z-index property instead of relative positioning to achieve overlap? Your page looks about the same in Firefox 2 and Internet Explorer 7; it looks worse in Internet Explorer 6.