Search code examples
cssdrupaldrupal-7drupal-theming

Drupal 7 CSS Issues

I am designing my theme for my website, and have no other CSS files in my folder besides template.css.

.header-wrap,
.nav-wrap,
.slideshow-wrap,
.body-wrap,
.sub-footer-wrap,
.footer-wrap {float: left; width: 100%; clear: both;}

.header,
.nav,
.slideshow,
.body,
.sub-footer,
.footer { width: 960px; margin: 0 auto;}

.header-wrap { height: 118px; background: url('files/img/background/bg-header.png')
 repeat-x; border-bottom: 1px solid #6A6A6C}
.nav-wrap { height: 38px; background: url('files/img/background/bg-nav.png') repeat-x;
border-top: 1px solid #D9D9DB; border-bottom: 1px solid #B8B8BA}
.body-wrap { background: #F4EDDB url('files/img/background/bg-body.png') repeat-x;}

I don't believe that the issue is relating to that but there must be something else doing this to my webpage:

enter image description here

The red lines show the whitespace that is being generated for some unknown reason. I have been looking at this for a while and have not been able to find the source. I was wondering if anyone has had an issue like this before? Or someone that might be able to point me in the right direction to fix the matter. I have also tried multiple browsers and have the same issue. I have also made sure that it wasnt just an administration issue. It keeps happening no matter what. I am using Google Chrome currently.

--EDIT--

Here is my jsfiddle for those of you who asked (it still does it on there too) this has the full html http://jsfiddle.net/RCMh7/

Solution

  • Add this to your css.

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

    Or google "reset.css" and add it into your theme, the Eric Meyer one is fairly popular.

    http://www.cssreset.com/