| Div stretching more than necessary
|
dinans52
msg:4323658 | 9:08 pm on Jun 8, 2011 (gmt 0) |
I have a div called "filler2" after my footer which is meant to continue the background color of the footer if the content doesn't take up all of the window. I have height set at 100%. It works, but the problem is that is stretching more than the window height. To add to the confusion, different browsers/monitors respond differently. The site works as intended on Firefox, but Chrome does the odd stretching thing. Also, nothing happens on IE. Any ideas?
The URL for the site is [imamminhajuddin.org ]
Basic layout:
<body>
<div id="wrapper">
<div id="menu"></div>
<div id="subwrapper">
<div id="content"></div>
<div id="sidebar"></div>
</div><!-- #subwrapper -->
<div id="footer">
<div id="footer_left"></div>
<div id="footer_middle"></div>
<div id="footer_right"></div>
</div> <!-- #footer -->
</div><!-- #wrapper -->
<div id="filler2"></div> <!-- function of this div is to fill remaining space with footer color -->
</body>
CSS:
/*
Theme Name: Minhaj
Theme URI: http://www.adnanhussaini.com
Description: Minhaj website theme
Version: 1.0
Author: Adnan Hussaini
Author URI: http://www.adnanhussaini.com
*/
* {
margin: 0px;
padding: 0px;
border: 0px;
}
A:link {text-decoration: underline; color:#666666;}
A:visited {text-decoration: underline; color:#666666;}
A:active {text-decoration: underline; color:#666666;}
A:hover {text-decoration: underline; color:#FFF;}
ul li {
list-style-position: inside;
}
html {
background: #b3b3b3 url(theme/header_gradient.png) repeat-x;
height: 100%;
}
body {
padding: 0;
margin: 0;
background: url(theme/header.png) no-repeat center top;
color: #000;
width: 100%;
display: table;
}
#wrapper {
width: auto;
height:auto;
margin: 0;
border: 0;
padding: 0px;
background: url(graphics/wrappertest.png);
background-position:bottom;
background-repeat:repeat-x;
}
#filler{
background: #261e1b;
height: 100%;
padding-bottom: 150px;
}
#filler2{
background:#261e1b;
height: 100%;
}
#menu {
width:851px;
height:auto;
background:none;
border: 0;
margin: auto;
padding: 1px 20px 15px 20px;
clear:both;
font-family: Georgia, serif;
font-size: .75em;
font-weight:500;
list-style-type: none;
}
#subwrapper {
width:891px;
height:auto;
background: transparent url(theme/content.png) repeat;
border: 0;
margin: 0px auto;
padding: 0px;
list-style:none
}
#content {
width:650px;
border: 0;
margin: 0px;
padding: 0 15px 0 15px;
float:left;
list-style:circle !important;
list-style-type:circle !important;
}
#holder {
width:623px;
height:283px;
border: 0;
margin: 0;
padding: 13px 0px 0px 13px;
background: url(theme/holder.png);
}
#sidebar{
width:196px;
border: 0;
margin: 0px;
padding: 0 15px 0 0;
float:right;
font-family: Georgia, serif;
}
#form
{
list-style:none;
}
#footer {
clear:both;
width:891px;
height:131px;
background-image:url(theme/footer.png);
background-repeat:no-repeat;
background-position:center top;
border: 0px;
margin: auto;
padding: 40px 0 0 0;
font-family: Georgia, serif;
text-align:center;
color:#333;
font-size:.7em;
}
#footer_left{
width:400px;
height:80px;
padding-left: 10px;
float:left;
color: #CCCCCC;
text-align:left;
}
#footer_middle{
width:220px;
height:80px;
padding-left: 10px;
float:left;
color: #CCCCCC;
text-align:left;
}
#footer_right{
width:230px;
height:80px;
padding-right: 5px;
padding-left: 15px;
color: #CCCCCC;
float:right;
text-align:left;
}
.clear
{
clear:both;
}
h1 {
margin: 0;
padding: 0;
color: #093;
}
.post{
padding-bottom:10px;
font-family: Georgia, serif;
}
.bodypost{
font-family: Georgia, serif;
color: #00000;
font-size:.75em;
line-height: 20px;
}
.commentpost{
background-color: #CCC;
padding: 5px;
color: #00000;
font-size:.75em;
line-height: 20px;
}
.adminmessage{
color:#F00;
}
.bodypost ul{
margin-left: 0;
padding-left: 15px
}
.bodypost p{
margin: 0;
padding-top: .20em;
padding-bottom: .20em;
}
.postmetadata{
color:#333;
font-size:.7em;
}
/* comments */
.comments-template{
margin: 10px 0 0;
border-top: 1px solid #ccc;
padding: 10px 0 0;
}
.comments-template ol{
margin: 0;
padding: 0 0 15px;
list-style: none;
}
.comments-template ol li{
margin: 10px 0 0;
line-height: 18px;
padding: 0 0 10px;
border-bottom: 1px solid #ccc;
}
.comments-template h2, .comments-template h3{
font-family: Georgia, Sans-serif;
font-size: 16px;
}
.commentmetadata{
font-size: 12px;
}
.comments-template p.nocomments{
padding: 0;
}
.comments-template textarea{
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
}
/* form elements */
#formspacer {
padding-top:3px;
width:100%;
}
.input {
border: 1px solid #CCCCCC;
background: #ffc;
font-family: Georgia, serif;
}
.button-primary {
border: 1px solid #CCCCCC;
background: #333;
color: #CCCCCC;
font-family: Georgia, serif;
float: right;
|
alt131
msg:4325418 | 11:30 am on Jun 13, 2011 (gmt 0) |
Hi dinans52 [webmasterworld.com] - and welcome to WebmasterWorld,
#filler2 takes it's 100% height from it's parent element, so there needs to be a height set on body.
You haven't said what versions you are supporting, but post #4 in the forum ibrary deals with height issues across of a range of browser versions.
|
|
|
