CSS Code styling - background color is missing on empty lines.

Question

I'm hoping this is simple. I'm not a CSS guy.

I'm trying to make some code look a little better on a blog and I have the following <code> CSS style.

code {
        display: block;
        white-space:normal;
        background-color: #eeeeee;
        font: 1em, 'Courier New', Courier, Fixed;
        padding: 7px;
        margin: 7px 7px 7px 7px;
    }

This is working fine for me, except where there are line breaks in the code contained in my <code> tag, the background color is white not light gray.

Is there a CSS tweak I can make to force my entire <code> block have a background color of gray?

Thanks.

Comment: If I put a space on the empty line, I get what I want - a gray background on that line.

Comment2: I have only plain text inside of my <code> </code> tags. Ideally I don't want to mark up my code w/ tags. Just cut and paste inside of the <code> tags and have it look decent.

Final Comment: After reading this as suggested by mercator below, I finally went with this. I subclassed the <pre> tag and got want I needed. A nicely shaded boxes to offset my example code blocks.

 pre.code {
    color: black;
    border: solid 1px #eeeeee;
font-size: 1.1 em; 
margin: 7px; 
padding: 7px; 
background: #eeeeee
 }

Answer 1

Try setting an explicit width. Not sure why that would work. I sometimes add a border while testing to see where my box is and what it looks like. I know you can do that with web debuggers like firebug, sometimes it's simpler and might even have side effects.

add:

width: 100%;
border: 1px solid #eee;

See if that helps, maybe change the border color to #000 to see where the boundaries are.

Answer 2

It appears to work fine for me, but then I don't know what the contents of your <code> tags are.

There's a few oddities in your CSS in any case:

• I probably wouldn't use display: block, but wrap the tags in a <p> or <pre> instead. Changing it to a block like that still won't allow you to nest block-level tags inside it, and it would still need to be inside a block-level tag itself. CSS doesn't change the HTML syntax and semantics. Do you have any block-level tags within your code tags?
• Why did you set white-space: normal? That's a little unusual for a code block. How exactly are you formatting your code? Are you adding <p> or <br> tags in there? Why don't you use white-space: pre, or perhaps white-space: pre-wrap?
• Your font declaration is broken. There shouldn't be a comma between the 1em and the font names. Browsers would now simply parse that as if 1em is the name of a font family, I think, and then fall back on Courier New, since 1em doesn't exist.
• I think you meant to say monospace instead of Fixed. Or is Fixed the actual name of a font face? You'd better add the generic monospace anyway.
• More of a nitpick: you can collapse those 4 margins down to one value too.

I'm not sure if any of these are really the cause of your problems. The first two are the most likely candidates. Nothing strange happened on the quick tests I did, but some of your other CSS might be creating the problems in combination with some of these points.

Ah, wait a minute... I see now that you're talking about making "some code look a little better on a blog". The blog software is automatically adding paragraph tags around blocks of text separated by blank lines. Those are responsible for the white.

I suppose that's also why you added white-space: normal. The blog software is already adding line breaks and everything automatically (with <p> and <br> tags), so using pre added a whole bunch of extra space.

Try using the <pre><code> tags combination like StackOverflow does. Using the <pre> tag will probably (hopefully) prevent the blog software from messing with your code.

For WordPress, have a look at their article "Writing Code in Your Posts."

Answer 3

Without some HTML and/or a test page, it's quite difficult to know what could be causing the problem. I would look at the line-height property though - it often causes these kind of problems.