SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
-
Apr 2, 2006, 10:40 #1
- 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>
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; }
-
Apr 2, 2006, 11:02 #2
- 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;}
-
Apr 4, 2006, 06:43 #3
- 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;
-
Apr 4, 2006, 07:09 #4
- 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>
-
Apr 4, 2006, 07:38 #5
- Join Date
- Feb 2004
- Location
- america
- Posts
- 133
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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; }
I tested it in IE, Firefox and Opera.
Bookmarks