Solved

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

Posted on 2010-09-06
3
360 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
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Mobile menu navigation , its html and css 6 54
How do i set padding within the sidebar? 2 27
Error in page 3 45
Error in script 11 45
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

919 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now