Grow your CSS skills. Land your dream job.

Strange CSS Issues

  • # January 21, 2009 at 4:55 am

    Hi Everyone, I’m having some issues with one of my CSS layouts. First of all, let me explain the layout. I have a container, banner, flash content, one column, two column, and three column. Finally, there is a footer.

    Ok…so, the problem is that my banner has a specified color assigned to the background, but once I test (F12), there is no background color evident. It can be seen in Dreamwever, but not when I preview the web page. The same thing is happening to the footer DIV. I have the banner, and footer at a width of 100% and everything else at a fixed pixel rate.

    I’m at a loss as to what the issue it (and I suspect it’s probably an easy fix that I don’t know about).
    Here’s the code to the layout. I don’t have this posted online yet, so here’s the code. If you have a solution to my issue, I would greatly appreciate your help.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <style type="text/css">
    #container{
    width:100%;
    margin:auto;
    text-align:left;
    }
    #banner{
    width:100%;
    height:250px;
    background-color: 670707;
    z-index:1;
    }
    #flash{
    margin:auto;
    width:800px;
    height:250px;
    background-color: #666600;
    }
    #wrapper{
    width:800px;
    height:255px;
    margin:auto;
    }
    #OneColumn{
    width:255px;
    float:left;
    background-color: #999999;
    padding-left: 10px;
    padding-top: 10px;
    height: 300px;
    }
    p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    line-height: 20px;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #333333;
    text-decoration: none;
    }
    #TwoColumn{
    width:265px;
    background-color: #999999;
    float:left;
    padding-left: 10px;
    padding-top: 10px;
    height: 300px;
    }
    #ThreeColumn{
    width:250px;
    float:left;
    background-color: #999999;
    padding-left: 10px;
    padding-top: 10px;
    height: 300px;
    }

    #footer{
    width:100%;
    clear:both;
    background-color: #670707;
    }
    .style1 {color: #FFFFFF}
    #apDiv1 {
    position:absolute;
    left:0px;
    top:0px;
    width:377px;
    height:300px;
    z-index:1;
    }
    #apDiv2 {
    position:absolute;
    left:0px;
    top:0px;
    width:377px;
    height:200px;
    z-index:1;
    }
    #apDiv3 {
    position:absolute;
    left:0px;
    top:0px;
    width:250px;
    height:250px;
    z-index:1;
    }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>RWS Designs</title>
    </head>

    <body topmargin="0" bottommargin="0" rightmargin="0" leftmargin="0">
    <div id="container">
    <div id="banner">
    <div id="flash"></div>
    </div>
    <div id="wrapper">
    <div id="OneColumn">
    <p>Welcome To My Site!<br />
    My name is Rob Stathem and I’m a dedicated and passionate designer that enjoys all things web related. I started my own business because I’m serious about creating professional websites for clients of mine. I’m also dedicated and committed to CSS, which is both triumphant and frustrating! </p>
    <p>&nbsp;</p>
    </div>
    <div id="TwoColumn">
    <p>History<br />
    RWS Designs is a new business owned and operated by Rob Stathem. Rob brings his passion for design as well as his knowledge for clean and accessible website designs. What you get at RWS Designs is pure excellence!</p>
    </div>
    <div id="ThreeColumn">
    <p>Services<br />
    RWS Designs offers design services including:</p>
    <ul>
    <li>Graphic Design</li>
    <li>Photography</li>
    <li>Logo Design</li>
    <li>Corporate Branding</li>
    <li>Dynamic Web Page Design</li>
    </ul>
    <p>&nbsp;</p>
    </div>
    <div id="footer">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
    </div>
    </div>
    </body>
    </html>

    Rob
    # January 21, 2009 at 5:32 am

    you missed a # tag off the front of your background colour hex.

    See if that kickstarts you or if you need anymore help :)

    # January 21, 2009 at 1:43 pm

    OMG! No way! LOL!

    Geez, well, It was late when I put this together so there’s no telling. Thanks Rob for pointing out my rediculous mistake! And yes, that did solve the issue.

    :) Rob

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".