Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

only text background color in CSS

4:47 pm on Nov 29, 2011 (gmt 0)

New User

5+ Year Member

joined:Nov 29, 2011
posts: 1
votes: 0

Just wanted to post an update on an ancient thread (too old to reply):
[webmasterworld.com ]

The goal:
Add a background to text only (not to the 100% wide p tag)

The "usual" solution:
use <span> to wrap your text and give it a background color.

The issue with the "usual" solution:
wysiwyg editors use <p> tags to wrap text, not <span> tags (and there are some discussions going on the SEO aspect of using <p> tags...)

My solution:
.contentcontainer p {background:white;display:inline;clear:left;float:left;}

1:49 pm on Dec 6, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0

Hi Manuel, and a warm (if delayed) welcome to WebmasterWorld :)

Thank you for posting a solution to a common problem, but as I'm sure you're aware, floated elements default to display:block which over-rides the explicitly set display:inline. This technique is usually needed for small amounts of text, not usually a whole <p>, so setting the para to float may impact on the layout of other elements inside .contentcontainer.

For me the real issue is if the WYSIWYG editors are incorrectly wrapping all text in <p> elements, rather then only using <p> for paragraphs ;)

But your reference to discussions about the SEO aspect of <p> is really interesting. Can you explain a bit more?