Member Avatar for felix001

Hi,

Im trying to add code tags to my CSS.

Ive added the following to my CSS :

code {
    background-color: #F9F9F9; 
    border: 1px dashed #444444;
    color: black;
    font-family: momspace,"courier new";
    line-height: 1.1em;
    padding: 1em;
}

But when running my site in firefox the browser doesnt even seen the new entry in the CSS and in IE 8 it displays it but incorrectly.

A test page I have can be found here : http://fir3net.com/TEST/f5-ltm-basic-nat.html

Thanks...

  • 4 Contributors
  • 4 Replies
  • 105 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by Member #114696

Dani AI

Generated

— brief corrections and a checklist to get this working reliably.

Contrary to , the <code> element is a valid HTML element (it’s inline by default). For block-level code you should wrap it in <pre> or explicitly make it block-level in CSS. is right that forum BBCode is different from raw HTML/CSS. See the spec and notes on usage here: HTML <code> element — MDN.

Troubleshooting steps that quickly narrow the cause:

  • Verify the stylesheet actually loads in Firefox (Network/Inspector shows the .css file with a 200).
  • Use the inspector to see whether your rule exists but is overridden (crossed out) or never parsed.
  • Look for syntax errors earlier in the stylesheet (one error can stop later rules). The W3C CSS validator helps.
  • Clear cache / force reload. If IE8 renders differently, ensure a standards DOCTYPE (<!DOCTYPE html>) so IE isn’t in quirks mode.

A practical CSS pattern that covers both inline and block code, with cross-browser-friendly fallbacks:

pre > code {
  display: block;
  padding: 12px;
  margin: 0 0 1em 0;
  background: #f7f7f7;
  border: 1px solid #d0d0d0;
  font-family: "Courier New", Courier, monospace;
  white-space: pre;
  overflow: auto;
  line-height: 1.4;
}

code {
  background: #eee;
  padding: 2px 4px;
  font-family: "Courier New", Courier, monospace;
}

If you want syntax highlighting beyond plain styling, libraries are easier than rolling your own. As suggested a highlighter, modern options include Highlight.js or Prism. They expect markup like <pre><code class="language-xxx"> and handle cross-browser quirks for you.

Quick checklist: confirm stylesheet path and load, validate CSS, inspect rule specificity, fix typos (e.g., monospace), and prefer <pre><code> for blocks. Use !important only as a last resort.

Recommended Answers

All 4 Replies

Member Avatar for MagicMedia

"code" is not a valid HTML tag. Browsers don't know what to do with it. You should make a class named code and then put that class on a div.

Member Avatar for almostbob

as reported by MM, css only works on valid tags, you cant add new tags
the [code=php] tags used on forums like this are not html, they are a plugin called bbcode, note square brackets, which is interpreted when the page is built and displayed in html, with colorcoding

.code {} // for a <element class='code'> multiple elements
#code {} // for a <element id='code'> single element only
Edited by almostbob because: n/a
Member Avatar for felix001

Thanks for your help Ive now added custom "code" classes which works fine.

Member Avatar for Member #114696

You can search for such scripts/plugin which almostbob mentioned on Google easily. You can use many of them on simple web pages as well. One such script that I've used in past is http://code.google.com/p/syntaxhighlighter/.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.