What's wrong with my CSS?


My <pre> styling looks OK (to me at least) in IE 6 and horrible (double spaced and strange) in Firefox. Can anyone tell me why?

The CSS looks like this:

pre {
   color : #990000;
   font :  "Courier New", Courier, monospace;
   padding : 5px;


The pre tag is for pre-formatted text. Which means that a LF character should cause a new-line, but you also have <p> and <br> tags inside there. So is the content pre-formatted or marked up?

Not sure what the other 'strange' problem you're seeing in Firefox is.

IE is probably just ignoring the HTML inside <pre>, either that or it's ignoring the CRLF's inside <pre> and using your markup.

Well, it's preformatted when I paste it into MovableType's edit window, I then add the <pre> tags around it. I guess that's not the way to do it...

Ah, just remembered, I also have this in the CSS and I think I was told that this should have fixed the problem...

pre br { display: none }

I assume it means that if you see a <br /> within a <pre> tag then you don't display it? I think someone told me to do that the last time I asked a question like this...

I think I've found a way around the problem. If a line in my <pre> block is empty then MT's processing makes it a <br /> which displays in an inconsistent way in IE and Firefox. If I add a space to each blank line then the <br />s aren't generated and the problem goes away...

Hardly ideal, I think I need a better way to put code into these postings, anyone got any suggestions?

Leave a comment