The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Style attribute controlling interline spacing?
Woody20
post Nov 22 2016, 01:40 AM
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 in this page, and open it in a browser, everything is fine. When I open it in a page created by PHP, which includes several lengthy style sheets, the interline spacing is increased from its natural value (1.2 x em height) to about 1.5 x the natural value.
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 will restore the normal interline spacing? I cannot change the style sheets themselves.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 22 2016, 02:50 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



QUOTE(Woody20 @ Nov 22 2016, 07:40 AM) *

I am maintaining a page written in HTML. When I have text in this page, and open it in a browser, everything is fine. When I open it in a page created by PHP, which includes several lengthy style sheets, the interline spacing is increased from its natural value (1.2 x em height) to about 1.5 x the natural value.
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 will restore the normal interline spacing? I cannot change the style sheets themselves.


Yes, a declaration in a style attribute will override a declaration in an external style sheet or style block.

But, I would rather find and change the declaration in the style sheet. Or, if the same style sheet is used for other pages where you want that line height, there are two other options.

Add a style block in head (or use the existing one if there is one) and add a rule that overrides the declaration in the style sheet. Something you need to think about here is the specificity of the selector. It much have at least the same specificity as the rule in the style sheet. A declaration that comes later overrides a previous rule except if it has lower specificity.

So if you in the style sheet have
CODE
#foo p   {  line-height:... }

just
CODE
p   {  line-height:... }

wont do the trick. But
CODE
#bar p   { line-height:... }

will.

Another solution is to add a rule to the style sheet that targets only this page you have problems with. Add an id to the BODY tag in the HTML.
HTML
<body id="problempage">

Then add a rule in the style sheet using that selector. It will never ever match any other page (unless you use that ID somewhere else).
CODE
#problempage p    { line-height:... }


I would probably go with the first or third option.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 16th April 2024 - 03:35 PM