CSS background color not working properly

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • surpavan
    New Member
    • Nov 2009
    • 6
    #1

    CSS background color not working properly

    Good afternoon

    i am a newbe.. I have tried to create a small site with the following code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta content="en-us" http-equiv="Content-Language" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <style type="text/css">
    #page {
    background-color: #FFFFFF;
    margin-right: auto;
    margin-left: auto;
    border: 2px solid #008000;
    font-family: Gabriola, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
    width: 97%;
    height:auto;
    max-width: 1200px;
    }
    #banner {
    background-color: #3366FF;
    width: 100%;
    height: 150px;
    }
    #body {
    width: 100%;
    height: auto;
    margin-top: 10px;
    }
    #leftnavpanel {
    float: left;
    width: 20%;
    background-color: #008000;
    margin-top: 2px;
    margin-right: 1px;
    margin-bottom: 2px;
    padding-left: 10px;
    }
    #content {
    width: 78%;
    height: auto;
    float: right;
    border: thin solid #00FF00;
    background-image: none;
    }
    </style>
    </head>

    <body style="backgrou nd-color: #8B8878">
    <div id="page">
    <div id="banner"></div>
    <div id="body">
    <div id="leftnavpane l">asdasd<br />
    asd<br />
    </div>
    <div id="content">as dasd<br />
    asd<br />
    </div>
    </div>
    </div>
    </body>
    </html>
    However, the problem that I am facing is because the color white [ffffff] that was given in upper element -div page - is not working properly. the lowers divs are not getting the color white as background, in stead they are getting the defaut body tag color. and more over expression web is displaying this perfectly in work area, but when comes to IE and Mozilla preview it is failing.

    Could you please help me.
    Attached Files
    Tags: backgrund color, css, expression web, html
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      I guess it’s because it’s floated (and the parent element does not stretch wide enough)…

        Comment

        • surpavan
          New Member
          • Nov 2009
          • 6
          #3
          Thank you for the reply Dormilich, however, I want the last div to float right else this div would come down the berfore one. We can solve this by using table, however, i prefer not to use table, could you/anyone please advice on a solution.

          Thank you very much.

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694
              #4
              why don’t you define the colour manually?

                Comment

                • surpavan
                  New Member
                  • Nov 2009
                  • 6
                  #5
                  You meen the background color of the last div. I can do that, however, the gap between the last div and the its before div is about 2% which would result in displaying the page color instead of the color I want.

                  Thanks for the reply and looking forward :)

                    Comment

                    • drhowarddrfine
                      Recognized Expert Expert
                      • Sep 2006
                      • 7434
                      #6
                      Background color is working properly here. This property cannot be inherited by child divs.

                        Comment

                        • Dormilich
                          Recognized Expert Expert
                          • Aug 2008
                          • 8694
                          #7
                          Originally posted by surpavan
                          I can do that, however, the gap between the last div and the its before div is about 2% which would result in displaying the page color instead of the color I want.
                          what about closing that gap in the CSS?

                            Comment

                            • surpavan
                              New Member
                              • Nov 2009
                              • 6
                              #8
                              Thank you for the reply guys, however, as Dormilich said, I could use CSS to cover gaps, this would not ba a perfect solution; if I want to create a single marging at the bottom of both these divs, it would not coincide properly because the left nav div would be lot more smaller than the content div.

                              Thank you Dormilich and drhowarddrfine for the replies and look forward to hear :)

                                Comment

                                • Dormilich
                                  Recognized Expert Expert
                                  • Aug 2008
                                  • 8694
                                  #9
                                  Originally posted by surpavan
                                  I could use CSS to cover gaps
                                  you define a 2% gap between the floats

                                    Comment

                                    • surpavan
                                      New Member
                                      • Nov 2009
                                      • 6
                                      #10
                                      Hi Dormilich,

                                      Thank you for all the replies. however, in defining sizes, I did not use px, I used %, this means, the 2 would be correct, however, if I now or later define a border for the div, then the 2% would vary and the last div would be dispositioned to downward.

                                      Thank you once again.

                                        Comment

                                        • surpavan
                                          New Member
                                          • Nov 2009
                                          • 6
                                          #11
                                          Hi Dormilich,

                                          Thank you for explaining what Float is in the above replies. I now came to know what float is. So,, no i have a simple solution.

                                          Just define a div at the end of all divs, this way even if other divs float, the parent div would know till where the last div is and the backgriound color would spread out.

                                          Thank you every one for your support........ ..

                                            Comment

                                            Previous template Next
                                            Working...