The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Background color exceeds text width
Woody20
post Dec 18 2016, 02:34 PM
Post #1


Novice
**

Group: Members
Posts: 27
Joined: 11-March 11
Member No.: 14,105



I am maintaining a page written in HTML. When I have text with a background color in this page, and open it in a browser, the background is colored for the length of the text, which is what I want. When I open it in a page created by PHP, which includes several lengthy style sheets, the background is colored for the width of the window, not what I want or expect.

I'd like to override whatever it is in the style sheets that is causing this, but I don't know how to do that. Is there a style attribute I can add to the <body> or <p> tags that controls this behavior? I cannot change the style sheets themselves.

HTML code example is (produces black text on green background)
CODE
<p align=center style="margin-top: 6pt; font-family: 'Times New Roman'; font-size: 12pt; background-color: #00FF00; color: #000000;">Some text</p>

Browser in both cases is FireFox 50.1.0 running under Windows 7 64-bit.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 18 2016, 08:44 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,772
Joined: 9-August 06
Member No.: 6



Are you saying the background doesn't span the whole page when you look at the example you posted in a browser? Because it should. That's because the P spans the whole page, or at least the available width, even if the text doesn't.

The easiest and most flexible would be to apply the background to a SPAN within the P instead of to the P.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 18 2016, 09:01 PM
Post #3


.
********

Group: WDG Moderators
Posts: 7,736
Joined: 10-August 06
Member No.: 7



QUOTE(Woody20 @ Dec 18 2016, 08:34 PM) *

When I have text with a background color in this page, and open it in a browser,

Is this text part of a complete (non-PHP) web page? If so, how do you open it in another page created by PHP? We might need more information to understand what's going on here...

QUOTE
the background is colored for the length of the text, which is what I want.

Like pandy said, that's not the default behavior of P (and other block-level) elements, and there's nothing in your code example that would change the default behavior. Are there any other stylesheets in use, that are not inserted by PHP?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Woody20
post Dec 19 2016, 02:17 AM
Post #4


Novice
**

Group: Members
Posts: 27
Joined: 11-March 11
Member No.: 14,105



QUOTE(pandy @ Dec 18 2016, 08:44 PM) *

Are you saying the background doesn't span the whole page when you look at the example you posted in a browser? Because it should. That's because the P spans the whole page, or at least the available width, even if the text doesn't.
The easiest and most flexible would be to apply the background to a SPAN withing the P instead of to the P.


I guess I wasn't clear.

I create an HTML file. If I view it (locally) in a browser, it has the behavior I want: only the background of the text is colored. If I rename the file with a .php extension, upload it to a server, and view it with the same browser, it also has only the background of the text colored. BUT, if I view it in a different page on the server, one that builds my HTML into a .php page and including a number of style sheets (which I cannot change), then I see the undesired behavior of the color extending over entire page width.

Now, the sample code I provided was a simplification of the actual failing code. Here is the entire paragraph. As you can see, I already have the color spanning the line in question ("Middle text"). FYI, "Top text" and "Bottom text" appear red text on white background, as expected.
CODE
<p align=center style="margin-top: 6pt; font-family: 'Verdana'; font-size: 10pt;"><span style="font-family: 'Times New Roman'; font-size: 6pt; color: #FF0000;">Top text<br><i></span><span style="font-family: 'Times New Roman'; font-size: 12pt; background-color: #00FF00; color: #000000;">Middle text<br></i></span><span style="font-family: 'Times New Roman'; font-size: 6pt; color: #FF0000;">Botton text<br></span><span style="font-family: 'Verdana'; font-size: 10pt; color: #000000;">Final text</i></span></p>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 19 2016, 07:49 AM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,772
Joined: 9-August 06
Member No.: 6



If that shows up with a colored background for the whole P it must come from a style sheet connected to the online page.

To override that styling we need to know what selector is used. As you see the P has no class or id. So to single it out and color only this P and not every P on the page a more advanced selector must be used.

You could give this a try though. Add the following to the style you already have for the P.

CODE
background: none !important


That is like this.

HTML
style="margin-top: 6pt; font-family: 'Verdana'; font-size: 10pt; background: none !important"
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 19 2016, 09:04 AM
Post #6


.
********

Group: WDG Moderators
Posts: 7,736
Joined: 10-August 06
Member No.: 7



Does the whole P element get a background when you run PHP? Then try pandy's suggestion.

Or does PHP make the middle SPAN suddenly behave as a block? Then maybe you could try:

CODE
<span style="font-family: 'Times New Roman'; font-size: 12pt; background-color: #00FF00; color: #000000; display: inline !important;">

BTW, the HTML syntax is incorrect, the start and end tags for the I element occur at the wrong places.

Also I generally advice against using inline styles (with the STYLE attribute), it's more practical with external or embedded stylesheets.

It's also usually better to use CSS margin and/or padding than BR elements.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 19 2016, 09:12 AM
Post #7


.
********

Group: WDG Moderators
Posts: 7,736
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Dec 19 2016, 01:49 PM) *

That is like this.

HTML
style="margin-top: 6pt; font-family: 'Verdana'; font-size: 10pt; background: none !important"


Do you really need an !important declaration in inline styles, considering they should already have maximum specificity? Or do you still need it in case a stylesheet rule also contains an an !important declaration? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 19 2016, 12:12 PM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,772
Joined: 9-August 06
Member No.: 6



No, important! Shouldn't be needed, but given the circumstances, better use all you've got. biggrin.gif

I'm thinking your guess is the better one (the display change). What are the chances they would use the same color in the template that the OP has chosen? Unless of course he chose it from colors already in use. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 11th December 2017 - 05:45 PM