newbie: my web page looks ugly in Firefox, Netscape etc

[Jeff]

Hey

I've created a web page (
http://home.online.no/~au-holme/pub/2301/test.html ), which must have some
error in it's CSS settings because the content ("a DIV is here", "DIV" etc)
on the right should in fact be placed within the yellow DIV to the left of
the web page. This problem occur when viewing the page in Netscape 8.1.x or
Firefox 2.0...

By the way, I tested my html markup with the HTML Validator at www.w3.org,
and the result was: "Passed validation", "This Page Is Valid XHTML 1.0
Strict!".... so I think my html is good, but I think the problem is in my
CSS settings

Here is the contents of stylesFirefox.css:
#headerContainer {
height:70px;
width:100%;
background:#009933 url(Images/border7.png) bottom repeat-x;
}

a:link, a:visited {
text-decoration:none;
color:black;
}

#headerContainer #photo {
padding-left:30px;
}

#contentContainer {
font-family: Verdana, Tahoma, Helvetica, Arial;
font-size:0.7em;
background-color:#DDCC00;
}

table .product {
width:50%;
font-family: Verdana, Tahoma, Helvetica, Arial;
font-size:large;
background-color:#009933;
color:white;
text-align:center;
padding-top:25px;
padding-bottom:25px;
}

table .product a:link, table .product a:visited {
color:white;
}


#footer {
font-family: Verdana, Tahoma, Helvetica, Arial;
font-size:10px;
text-align:center;
}

#intro {
font-family: Verdana, Tahoma, Helvetica, Arial;
font-size:1.4em;
color:#FF0000;
font-weight: bold;
text-align:center;
}

#HorizontalAds {
border:1px solid black;
padding: 10px;
margin:10px 50px 10px 50px;
}

..VerticalAds {
border:2px solid #009933;
width:200px;
}

#login {
float:right;
text-align:right;
padding-right:20px;
color:white;
font-size:0.7em;
}

#login a:link, #login a:visited {
color:white;
}

#login a:hover {
text-decoration:underline;
}

#centerContent {
margin-left:205px;
margin-right:205px;
padding-top:10px;
}


ul.nav, ul.nav li {
float:left;
list-style:none;
margin:0;
padding-right:20px;
}

#wizardLogo {
font-size:1.3em;
padding-left:30px;
}
#wizardLogo #subjectText {
font-size:0.9em;
padding-left:10px;
}

#wizardLogo #mainText:first-letter {
font-size:2.2em;
}

any suggestions to changes I must do in my CSS/HTML settings are very
welcome!

Jeff

 

[Ben C]

Hey

I've created a web page (
http://home.online.no/~au-holme/pub/2301/test.html ), which must have some
error in it's CSS settings because the content ("a DIV is here", "DIV" etc)
on the right should in fact be placed within the yellow DIV to the left of
the web page. This problem occur when viewing the page in Netscape 8.1.x or
Firefox 2.0...

[snip]

You need to add style="clear:left" to the table inside div
id="contentContainer".

Firefox does something slightly odd with the table-- it treats it as
though it were an inline-table by moving it to the right of the float.
I've noticed this before.

 

[Jeff]

Hey

I've created a web page (
http://home.online.no/~au-holme/pub/2301/test.html ), which must have
some
error in it's CSS settings because the content ("a DIV is here", "DIV"
etc)
on the right should in fact be placed within the yellow DIV to the left
of
the web page. This problem occur when viewing the page in Netscape 8.1.x
or
Firefox 2.0...

[snip]

You need to add style="clear:left" to the table inside div
id="contentContainer".

Firefox does something slightly odd with the table-- it treats it as
though it were an inline-table by moving it to the right of the float.
I've noticed this before.

wow, thanks