Forum Moderators: not2easy
I have a spacing issue on my template that I cannot seem to figure out how to get rid of.
When the page loads, it looks and views like it supposed to, however, it scrolls to the right with a bunch of dead space that is unnecessary.
I believe this is the culprit -
CSS Code:
#bottomwrapper { width:100%;
background:transparent url(../images/footer_bkg.png) repeat-x;
float:left;
position:relative;
font-size:12px;
color:#FFF;
height:185px;
padding-left:30px;
padding-right:30px;
padding-top:10px;
}If I take out Width:100% the background for the bottomwrapper is too small, and if I add it, it extends the side scroll.
And the PHP where I call the css is as follows:
<?php if ($this->countModules('bottom-fixed')) { ?><div id="bottomwrapper"><div id="bottomwrapper-inner" style="width:<?php echo $overallwidth;echo $overallwidthpxper;?>">
<jdoc:include type="modules" name="bottom-fixed" style="xhtml" />
</div></div>
<?php } ?>
I have tried taking the 100% width from the CSS and placing it in the bottomwrapper div tag, but the same issue arises.
Any ideas would be greatly appreciated. Thank you.
[edited by: limbo at 11:07 am (utc) on Jan. 12, 2010]
By the way, what happens if you set the width to 95%?
And just so you know, you're not supposed to include your site's domain name in your post.
I use firebug, and loaded the page and checked the margins, which for the parent are 0. I have loaded turned off each portion of the css directly related to the bottomwrapper, and the only thing that removes the extra scroll is to disable the width. However, when I do that, the image does not span across the entire page.
I made the change to 95% as you suggested. It seems to be a good short term fix.
Cool. The only problem with the 95% thing is that, if the empty space is wider than 5% of the page, the horizontal scrollbar will still appear.
But the fact that it changes is a good thing. It indicates that the problem is probably that "bottomwrapper" is being set to the width of the page, and something else is adding onto that--making the total width > 100% of the window, so the scrollbar appears.
What is the rest of the structure of the page? Don't post all your html, but could you post something that gives a general idea of what blocks contain what?
What happens if you run it with padding-left AND padding-right turned off--does the empty space to the right get smaller?
PS Remember that padding increases the total width/height too, even though it's inside the border.
Drag - I removed the float to see and it jumps to the top of the page and adds the extra space as before.
Is there another div you could put
background:transparent url(../images/footer_bkg.png) repeat-x;
in? Then you'd still have the background and could remove width:100% from bottomwrapper.
I just have the innerwrapper div on that and, unfortunately with the way the padding/spacing is setup, would look kind of funny. My next option I guess would be to slice up the image and apply it throughout the bottomwrapper divs?
