SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot Enzyme Online's Avatar
    Join Date
    Jun 2007
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Height in FF to Show Background?

    I can't get firefox to show backgrounds without specifying a height or a minimum height and even if I specify a minimum height, it only goes the min-height length.

    am I doing something wrong for this background not to show?
    it works fine on ie6 and ie7

    here's the sample code:

    HTML:

    <div id="content">

    <h1>Title 1</h1>

    <p>blah blah blah blah blah blah blah blah blah blah</p>
    </p>

    <hr>

    <p>blah blah blah blah blah blah blah blah blah blah</p>

    </div>

    CSS:

    #content{
    background-color: #000000;

    width: 100%;

    margin: 0 0 20px 0;
    padding: 0;
    }
    Now up and running!
    Enzyme Online | Professional and Affordable Web Design

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What does the rest of your code look like?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The above code is working fine and the background is showing OK. (You do have a stray closing p tag in that code but its still working)

    If the above code isn't the code you are having problems with then I am guessing that you have floated content in your page and background do not auto enclose floated content. Floats are removed from the flow and float out of their parent containers.

    You need to add a clearing element after the float but before the parents closing div. Or use one of the other clearing techniques shown in the FAQ on floats.

  4. #4
    SitePoint Zealot Enzyme Online's Avatar
    Join Date
    Jun 2007
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found out what was wrong. my two columns in the content were floating and that's what was doing it.
    any alternative to a clearer div because that's kind of sketchy

    here's the layout:

    <body>

    <div id="container">

    <div id="header">

    <ul>

    </ul>

    </div>


    <div id="banner">

    </div>


    <div id="content">

    <div class="content-wrapper">

    <div class="left-column">


    </div>


    <div class="right-column">

    <div class="work">


    </div>

    </div>

    </div>

    </div>

    <div id="footer">

    </div>

    </div>
    </body>


    complete CSS:

    #container {
    width: 800px;

    margin: 20px 0 0 40px;
    padding: 0;
    }

    #header{
    height: 200px;
    margin: 0;
    padding: 0;
    }

    #banner{
    margin: 0 0 30px 0;
    padding: 0;
    }

    div.content-wrapper{
    margin: 0;
    padding: 20px;
    }

    #content{
    width: 100%;
    margin: 0 0 20px 0;
    padding: 0;
    }

    div.left-column{
    width: 60%;

    float: left;

    margin: 0;
    padding: 0;
    }

    div.right-column{
    width: 30%;

    float: right;

    margin: 0;
    padding: 0;
    }

    div.work{
    margin: 0;
    padding: 0;
    }
    Now up and running!
    Enzyme Online | Professional and Affordable Web Design

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you want to read about clearing and containing floats? Other than floating the parent of the floated element(s) too, which often isn't a good option, the PIE/Aslett approach it best.

    P.S. It would be helpful if you put your code between [code][/code] tags in the future.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    SitePoint Zealot Enzyme Online's Avatar
    Join Date
    Jun 2007
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks

    sorry I'm somewhat new at sitepoint
    Now up and running!
    Enzyme Online | Professional and Affordable Web Design

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I found out what was wrong. my two columns in the content were floating and that's what was doing it.
    That's what I said

    The faq explains many ways of clearing and you should read the section on floats for a full understanding.

    In simple situations you can simply add overflow:auto (or hidden) to the parent div (as long as the parent has a width to force layout in IE) or you can use a clearing div or you can even use content that may already be in your div below the float in the same parent container.

    Perhaps the most full proof is the clearfix method that you can re-use just by adding a clearfix class to the parent wherever needed.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #outer{
        width:760px;
        margin:auto;
        background:#ffffcc;
    }
    
    .float{
        width:760px;
        float:left;
    }
    .clearfix:after {
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    .clearfix {
        display:inline-block;
    }
    /* mac hide \*/
    * html .clearfix {height: 1&#37;;}
    .clearfix {display: block;}
    /* End hide */
    
    
    
    </style>
    </head>
    <body>
    <div id="outer" class="clearfix">
        <div class="float">
            <p>Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated
                text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text
                content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : Floated text content : </p>
        </div>
    </div>
    </body>
    </html>

    See the FAQ for an explanation of why this works everywhere.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •