CSS and non IE browser troubles...

[Handyman]

I've recently got around to working on an site using CSS... the first one I've worked out that won't be using tables for the layout. All was going great and smooth until I started testing my test page in browsers other than IE6. In Netscape and Mozilla things go to poo. Content that is supposed to span "100%" spans off the page to the right and ends seemingly randomly (other "100%" content won't span exactly as far as another)... if that makes sense.

Here's an example of what the style sheet looks like:


.textcontent {
color: #000000;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
background-color: #BFBFBF;
padding: 20px;
width: 100%;
border-top: solid 1px #000000;
border-left: solid 2px #000000;
border-right: solid 2px #000000;
border-bottom: solid 1px #000000;
}

.textheadline1 {
background-color: #B3B3B3;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
text-align: left;
font-weight: bold;
padding: 10px;
width: 100%;
border-bottom: solid 1px #000000;
border-left: solid 2px #000000;
border-right: solid 2px #000000;
border-top: solid 2px #000000;
}


Anything in the code above that would work in some browsers and not others? The book I've been using as reference seems to imply there shouldn't be a problem... but this is a really cheap book, lol.

The page in question is located here: http://www.deuterium.cc/shoot_naked/

Thanks in advance, and bear with my CSS new-ness :)

[Skeelo]

Give us a url....

[muisejt]

I see one problem in Firefox 0.8

http://muisejt.com/pics/css.jpg

[rock]

You can watch as IE loads the page, it's initially in the same position as the Mozilla/Firebird version, but then it jumps down to uncover the top graphic.

[Handyman]

Originally posted by muisejt
I see one problem in Firefox 0.8

http://muisejt.com/pics/css.jpg

D'oh! Well I got that part fixed... at least it now drops where it should in Firefox (still DLing Mozilla).

But I'm still having the same trouble with the 100% sections running farther than the should and off the page to the right, and they don't even end lined up off the page. Rather they run off and end staggered... quite confusing :confused:

::edit::

Picture of problem in Mozilla/Firefox/Netscape:
http://www.deuterium.cc/misc_image/css1.gif

[Handyman]

Update:

I got the staggered edges fixed. Apparently the "width: 100%" parts of the CSS code aren't needed unless you want to go smaller than the full width.

Execpt for my menu bar... without the 100% stays just as wide as the text, but with the 100% spans off the page.

At least I'm getting closer...