Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Strange CSS Issues

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • January 21, 2009 at 4:55 am #24009
    robstathem
    Member

    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>

    January 21, 2009 at 5:32 am #53359
    Rob MacKay
    Participant

    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 #53376
    robstathem
    Member

    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

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.