How can I get rid of the white spacing at the top/bottom of my page?

Question

I'm trying to remove the top spacing of my layout I am working on, which you can view here: 50.116.81.173/~speedcit/wordpress/. However, I don't seem to be having much luck with it. I essentially would like to remove the white spacing at the top of the page.

Below is the CSS code I am currently using:

body, html {
    font-family: Arial;
    font-size: 11.5pt;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

table, tr, td, div {
    font-family: Arial;
    font-size: 11.5pt;
}

#outer {
    text-align: center;
    margin: 0px;
}

#wrapper {
    border-left: 1px #000000 dotted;
    border-right: 1px #000000 dotted;
    padding-top: 2px;
    padding-left: 2px;
    text-align: left;
    width: 1024px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
}

#header {
    background-image: url(http://50.116.81.173/~speedcit/images/header.jpg);
    width: 1024px;
    height: 280px;
}

#menu {
    width: 1024px;
    height: 61px;
}

#content {
    background-image: url(http://50.116.81.173/~speedcit/images/content-bg.jpg);
    background-repeat: no-repeat;
    width: 804px;
    height: 357px;
    padding-top: 80px;
    padding-bottom: 10px;
    padding-left: 110px;
    padding-right: 110px;
    line-height: 24pt;
}

#footer {
    margin: 0px;
    padding: 0px;
}

.txt {
    color: #BF2736;
    font-weight: bold;
}

score 1 · Answer 1 · answered Jan 30 '13 at 22:33

1

Add padding 0 to your wrapper. CSS reset should fix your problem but might create new ones. http://meyerweb.com/eric/tools/css/reset/

#wrapper {padding:0;}

The root cause to the problem is that you did not reset the way in which the browser renders CSS back to zero.

answered Jan 30 '13 at 22:33

khollenbeck

16,028
18
66
101

I just did this but I'm still getting the space for some reason. – Omar Jan 30 '13 at 22:37
There are probably other things that need to the padding and margin set to zero as well. – khollenbeck Jan 30 '13 at 22:39
Also what other white space are you referring to? – khollenbeck Jan 30 '13 at 22:40
I am not seeing it on top anymore in IE9. What version of IE are you using? – khollenbeck Jan 30 '13 at 22:54
Looks like it was the admin panel that WordPress sets at the top. Looks fine to me now! – Omar Jan 30 '13 at 23:02

score 0 · Accepted Answer · answered Jan 30 '13 at 22:34

0

Change the Padding of the #wrapper to Zero

#wrapper {
    border-left: 1px #000000 dotted;
    border-right: 1px #000000 dotted;
    padding-top: 0px; -- Change This to zero!!!
    padding-left: 2px;
    text-align: left;
    width: 1024px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
}

You might want to read about css reset tool

http://meyerweb.com/eric/tools/css/reset/

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on

answered Jan 30 '13 at 22:34

Silagy

3,053
2
27
39

I just set padding: 0 and margin: 0 and still get the spacing unfortunately... And I've already applied the css reset tool. – Omar Jan 30 '13 at 22:37
In which browser are you looking? because i am looking at your site with chrome and i don't see space at the top of the page – Silagy Jan 30 '13 at 22:48
I have checked your site with IE 7,8,9,10 and there is no space at the top are sure that you cleared the cache? – Silagy Jan 30 '13 at 22:55
http://www.wikihow.com/Clear-Your-Browser's-Cache#Internet_Explorer_8 follow this instructions to clear the cache... – Silagy Jan 30 '13 at 22:58
Now I feel dumb... It's because the "admin cp" was enabled so I was viewing the spacing for the admin toolbar that WordPress puts. Thanks for the help!!! – Omar Jan 30 '13 at 23:00

score 0 · Answer 3 · answered Jan 30 '13 at 22:37

0

Replace padding-top:2px with padding:0 in the #wrapper rule. If you add padding:0 before the padding-top property, you will still have the problem.

answered Jan 30 '13 at 22:37

vaporbook

275
1
7

score 0 · Answer 4 · answered Jan 30 '13 at 22:39

0

problem of your bottom padding is image it-self. There is a white space in image. Edit it and remove it: 50.116.81.173/~speedcit/images/footer.jpg

And problem of your top white space is what others said before.

answered Jan 30 '13 at 22:39

Soroush Falahati

2,196
1
27
38

@Omar , I can see that you changed your CSS rules and this solved your top white space but your bottom image file is still the same. You must edit it with a program like Paint or Photoshop and remove unneeded space from it. – Soroush Falahati Jan 30 '13 at 22:56

How can I get rid of the white spacing at the top/bottom of my page?

4 Answers4