CSS Forum

**Slick Nick** · 03-04-2007, 04:51 PM

Since my other topic stopped getting responses...

http://accomputers.org/index.php

See how theres a gap around the gradiant? How do I get rid of that? Iv searched around on google but I cant find the answer anywheres :S

heres the CSS

Code:

body {
    font-family: Arial;
    color: #2c2c2c;
    background: 
url("http://www.accomputers.org/images/bgr.jpg") repeat-y 
center center;
    background-color: #d1d0d1;
}

#container{
    background: 
url("http://www.accomputers.org/images/bg.jpg") repeat-x
center top;
    width: 100%;
    height: 1000px;
}

#content{
    left: 160px;
}

and the html if that matters:

HTML Code:

<div id="container">
    <div id="content">
    <!-- content goes here -->
    </div>
</div>

**Insensus** · 03-04-2007, 04:55 PM

Maybe try:

Code:

#container{
    background: 
url("http://www.accomputers.org/images/bg.jpg") repeat-x
center top;
    width: 100%;
    height: 1000px;
    margin: 0 0;
}

**pitbull82** · 03-04-2007, 04:59 PM

I don't understand the problem. Where's the gap?

Maybe you mean page padding?

Code:

body
{
    padding: 0;
    margin: 0;
}

**Slick Nick** · 03-04-2007, 05:08 PM

Quote:

Originally Posted by pitbull82

I don't understand the problem. Where's the gap?

Maybe you mean page padding?

Code:

body
{
    padding: 0;
    margin: 0;
}

yep, that was it

thanks a ton

**LadynRed** · 03-05-2007, 02:59 PM

You should ALWAYS start by zeroing out margin and padding on the body and all your main elements -body, h1-h6, a, etc. This levels the playing field - so to speak. Add margin and padding back into your rules as needed.

**Slick Nick** · 03-05-2007, 10:14 PM

Lesson learned

**ADAM Web Design** · 03-06-2007, 12:39 AM

If you want a quick way to do what LNR suggested, put this in your CSS.

Code:

body * {
    margin:  0;
    padding:  0;
}

The good news is that this will work on every element you have.
The bad news is...that...this will work on every element you have (so you'll have to specify with additional rules, as she suggested, after that.)

Looks like you're trying to center that layout. If you are, create a wrapper div like this.

CSS:

Code:

#wrapper {
    margin:  0px auto;  /* This will center it in most browsers */
    width:  width of your layout 
    text-align:  center;  /* this is for IE5 */
}
#wrapper * {
    text-align:  left;  /* counter to the IE5 code above */
}

And in your HTML code:

Code:

<body>
<div id="wrapper">
All your other page code here.
</div>
</body>

Y'all should be at least close after that.