line height issue

[handcycle]

I’ve got an inline style that controls several attributes, but for some reason the “line-height” doesn’t work. Inspected with Firebug…everything else seems to work, can’t figure out why line-height doesn’t respond.

Any ideas?

http://frontrangefreedomtour.org/front-range-freedom-tour/

<div style="font-size: 20px;padding: 20px;line-height: 32px;color: #fff">

[Paulie_D]

In what way “doesn’t it work”?

Plus a link isn’t very useful without specifics of which element is affected, how it looks now and what it’s supposed to look like.

[jurotek]

Your inline style line-height in span12 is overwritten by line height of 20px on p tag in .entry-content p, .entry-summary p class selectors where you can change it from 20px to unit-less value of 1.6 or more if desired.

[handcycle]

Hey jurotek

Thanks for the response. I’m a css rookie. I understand the gist of your comment but can’t locate the specific selector you reference. Also, if I change it, won’t that change the entire site?

I wish to control the line height within that specific div, (the white text over the picture) which is why I tried to do it inline.

Help?

[handcycle]

Hey jurotek

Thanks for the response. I’m a css rookie. I understand the gist of your comment but can’t locate the specific selector you reference. Also, if I change it, won’t that change the entire site?

I wish to control the line height within that specific div, (the white text over the picture) which is why I tried to do it inline.

Help?

[handcycle]

Hey Paulie

Sorry, I’m a newbie. I’m trying to control the line height of the white text. The line height doesn’t change when I change values of me inline css.

Hope that helps.

[Alex Zaworski]

Hey there,

The issue you’re having is that line-height is also set on the <p> tags inside of the <div>.

You’ve been trying to fight a specificity problem, when in reality you have an inheritance problem.

I don’t know of a way to get the effect you’re after purely through inline styles on the <div>. The preferred method would be to target things with classes, if possible.

If you definitely can’t go that route you’ll have to add inline styles to all of the <p> tags.

[handcycle]

Hi Alex

Okay, I created a style in my stylesheet:

.white-text {
display: inline-block;
text-shadow: 1px 1px 1px #666;
line-height: 150% !important;
font-size: 20px;
padding: 20px;
color: #fff;
}

Then in the first line I have:

<

div>

but the line-height selector still doesn’t change anything.

http://frontrangefreedomtour.org/front-range-freedom-tour/

[handcycle]

I gave up…just used

tags and solved the problem.

Thanks, everyone.

[Alex Zaworski]

.white-text {
  display: inline-block;
  text-shadow: 1px 1px 1px #666;
  line-height: 150% !important;
  font-size: 20px;
  padding: 20px;
  color: #fff;
}

When I pull it up that selector appears to be correctly adjusting the line-height, is there something I missed?

[handcycle]

Sorry, Alex,

I re-wrote it and used p tags inside the div to make it work.

Thanks for the help.

[Alex Zaworski]

No worries, glad you got everything working :)

[Author]

Posts