SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    america
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    "div.scroll" does not float below background-image in Firefox

    I am using a nice "div.scroll" in my layout. Unfortunately it does not work 100% in Firefox, no problems in IE and Opera! In Firefox the scrollfield is above a background-image!?

    Does anyone have experience with that? I would appreciate any helpful ideas!

    Thanks!
    the html:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="default02.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="wrap">
    <div id="left"> 
    <div id="contentleft"></div>
    </div>
    <div id="outside"><div id="background01"><h1>Welcome! </h1></div><br />
          <div class="scroll"><p>So you have a great idea that you want to turn into the Next Big Thing? Well, jump aboard the Web 2.0 bandwagon! The momentum that's building behind web applications means there's never been a better time to start reaping the rewards of your hard work.</p>
    	  <p>So you have a great idea that you want to turn into the Next Big Thing? Well, jump aboard the Web 2.0 bandwagon! The momentum that's building behind web applications means there's never been a better time to start reaping the rewards of your hard work.</p>
    	  <p>So you have a great idea that you want to turn into the Next Big Thing? Well, jump aboard the Web 2.0 bandwagon! The momentum that's building behind web applications means there's never been a better time to start reaping the rewards of your hard work.</p>
    	  <p>So you have a great idea that you want to turn into the Next Big Thing? Well, jump aboard the Web 2.0 bandwagon! The momentum that's building behind web applications means there's never been a better time to start reaping the rewards of your hard work.</p>
    	  <p>So you have a great idea that you want to turn into the Next Big Thing? Well, jump aboard the Web 2.0 bandwagon! The momentum that's building behind web applications means there's never been a better time to start reaping the rewards of your hard work.</p>
          </div></div>
    	  </div>
    </body>
    </html>
    the css:
    HTML Code:
    #wrap {
    background:url(images/main01.gif) top left repeat-y;
    position:absolute;
    height:576px;
    width:890px;
    top:50%;
    margin-top:-288px;/* half container height*/
    left:50%;
    margin-left:-445px;
    }
    #left {
    float:left;
    width:445px;
    padding-left: 2px;
    }
    #contentleft {
    height:375px;
    padding-left: 31px;
    padding-top: 20px;
    padding-bottom: 21px;
    	}
    #outside{
    padding-right:10px;
    }
    #background01 {
    background: url(images/background01.gif);
    width: 430px;
    float:right;
    	}
    #background01 h1 {
    font-family: "Times New Roman", Times, serif;
    font-size: 21px;
    color: #FFFFFF;
    padding-top: 70px;
    padding-left: 210px;
    	}
    #contenttext {
    padding-top:100px;
    margin-left:460px;
    }
    div.scroll {
    padding-left:20px;
    height: 320px;
    width: 410px;
    overflow: auto;
    }

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    floats are not cleared in outside and wrap
    head+body #outside:after,head+body #wrap:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }

    the float is not meantained
    .scroll {float:right;

    set all default padding and margins to 0, then adjust
    *{margin:0;padding:0;}

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    america
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help, but I can't figure what you are trying to tell me...

    It does not help if I assign "clear:both" to "outside" and "wrap".

    floats are not cleared in outside and wrap
    head+body #outside:after,head+body #wrap:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }

    the float is not meantained
    .scroll {float:right;

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    ad float right to scroll

    clear the floats in outside and wrap

    with code block:

    head+body #outside:after,head+body #wrap:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }

    code added
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	#wrap {
    background:#ccff99 url(images/main01.gif) top left repeat-y;
    position:absolute;
    height:576px;
    width:890px;
    top:50%;
    margin-top:-288px;/* half container height*/
    left:50%;
    margin-left:-445px;
    }
    #left {background:#ccffff;
    float:left;
    width:445px;
    padding-left: 2px;
    }
    #contentleft {float:right;background:#ccffcc;
    height:375px;
    padding-left: 31px;
    padding-top: 20px;
    padding-bottom: 21px;
    	}
    #outside{
    padding-right:10px;
    }
    #background01 {
    background:#ffffcc url(images/background01.gif);
    width: 430px;
    float:right;
    	}
    #background01 h1 {
    font-family: "Times New Roman", Times, serif;
    font-size: 21px;
    color: #FFFFFF;
    padding-top: 70px;
    padding-left: 210px;
    	}
    #contenttext {background:#ccccff;
    padding-top:100px;
    margin-left:460px;
    }
    div.scroll {
    float:right;
    background:#ffccff;
    padding-left:20px;
    height: 320px;
    width: 410px;
    overflow: auto;
    }
    head+body #outside:after,head+body #wrap:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
    	</style>
    </head>
    
    <body>
    <div id="wrap">
    <div id="left"> 
    <div id="contentleft"></div>
    </div>
    <div id="outside"><div id="background01"><h1>Welcome! </h1></div><br />
          <div class="scroll"><p>So you have a great idea that you want to turn into the Next Big Thing? Well, jump aboard the Web 2.0 bandwagon! The momentum that's building behind web applications means there's never been a better time to start reaping the rewards of your hard work.</p>
    	  <p>So you have a great idea that you want to turn into the Next Big Thing? Well, jump aboard the Web 2.0 bandwagon! The momentum that's building behind web applications means there's never been a better time to start reaping the rewards of your hard work.</p>
    	  <p>So you have a great idea that you want to turn into the Next Big Thing? Well, jump aboard the Web 2.0 bandwagon! The momentum that's building behind web applications means there's never been a better time to start reaping the rewards of your hard work.</p>
    	  <p>So you have a great idea that you want to turn into the Next Big Thing? Well, jump aboard the Web 2.0 bandwagon! The momentum that's building behind web applications means there's never been a better time to start reaping the rewards of your hard work.</p>
    	  <p>So you have a great idea that you want to turn into the Next Big Thing? Well, jump aboard the Web 2.0 bandwagon! The momentum that's building behind web applications means there's never been a better time to start reaping the rewards of your hard work.</p>
          </div></div>
    	  </div>
    </body>
    </html>

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    america
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Thanks

    Thanks "4allnerds"!

    But it already works without:
    HTML Code:
    head+body #outside:after,head+body #wrap:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
    Adding "float:right;" to "div.scroll" seems to do it!
    I tested it in IE, Firefox and Opera.


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
  •