Home/ Questions/Q 8368869
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T13:29:37+00:00

I have a problem with this page. The area after the header (where it

  • 0

I have a problem with this page. The area after the header (where it says Hello!) should be #33333 (grey) instead of the green. I know its going to be something really simple. Any help?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<LINK REL="icon" HREF="favicon.ico" TYPE="image/x-icon">
<LINK REL="shortcut icon" HREF="favicon.ico" TYPE="image/x-icon"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unavit</title>
<style type="text/css"></style>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/css.css" type="text/css">
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="css/early_ie.css" /><![endif]-->
<style type="text/css">

</style>
</head>
<body>
<div id="mapsHeader">
        <div id="mapsBanner"></div>
</div>
<div id="mapsContent">
    <div id="mapsBodyArea">
      Hello!
    </div>
</div>
<div id="footer">
    <div id="container">
        <div id="bottomNav">
            <table width="1029"> 
                <tr> 
                    <td align ="center" width="87"><font color = "#333"><a href="index.html">HOME</a></font></td> 
                    <td>|</td>
                    <td align ="center" width="121"><font color = "#333"><a href="aboutus.html">ABOUT US</a></font></td> 
                    <td>|</td>
                    <td align ="center" width="99"><font color = "#333"><a href="joinus.html">JOIN US</a></font></td> 
                    <td>|</td>
                    <td align ="center" width="134"><font color = "#333"><a href="contact.html">CONTACT US</a></font></td> 
                    <td>|</td>
                    <td align ="center" width="61"><font color = "#333"><a href="faq.html">FAQ</a></font></td> 
                    <td>|</td>
                    <td align ="center" width="213"><font color = "#333"><a href="terms.html">PRIVACY & TERMS</a></font></td>
                    <td align ="center" width="175"><font color = "#333">&copy;Unavit 2012</font></td>
                    <td align ="center" width="48" height="50"><a href="http://twitter.com" target="_blank"><img src="images/tweet.png" width="50" height="50"/></a></td>
                    <td align ="center" width="51" height ="50"><a href="http://facebook.com" target="_blank"><img src="images/face.png" width="50" height="50"/></a></td>
                </tr>
            </table>       
        </div> 
    </div>
</div>
</body>
</html>

here is the css:

* {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 19px;
    color: #33333;
}
ol {
    margin:1em 0 1em 3em;
}
ul {
    list-style:disc;
    margin:1em 0 1em 3em;
}
li {
    margin:.3em 0
}
body {
    background-color: #9FCC3A;
    font-family: "Comic Sans MS", cursive;
}
a {
    text-decoration: none;
    color: #333;
}
a:link {
    text-decoration:none;
    color: #333;
}
a:hover{
    text-decoration:none;
    color: #333;
}
a:visited{
    text-decoration:none;
    color: #333;
}
a:active {
    text-decoration: none;
    color: #333;
}

#header {
    background-color: #33C0C5;
    height: 240px;
    overflow: hidden;
    width: 100%;
}

#mapsHeader {
    height: 67px;
    overflow: hidden;
    width: 100%;
}

#header #banner {
    width: 1028px;
    left: auto;
    right:auto;
    margin-right: auto;
    margin-left: auto;
}

#mapsHeader #mapsBanner {
    width: 100%;
    height: 67px;
    left: auto;
    right: auto;
    margin-right: auto;
    margin-left: auto;
    background-image: url(../images/mapsBanner.png);
    background-repeat: repeat-x;
}
#mapsContent {
    width: 100%;
    height: auto;
    background-color: #33333;
    overflow: hidden;
}

#mapsContent #mapsBodyArea{
    width: 1028px;
    margin-right: auto;
    margin-left: auto;
}

#content {
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    overflow: hidden;
}

#content #bodyArea{
    width: 1028px;
    margin-right: auto;
    margin-left: auto;
}

#content #bodyArea #mapsRight {
    width: 773px;
    float: right;
}
#content #bodyArea #mapsLeft {
    width: 255px;
    float: left;
}

#content #bodyArea #leftJoin{
    width: 107px;
    float: left;
}

#content #bodyArea #rightJoin{
    width: 921px;
    float: right;
}

#content #bodyArea #mapBoxSpacer {
    height: 33px;
}

#content #bodyArea #mapBoxSpacer2 {
    height: 50px;
}

#content #bodyArea #spacer{
    height: 100px;
}

#content #bodyArea #smallSpacer {
    height: 15px;
    clear: both;
}

#content #bodyArea #spacer1{
    height: 50px;
}

#content #bodyArea #left {
    width: 586px;
    float: left;
}

#content #bodyArea #aboutTitle {
    width: 1028;
}

#content #bodyArea #leftAbout {
    width: 450px;
    float: left;
}

#content #bodyArea #rightAbout {
    width: 574px;
    float: left;
}

#content #bodyArea #left #nav {
    position: relative;
}
#img2 {
    position: absolute;
    left: 21px;
    top: 25px;
}
#img3 {
    position: absolute;
    left: 21px;
    top: 75px;
}
#img4 {
    position: absolute;
    left: 21px;
    top: 125px;
}
#img5 {
    position: absolute;
    left: 21px;
    top: 175px;
}
#img6 {
    position: absolute;
    left: 21px;
    top: 225px;
}
#navFont {
    font-size: 15pt;
    font-family: Arial, Helvetica, sans-serif;
}

#content #bodyArea #left #spacerLeft {
    height:15px;
}
#content #bodyArea #right {
    width: 442px;
    float: right;
}
#content #bodyArea #right #spacerRight {
    height: 10px;
}
#content #bodyArea #right #clear {
    width: 590px;
    clear: both;
}
#content #bodyArea #right #rightLeft {
    width: 295px;
    float: left;
}
#content #bodyArea #right #rightRight {
    width: 290px;
    float: right;
}
#content #bodyArea #right #rightRight #spacerRightRight {
    height: 10px;
}
#footer {
    background-color: #9FCC3A;
    width: 100%;
    overflow: hidden;
}

#footer #container {
    clear: both;
    width: 1028px;
    height: 50px;
    margin-right: auto;
    margin-left: auto;
}
#footer #container #bottomNav {
    width: 1028px;
    float: right;
    color: #333;
}
#footer #container #spacerFooter {
    width: 191 px;
    float: left;
}
#footer #container #clearFooter {
    clear:both;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your rule is: 

    #mapsContent {
    width: 100%;
    height: auto;
    background-color: #33333;
    overflow: hidden;
}

    When it should be

    background-color: #333333;

    You were one 3 short.

    • 0