Forum Moderators: not2easy
I have a wrapper consisting of a background image repeating along the y-axis wrapping the content in my template. In IE, the wrapper stretches all the way to the bottom of the page, but in FF, the wrapper stops where the content stops and there is a 30px gap on the bottom of the page. (even though the content isnt a short page and is about 1500pixels high). Here is the code I have:
HTML:
<div class="header">irrelevant to this issue</div>
<div id="wrapper">content</div>
CSS:
body{
background: #181818;
color: #E8D988;
font-family: Verdana, Tahoma, Arial, "Trebuchet MS", Sans-Serif, Georgia, Courier, "Times New Roman", Serif;
font-size: 11px;
line-height: 135%;
margin: 0px;
padding: 0px; /* required for Opera to have 0 margin */
text-align: center; /* centers board in MSIE */
}
#wrapper{
background: #181818 url(style_images/<#IMG_DIR#>/vertical_bg.gif) repeat-y;
width: 1035px;
margin: 0px auto 0px auto;
min-height: 1300px;
}
I've tried setting the height on the body to 100%, and min-height: 100%; on #wrapper, but that did not do anything.
I also tried adding min-height: 1500px; to #wrapper, and it worked, but the only problem that this template is a forum skin, so each forum will have different length pages (vertically) so a manual pixel value wont work.
If anyone has any suggestions that would be great.
Thanks,
Bob
[edited by: jatar_k at 2:29 am (utc) on July 9, 2008]
[edit reason] no urls thanks [/edit]
And Welcome to WebmasterWorld! :)
