Solved

extra space appearing at bottom of page due to CSS, how to eliminate

Posted on 2010-09-06
3
363 Views
Last Modified: 2012-06-27
On this page:

http://secure.bbdesign.com/sterlingmodular/

...if you reduce the height of the browser window to force scrolling, there is about 60 pixels of unwanted vertical space below the content on the page (see attached screenshot from Safari). I tried to code my CSS to have no margins or padding that would cause all that space.

I need to somehow eliminate it. I've spent a lot of time trying different things and its becoming frustrating. It may be something simple and I'm just not seeing it. So I would really appreciate another set of eyes to take a look. Thank you!

screenshot
0
Comment
Question by:bbdesign
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 13

Accepted Solution

by:
darren-w- earned 500 total points
ID: 33611893
This looks like the size of the div that is holding the image and the text, try styling these divs to the correct height (253px)

Darren
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 33612446
@bbdesign.

Inside each of your DIVS you have a class for the paragraph of text (homethree, homefour) that sets the position:relative and, for example, top to -55px.

The gap that appears is because of the that top:-55px - try changing that to margin-top:-55px; and see how you get on.


0
 

Author Comment

by:bbdesign
ID: 33613064
@darren-w-: that did it! Thanks. I assumed a plain <div></div> would just collapse down to the minimum size.

@chrisstanyon: I did try that, but no affect. The "top" isn't a margin, if I change it to margin-top, then the text appears below the image instead of over it.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question