Topic: Text background-color extends to end of line (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=26025" title="Pages that link to Topic: Text background-color extends to end of line (Page 1 of 1)" rel="nofollow" >Topic: Text background-color extends to end of line <span class="small">(Page 1 of 1)</span>\

 
Danaan
Obsessive-Compulsive (I) Inmate

From: Here, there and everywhere
Insane since: May 2005

posted posted 06-13-2005 18:44

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

code:
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...

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 06-13-2005 20:12

<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.

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

posted posted 06-14-2005 02:02

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,

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 06-14-2005 02:27

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.


 

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 06-14-2005 04:41

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?

Danaan
Obsessive-Compulsive (I) Inmate

From: Here, there and everywhere
Insane since: May 2005

posted posted 06-14-2005 13:10

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...

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 06-15-2005 19:16

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

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

posted posted 06-16-2005 15:50

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


Justice 4 Pat Richard



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu