background color problem.

[mirozake]

Hi,

I'm having a problem showing background color on one of my inner containers for a page. Probably really a simple silly solution but I can't see why right now. So, please help. Thank you ahead of time. html and css is as follows.

'Miro

----

<div id="container">

<div id="pageheader">
<img src="images/onebigtop.gif" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="575,16,697,33" href="#whatis.html" />
<area shape="rect" coords="576,37,685,52" href="#whyride.html" />
<area shape="rect" coords="576,56,686,73" href="#whocan.html" />
<area shape="rect" coords="576,79,686,94" href="#howto.html" />
<area shape="rect" coords="705,18,812,34" href="#whereto.html" />
<area shape="rect" coords="705,38,812,53" href="#ridingcan.html" />
<area shape="rect" coords="706,56,812,72" href="#packit.html" />
<area shape="rect" coords="28,130,76,151" href="#faq.html" />
<area shape="rect" coords="94,129,211,153" href="#models.html" />
<area shape="rect" coords="232,128,311,152" href="#accessories.html" />
<area shape="rect" coords="325,128,408,151" href="#testimonials.html" />
<area shape="rect" coords="426,128,512,153" href="#warranties.html" />
<area shape="rect" coords="521,129,622,152" href="#technical.html" />
<area shape="rect" coords="631,129,710,151" href="#contactus.html" />
<area shape="rect" coords="725,127,800,152" href="#aboutus.html" />
</map>
</div>

<div id="container2">

<div id="title1">
<p><img src="images/watchaction.gif" /> </p>
<p> <img src="images/watch.jpg" /></p>
</div>

<div id="title1">
<p><img src="images/whatis.gif" /> </p>
<p> <img src="images/thatpic.jpg" /></p>
</div>

<div id="title1">
<p><img src="images/whyride.gif" /> </p>
<p> <img src="images/whyride.jpg" /></p>
</div>

<div id="title1">
<p><img src="images/whocan.gif" /> </p>
<p> <img src="images/whocan.jpg" />
</p>
</div>

<div id="title1">
<p><img src="images/howto.gif" /> </p>
<p> <img src="images/howto.jpg" />
</p>
</div>

<div id="title1">
<p><img src="images/whereto.gif" /> </p>
<p> <img src="images/whereto.jpg" />
</p>
</div>

<div id="title1">
<p><img src="images/canhelp.gif" /></p>
</div>

<div id="title1">
<p><img src="images/packit.gif" /> </p>
<p> <img src="images/packit.jpg" /></p>
</div>

</div>

</div>

</body>
</html>

----------and css...

html {
margin: 0;
padding: 0;
}

body {
font-family:Arial, Helvetica, sans-serif;
line-height:18px;
font-size:12px;
color: #06185c;
background: #a7cf52 url(images/bg1.jpg) repeat-x;
margin: 0;
padding: 0;
}

body a:link, a:active, a:visited{
text-decoration:none;
color:#720a0b;
}

body a:hover{
text-decoration:underline;
}

p{
margin: 10px;
padding: 0;
}

h3 {
display:none;
}

ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}

li {
background: url(bullet.gif) left center no-repeat;
padding-left: 7px;
margin-bottom: 5px;
}

#container {
margin: auto;
width:826px;
position:relative;
}

#container2 {
margin: auto;
width:600px;
background-color:FCD537;
}

#pageheader {
margin:auto;
width:826px;
height:155px;
overflow:hidden;
}

#title1 {
margin-top: 40px;
margin-left: -20px; }

/* #img1 {
margin-top: 20px;
margin-left: -20px; } */

#main {
position:relative;

}

[penders]

#container2 {
margin: auto;
width:600px;
background-color:#FCD537;
}

You are missing the '#' before the color value on #container2.

NB: The W3C CSS Validator [jigsaw.w3.org] would also pick this up.

[nimit]

thats right

[mirozake]

Thank you. It's little things like this that really put a cramp on my learning process sometimes, especially with code.

Is there something out there that can show me these obvious things missing? Dreamweaver doesn't help by still showing the actual color and all even if # missing. Any automatic code checking ideas?

[penders]

Thank you. It's little things like this that really put a cramp on my learning process sometimes, especially with code.

No worries :) Yeah when you've been looking at your own code for hours it can be easy to miss things at times - another pair of eyes can do wonders!

Is there something out there that can show me these obvious things missing?

The online W3C CSS Validator (link above) sets the standard on making sure your CSS is at least syntactically correct. You can provide a link to an online page to get tested, or paste your page/snippet. And the corresponding W3C (X)HTML Validator [validator.w3.org] validates your markup.