Drupal 7 CSS Issues

Question

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/

is this live anywhere? I take it you have tried to identify with chrome developer tools or firebug? — Daniel Harper, Dec 11 '13 at 16:57
@DanielHarper - It is not live anywhere, I am just looking at this locally. I have used chrome developer tools. and am working on using firebug currently — scapegoat17, Dec 11 '13 at 18:40
@DanielHarper - I also added a link to a jsfiddle page that has the code in it. Hopefully that helps. — scapegoat17, Dec 11 '13 at 18:49
There doesn't seem to be an issue in jsfiddle, all looks ok? — Daniel Harper, Dec 12 '13 at 09:14
@DanielHarper - I am pretty sure the issue is still there. If you look, you can see that there is still some sort of padding on all of the sides, that I cannot seem to fix. — scapegoat17, Dec 12 '13 at 13:04
the body tag has a margin of 8px which I think js fiddle adds. — Daniel Harper, Dec 12 '13 at 13:27

Daniel Harper · Accepted Answer · 2013-12-15T12:18:05.563

3

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/

edited Dec 15 '13 at 12:18

answered Dec 12 '13 at 13:35

Daniel Harper

496
4
19

The body tag did it. Thank you! – scapegoat17 Dec 12 '13 at 13:48
probably still worth looking into a reset as it will prevent similar things with other tags such as ol ul. – Daniel Harper Dec 12 '13 at 14:04

score 0 · Answer 2 · answered Dec 11 '13 at 17:05

0

you should put margin-top:0 and margin-left:0 on this divs.

can you show on jsfiddle for us? or a link page?

answered Dec 11 '13 at 17:05

Adriano Varlotta

385
1
4
20

I added the jsfiddle page in my edit. Hopefully that will help – scapegoat17 Dec 11 '13 at 18:48

score -1 · Answer 3 · answered Dec 11 '13 at 17:02

-1

Use the firebug for firefox tool to check that CSS issue . It might be occurring just due to some background image or CSS file. For all CSS linked to that theme check that theme's .info file also.

Although As per my experience you will able to get exact source of CSS by using firebug .

It may be some background kind of image or CSS effect.

answered Dec 11 '13 at 17:02

Abhishek

1,543
3
13
29

Thank you for your comment. I checked my themes .info file and the only .css that I am using is the one i created. I added the jsfiddle file above to hopefully help out better. – scapegoat17 Dec 11 '13 at 18:54
In the given part we are not able to trace that space part as it is not including the menus header which is showing the image there, create another link just by using the html of that page that will definitely help to people to find the problem.Althogh answer1 seems helpful just try it by editing. – Abhishek Dec 11 '13 at 21:19
I tried setting the margins to 0 and that did not fix my issue.. I added all of the html as requested and my css. I hope that will help! – scapegoat17 Dec 11 '13 at 21:26

Drupal 7 CSS Issues

3 Answers3