By jwatte on

I'm trying to put some spacing and border around my CODE and CITE tags by editing the CSS. I'm using Drupal 6.0, and the Chameleon theme.

Here is the code I put into common.css in themes/chameleon:

cite {
 padding: 10px 10px 10px 10px;
 margin: 10px 10px 10px 10px;
 background: #ddd;
 border-style: solid;
 border-color: #999;
}
code {
 font-size: 1em;
 padding: 10px 10px 10px 10px;
 margin: 10px 10px 10px 10px;
 background: #def;
 border-style: dashed;
 border-color: #9bd;
}

I took out the "code, pre" part, as it only defined font-size, which was re-defined for pre anyway.

I have two problems with this:

1) I can't get the Margin to work other than on the left side. I think this may be because Drupal outputs my CODE and CITE entires surrounded by

, which overrides the margin settings, and somehow the inner margins aren't applied.
2) The CITE border and background is not a nice block when the inner text is bigger than a single line, but instead looks like one long strip of background that's been cut into pieces and pasted on top of each other.

Here's a screen shot with annotations: http://images1.filecloud.com/676532/badcss.png

⋅ Categories: Drupal 6.x

Comments

jwatte’s picture

jwatte commented

That break in the 1) paragraph came from a literal P tag. I wonder if the problem is because the emitted code is:
P
CODE
code goes here
/CODE
/P
and there may be margin settings on P that override the margins set on CODE?

Btw: I'm rendering this in Firefox 2.0.0.12, but I have similar problems in IE 7.0.

jwatte’s picture

jwatte commented

Hmm. It seems that CODE doesn't allow margins on top and bottom.
I notice that this Drupal site uses a special

around code snippets.
Is that a custom module? How can I make my site do the same?

The work-around for CITE seems to be to use BLOCKQUOTE, although I had to update filter.module from 6.0 to actually let BLOCKQUOTE through.