CSS: I have a white bar at the top of my page

Question

I have a white bar at the top of my page, and I don't know what in my code is causing it. I won't paste the whole thing here, because it is lengthy, but can someone view the source and maybe tell me what in the code is causing it to show up?

http://ddofans.org/design3/

Answer 1

it's because you have hr.fancy-line:before and after positioned absolute which takes it out of the flow of your document. You can make you .container {position:relative;} which is a possible fix.

This is located in design3.css line 104

hr.fancy-line:before, hr.fancy-line:after {
content: '';
position: absolute;
width: 100%;

It could also be on line 124 of design3.css

body, hr.fancy-line:after {
background: #F4F4F4;
}

Answer 2

It is because of the following line:

hr.fancy-line:after { background: #f4f4f4; }

design3.css line 124

you can delete this line if you donot need it