I have a page where I have a node and a block displaying side-by-side. The block is displaying another, unrelated, node. I noticed when setting my Blueprint span-x classes for the two nodes that if you use a span-x class in the opening div of a node, Blueprint’s margin-right setting for span-x gets overridden by the Blueprint theme’s style.css setting for div.node. So, when I view my page, the two nodes display beside one another, but the node which has the class span-x is overlapping the gutter immediately to it’s left, and not starting at the column. I know this is hard to explain so here’s what I’m talking about in code:

In Blueprint’s screen.css we have the following definition for our span-x classes:

.column, div.span-1...24 {float:left;margin-right:10px;}

In the theme’s blueprint.css we have this defined for div.node:

div.node {
  margin: 0 0 1.5em 0;
  padding: 0 0 1.417em 0;
  border-bottom: 1px solid #ccc;
}

So, for one of my nodes, I have the following:

<?php //this node, when displayed, overlaps its left gutter ?>
<div id="node-1" class="node span-12">
  <?php print $content ?>
</div>

The other node is being displayed in a block and, as such, I put my span-x class in the opening div of the block:

<?php //the node displayed in this block works as expected ?>
<div id="block-block-1" class="block span-12 last">
  <?php print $content ?>
</div>

When I commented out the declaration for div.node in blueprint.css, the problem node displayed as expected because it was no longer setting the right margin to 0. I also tested by restoring blueprint.css to default, then wrapping my node in a div with nothing but my span-x class declared. It then worked as expected, seemingly confirming that the div.node declaration was the culprit.

Since I don’t want to edit blueprint.css permanently, the quick fix for me was to simply not define my span-x class in any tag that also has the .node class. Overall, not a big deal or issue, but perhaps something to put in the README. Alternatively, I suppose you could change div.node to only set margin-bottom and not all margins.

Hope this made sense.

Thoughts?

Comments

designerbrent’s picture

Component: Code » Documentation

I'm an little confused about what you were doing. However, I would say that you don't need to be declaring a .span-x class for the .node divs. That is probably something that you will need to define higher on the page.

designerbrent’s picture

Status: Active » Closed (won't fix)

Feel free to reopen this if you can provide me with more information.