I am wishing this really is simple. I am not really a CSS guy.

I am attempting to make some code look just a little better on the blog and that i possess the following <code> CSS style.

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

This really is working acceptable for me, except where you will find line breaks within the code found in my <code> tag, the backdrop color is whitened not light grey.

It is possible to CSS tweak I'm able to make to pressure my entire <code> block possess a background colour of grey?


Comment: Basically put an area around the empty line, I recieve things i want - a grey background on that line.

Comment2: I've only plain text within my <code> </code> tags. Ideally I'd rather not margin my code w/ tags. Just cut and paste within the <code> tags and also have it look decent.

Final Comment: After reading through this as recommended by mercator below, I finally opted for this. I subclassed the <pre> tag and also got want I desired. A properly 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

It seems to operate acceptable for me, however I'm not sure exactly what the items in your <code> tags are.

There is a couple of oddities inside your CSS regardless:

  • I most likely wouldn't use display: block, but wrap the tags inside a <p> or <pre> rather. Altering it to some block like this still will not permit you to nest block-level tags within it, also it would still have to be in the block-level tag itself. CSS does not alter the HTML syntax and semantics. Have you got any block-level tags in your code tags?
  • Why have you set white-space: normal? This is a little unusual for any code block. Exactly how are you currently formatting your code? Are you currently adding <p> or <br> tags inside? Why not use white-space: pre, or possibly white-space: pre-wrap?
  • Your font declaration is damaged. There should not be considered a comma between your 1em and also the font names. Browsers would now simply parse that as though 1em may be the title of the font family, I believe, after which select from Courier New, since 1em does not exist.
  • I believe you designed to say monospace rather than Fixed. Or perhaps is Fixed the particular title of the font face? It is recommended to add the generic monospace anyway.
  • Much more of a nitpick: you are able to collapse individuals 4 margins lower to 1 value too.

I am unsure if these are true reason for your problems. The very first two would be the probably candidates. Nothing strange happened around the quick tests Used to do, however, many of the other CSS may be creating the issues in conjunction with a few of these points.

Ah, wait one minute... I see since you are speaking about creating "some code look just a little better on the blog". Your blog software programs are instantly adding paragraph tags around blocks of text separated by blank lines. Individuals have the effect of the whitened.

I guess that's also the reason why you added white-space: normal. Your blog software programs are already adding line breaks and everything instantly (with <p> and <br> tags), so using pre added a lot of extra room.

Use the <pre><code> tags combination like StackOverflow does. While using <pre> tag will most likely (hopefully) avoid the blog software from playing together with your code.

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

Try setting an explicit width. Unsure why that will work. I sometimes give a border while testing to determine where my box is and what it really appears like. I understand it can be done with web debuggers like firebug, sometimes it's simpler and can have unwanted effects.


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

Find out if that can help, maybe alter the border color to #000 to determine in which the limitations are.