Hi,

I'm excited by this theme and trying it for the first time (I normally use Zen or Basic). But I'm having a bit of a problem with a background: there's about 5-10px of background color above the header that I can't seem to get rid of.

I've tried going back to the raw Genesis subtheme, adding a background color and white background to obvious selectors, tried to find margin or padding somewhere which might be causing it.

I know I'm probably overlooking something simple, but can you point me in the right direction?

Thanks.

CommentFileSizeAuthor
#2 testsite.jpg54.23 KBglennr

Comments

Jeff Burnz’s picture

Jeff Burnz commented

Can you explain a bit more about the situation, not sure I actually follow exactly what you mean, are you tiling a background image and theres a gap at the top or do you want the header to sit hard against the top and theres a gap?

A screenshot might help in this situation.

glennr’s picture

glennr commented
StatusFileSize
new testsite.jpg54.23 KB

Sorry, should have made that clearer. Anyway, yes, I want the header to sit hard against the top. I will want a background image, but I just tried a background color first when I noticed the gap at the top. Attached is a screenshot in IE7. The gap is a little smaller in Firefox 3 but it's still there. Here's the CSS I've added to the page.css file of an otherwise untouched genesis_SUBTHEME.

body {   /* or #genesis-1b */ 
  background-color: #dddddd;
}
body > #container {   /* and #container */
  background-color: #ffffff;
}

I've tried playing with margins and padding, too. Like I said before, I'm sure I'm overlooking something obvious . . .

Jeff Burnz’s picture

Jeff Burnz commented

This is margin/padding added by the browser to the body element, by default I don't "zero" it out in Genesis because in 100% width it makes everything sit hard against the edges and the aesthetic of a bit of margin between the left/right edges and the browser chrome looks better.

To get rid of it open up your subthemes style.css file and add this to the body element:

/**********************************************************
 *                    Body
 **********************************************************/
body {
  font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
  margin: 0;
  padding: 0:
}

Regarding your CSS above, just a tip, for backgrounds etc you only need to add them to .container {}, as this will be applied to all browsers, you only use the body > #container {} if you want to override IE6. In fact the only reason I have used that tricky set up is to show, as an example, how you can have a min & max width and have it fluid between those widths.

glennr’s picture

glennr commented

Yep, as I expected, I was overlooking something obvious. Thanks for the .container tip, too.

Thanks also for Genesis, your other themes and all your support both here and in the forums.

Jeff Burnz’s picture

Jeff Burnz commented
Status: Active » Closed (fixed)