Posted by Jeff on 01/26/07 07:20

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

[Back to original message]