Question

I am working on a site and have a solid line appearing at the bottom of the page.

The Problem: http://jsfiddle.net/mxh6G/

The Details: I have a container element which has height: 99%;. I have also set up a gradient background effect (using only CSS). Now, beneath my main container element, there is a block of solid colour which matches the colour of the upper half of the gradient fill. However, please note that this is not what is causing the problem as even when I remove the gradient section of the CSS altogether, the blank line is still visible (I have set the background-color: of my container element to red so that I can see if the problem still persists).

For example, if the gradient fades from red (top) to black (bottom), the solid line at the bottom of the page is red.

I have set the height to 100% and even up to 150% for my container element and the solid line is still there.

An example might be like this:

+----------------------+
|   _________________  |
|  |        C       |  |
|  |        O       |  |
|  |        N       |  |
|  |        T       |  |
|  |        A       |  |
|  |        I       |  |
|  |        N       |  |
|  |        E       |  |
|  |        R       |  |
+______________________|
|______________________| <--- solid line appears here 
                              (but narrower, approx 5px in height).

Hopefully this gives you all a rough idea of what the problem is.

My HTML is absolutely fine – I have checked it thoroughly and there are no elements outside of the container <div> element.

I know that there could be any number of solutions, so to simplify things, I would like to ask if there are any commonly-known (or not-so-commonly-known) problems related to CSS which could cause this to happen?

Or, better still, has anybody else had this problem and if so, how did you rectify it (if applicable)?

Thanks for your time.

Mick

UPDATE: Here is the problem: I have set the top margin of container to 5px and it results in the bottom of the page also displaying a 5px margin from the bottom. If I set it to 0, however, then the margin at the bottom of the page is also set to 0.

Could somebody possibly figure out why this is happening?

(NOTE: You have to extend the frames outwards to view the page as it is intended and to also see the problem).

http://jsfiddle.net/mxh6G/

Answer 1

set this in css

body{margin:0; padding:0;}

or

* {margin:0; padding:0;}