By tempuseralpha on

I have some unexplained white space in my theme and I cannot get rid of it. I've spent hours and hours in the code and can't find the cause for it anywhere. Can someone please look at: http://genesisdigitalsolutions.com/drupal/ and let me know why there's extra white space at the top, above and below the words "This is a block named "Header" in a divider named "header". Why is there a white strip ^up there^"

Thanks so much!

⋅ Categories: Drupal 5.x

Comments

Shedrow713@groups.drupal.org’s picture

Shedrow713@groups.drupal.org commented

Have you tried using the Firebug plugin for Firefox? That may help you in debugging. It'll allow you to determine which CSS lines affect each individual element on your page as you click/select each one in term. You can edit each CSS rule on the fly as well. Hope that helps...

Maybe try changing "border-width:0px 0px medium;" to be "border-width:1px 0px medium;" in your style.css file?

styro’s picture

styro commented

eg you have 2 header ids in your HTML - that is bound to cause issues. You also have a bunch of CSS errors and warnings. You really need to fix that stuff before wasting time on debugging other issues.

I suggest you install the Firebug Firefox extension. In about 15 seconds it told me that the white part is related to the border settings in line 39 of your style.css file.

--
Anton
New to Drupal? | Forum posting tips | Troubleshooting FAQ | Project management software knowledge base

nevets’s picture

nevets commented

First you have a problem with your html, you have a pair of div's

<div class="p1" id="header">
<div class="header" id="header">

that both have an id of 'header'. CSS id's should be unique and non-unique id's can cause "interesting" problems. So before applying the CSS below I would fix the id problem and see if that helps or not. It is generally a good idea when you have unexpected CSS behaviour to validate both the HTML and CSS.

If that does not do the trick this will help but given it's possible wide application may do more than you want.

div.content p {
margin-top: 0;
margin-bottom: 0;
}

To limit the css to only that paragraph give it an id, lets see header-paragraph, then use the following CSS

div.content p#header-paragraph {
margin-top: 0;
margin-bottom: 0;
}

And yes, firebug is your friend.

spidersilk’s picture

spidersilk commented

Another thing that can sometimes cause that is that some of the core Drupal classes in drupal.css have the property of "clear:both" which means that they won't start until there's nothing on either side of them, which can be a major pain in some multi-column CSS layouts.

Haven't realy found a good fix for that yet other than commenting out that specific property in the drupal.css file when you run into trouble with it. It would probably be better to find a way of setting up your layout so that clear:both on items in the central column didn't mess with things, but I haven't found an effective means of doing that yet. But I'm sure there must be one...

Lynna

Business: http://www.spidersilk.net
Personal: http://www.wildideas.net

sepeck’s picture

sepeck commented

Just a note... in Drupal 5, there is no file named drupal.css.

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide -|- Black Mountain

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide