DIV Style Attributes

Help applying multiple paragraph styles

[mikemalphurs]

Hello-
I have a CSS text mark-up issue I could use some help with. I have a Div Tag that has a "p" tag applied to it. Whnever I try to create an additional class to use for th ep tag within that DIV, it does not "take". Is there anyway to have a Class over-ride the P tag applied to the DIV?

Here is the DIV:

<div class="InteriorText">
<p>When it comes to technology, have you ever noticed that there is always something that someone doesn't want you to buy?</p></div>

Here is the DIV's CSS:

.InteriorText p{
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}

Here is the class I would like to apply to certain P tags within the same DIV, but is being "overridden" by the above CSS:

.ContentSubHead {
font-size: 2.0em;
font-weight: bold;
}

And finally, the HTML code snippet:

<div class="InteriorText">
<p class="_ContentSubHead">When it comes to technology, have you ever noticed that  there is always something that someone doesn't want you to buy? </p></div>

Any help would be greatly appreciated... Thanks!

[4css]

<p class="_ContentSubHead">

I believe the underscore before your class name could be the problem here. Try removing it from you code.

When you name your styles you need to start with a letter. In your (x)html code you have the underscore, which is not only incorrect, but it could be a typo as your class name doesn't have the _ in front of it.

4~css

[mikemalphurs]

Hmmm... Still no luck. it is taking on the attributes of the p tag applied to the parent DIV. See the screenshot: !

Any ideas?

[edited by: SuzyUK at 3:45 pm (utc) on Mar. 5, 2008]
[edit reason] Please No URI's or screenshots [/edit]

[4css]

try

.ContentSubHead p {
font-size: 2.0em;
font-weight: bold;
}
what you are saying here is the paragraph inside of the class of contentsubhead.

[MarkFilipak]

>> .ContentSubHead {font-size: 2.0em;font-weight: bold;}
>> <p class="_ContentSubHead">

1 - The class names don't match.
2 - The leading underscore *will* cause problems in IE.

>> font-size: 0.8em;

IE doesn't like font-size: ...em either. Try font-size: 80%. IE likes percents.

[mikemalphurs]

I'm on it... I will let you know the results Thanks!

[4css]

IE doesn't like font-size: ...em either. Try font-size: 80%. IE likes percents.

I use font sizes in ems all the time. I have never had any difficulty with them.

What I do is put in the html body {font-size: 100.01%} along with a few other things I always put there, and then my font sizes I do with ems. This way when people resize their fonts to see a larger font, they size perfectly for me.

Can you explain your statement as to why IE doesn't like it I would appreciate it.

[MarkFilipak]

>> Can you explain your statement as to why IE doesn't like it I would appreciate it.

I can't explain it. Only the IE developers could do that. I've just found that, by extensive testing, under some circumstances IE screws up font size if it is specified in 'em'. In my CSS initialization (setup.css), I have this:

body{cursor:default;line-height:1.2em}
body *{cursor:inherit;font-size:100%;line-height:1.2em}
a{cursor:pointer}

I have found that including that initialization and then specifying all descendant font-size in percent always works. If I desire different body font size, I use the cascade to overload the initial value above.

[SuzyUK]

yea.. IE's got a bug when it comes to resizing ems UNLESS the parent element, body, outer wrapper etc is first specified as a percent as 4CSS said.

Once you have the initial percentage value (I generally uses about 90% on the body element too) in there IE will resize the ems properly.

re the opening question, after you've got your class name sorted out (take out that underscore) I think you have a specificity issue?

.InteriorText p {}

is more specific than

.ContentSubHead {}

and will overrule it no matter which order in the cascade they come

try

p.ContentSubHead {}

though it will need to be later in the cascade as that then gives it the same specificity as the first rule

or even

.InteriorText p.ContentSubHead {}

which is more specific than the first rule and follows the logic anyway

[mikemalphurs]

Yep, SuzyUK... redefining that class made it work!

Thanks so much!

[swa66]

Specificity is indeed a simple one to fail to get right.
I try to use the "web developer" toolbar in Firefox for that: it has under the CSS menu a "view style information" that if you click on some element will show what the browser found relevant as CSS for that element.

I'm sure we see just a sample but there is little need to have a <div> wrapping a single <p>

- you can style the <p> just as well
- you can also apply multiple classes onto one element

so
.red {color:red}
.widget {font-weight:bold}

both should be applied to <p class="red widget">test</p>

using them encapsulating single other leements can be sueful as CSS only has one margin, border and padding. If you need more than one (e.g. to get a rainbow border, you'll need a few more)