Topic: Text background-color extends to end of line

I'm using the following CSS code to highlight some text:

pre {font-family: Courier New, Courier, monospace; color: #222; background-color: #4ad}

But when I use this code, the text in between the <pre></pre> tags is highlighted right to the end of the line, shifting the unhighlighted text after it to the next line.

Does anyone know how I can have just the bit I want highlighted, with all the text before and after it on the same line?

this post will self-destruct in 10...

<pre> is block level by default, which means it will take up the entire line.

I can't see many reasons you would want to use pre but not want it to display as block, but if that is what you want, jsut specify display:inline; for the pre element in your CSS.

Or use a span element around your text, assuming pre isn't of importance to your message...[code]The pre element defines preformatted text. The text enclosed in the pre element usually preserves spaces and line breaks. The text renders in a fixed-pitch font.[/code/Well from yuor example you can't judge much, but regardless use the right tool for the job, if you want inline results use an inline elment, here it would seem that Span mihgt do, DL-44 might correct me on this...

Cheers,

Are you sure that the <pre> tag is the right thing to be using here? <pre> should be used for preformatted text, but if you don't *want* preformatting (that is, you want automatic formatting so the text is inline with other text), then you shouldn't use <pre>.

Perhaps you're looking for something more like the <code> tag? In that case, you might want to replace your CSS selector with something like

code, pre {...}

to simultaneously set the same formatting for both tags.


 

Yeah, I was hoping danaan would offer up what the usage here is...as pre is most likely not the right choice (though that is not necessarily true.

A span would quite probably be sufficient, but if it is code that is being presented, the code tag would be ideal.

There are plenty of cases where a tag is appropriate, but you wish to change the display from block to inline (a list is the most obvious example).
Help us out here danaan - what is it you are doing here, and why the <pre> tag?

I'm using the <pre> tag for code, so I might use a CSS class instead, or the <code> tag, which I didn't know about before.

this post will self-destruct in 10...

In that case, Slime's suggestion is what you need.

I would suggest using <code> for your code blocks then. Never hurts to be semantic in your markup.


Justice 4 Pat Richard