I'm having trouble with inherited (I think it's inherited) css in panels. I have padding on the left and right sides of items within each panel. I think the value is 1em, but I can't seem to find the source and can't get rid of the formatting without getting messy and countering it with -1ems everywhere. As you can see in my sample, I don't have the same problem with the headers, only images and paragraphs. I'd appreciate if anybody has an idea of where this inherited css padding is coming from. It's been driving me mad and I'm almost willing to pay good money for an answer :) I don't know very much about php, but from what I do know, I haven't been able to track down any formatting (other than layout) that's outside of the css files. I'm totally willing to accept though that I could be totally wrong.

An explaination of the code. This is code output from my browser. The content is a teaser, although I get the same problem with any content I apply to a panel using panels.

Thanks to whichever guru answers me first.

<div id="content">


<div id="main">
  <div id="breadcrumb"><div class="breadcrumb"><a href="/?q=front">Home</a></div></div>
<div class="content">
<!-- begin content --><div class="panel-3col-stacked" >
  <div class="panel-col-top">
    <div><div class="panel-custom"><p><img src="files/ingress_imagedefault.gif" /></p>
</div><div id="node-11" class="node teaser page">
    <h2 class="title"><a href="/?q=node/11">Neljä näkökulmaa Forum Virium Helsinkiin</a></h2>
  <div class="content"><p>Forum Virium Helsinki on merkittävän yritysjoukon aloitteesta syntynyt digitaalisten palveluiden ja sisältöjen kehittämiseen keskittyvä klusterihanke. Hankkeen veturiyritykset ovat Digita, Elisa, Nokia, TeliaSonera, Tieliikelaitos, TietoEnator, Veikkaus, WM-Data, YIT-Yhtymä ja Yleisradio. Kumppaniyrityksinä hankkeessa mukana ovat Hewlett-Packard, IBM, MTV, Siemens, SOK, Swelcom ja Vaisala, sekä julkishallinnosta Helsingin kaupunki, Sitra, Tekes ja VTT. Forum Virium Helsingin toiminta rakentuu veturi- ja kumppaniyritysten tulevaisuushankkeiden ympärille. Toiminnan tavoitteena on nopeuttaa ja helpottaa digitaalisten palveluiden ja sisältöjen kehittämistä yritysten välisessä yhteistyössä. Forum Virium Helsingin keskeisinä tehtävinä ovat:</p>
</div>
  <div class="links">&raquo; <a href="/?q=node/11" title="Read the rest of this posting." class="read-more">read more</a></div>
</div>
</div>
  </div>
  <div class="panel-col-first">
    <div></div>
  </div>

  <div class="panel-col">
    <div></div>
  </div>

  <div class="panel-col-last">
    <div></div>
  </div>
  <div class="panel-col-bottom">
    <div></div>
  </div>
</div>
<br class="panel-clearer" /><!-- end content --></div>
</div>

drupal.european-it.net/?q=test

Comments

nortonyodles’s picture

nortonyodles commented

In addition, I forgot to mention that when I created a css background in the top panel, it doesn't clear my graphic although there is a clear both tag in my panels layout template.

bitman’s picture

bitman commented

Comment out or remove the following lines from modules/panels/layouts/threecol_25_50_25_stacked.css:

.panel-3col-stacked div div {
  margin: .5em;
}

This is supposed to add a margin to the 2nd level of divs used by the panel. It also has the unfortunate effect of adding the same margin to each div within that, which creates the phantom padding effect.

A real fix to this problem involves giving a class name to the 2nd level divs to distinguish them from ordinary divs. Otherwise your panels might overlap. If IE 5-6 supported child selectors, the fix would be easy:

.panel-3col-stacked > div > div {
  margin: .5em;
}

Unfortunately, that is not a viable option.

This post might be related: http://drupal.org/node/107199

mlncn’s picture

mlncn commented

Why do module css files load after the stylesheet style in 4.7? Surely that's a misfeature, as it prevents easy overriding of these styles.

~ ben :: http://AgaricDesign.com

mlncn’s picture

mlncn commented

In any case, I discover that bedlam and ak came up with a fantastic solution:

http://drupal.org/node/68665#comment-136512

Really, the most wonderful collaboration and end result I've seen on the Drupal forums. Not sure what the performance hit is but that solution is going on all Agaric's themes that have to be developed in 4.7. ~ ben :: http://AgaricDesign.com

mlncn’s picture

mlncn commented
Version: 4.7.x-1.x-dev » 5.x-1.x-dev
Status: Active » Closed (works as designed)

In 5 at least and probably in 4.7 panels lets you override the physical stylesheet files by placing stylesheets of the same name (including in-theme and in-panels subdirectary) into your theme directory. (Similar concept to the global Drupal fix linked to above.)

Panels is special-- you can copy the files you're interested in (or make new ones with the same name) to site's theme directory (keeping the same directory path, layouts/panel-3-col.css or whatever) and it will override the stylesheet in panels.

I think all of Drupal finally works like this in Drupal 6.

~ben

People Who Give a Damn :: http://pwgd.org/ :: Building the infrastructure of a network for everyone
Agaric Design Collective :: http://AgaricDesign.com/ :: Open Source Free Software Web Development

(There's another issue in the Panels queue that explains this better– how I wish I had made the Related Content module already, and it were in use here. These connections would long ago have been made!)