Log in

View Full Version : Help With DIV Styles


mikemalphurs
03-04-2008, 07:56 PM
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 the p 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!
rangana
03-05-2008, 02:49 AM
Yes, it should work, unluckily, you used a wrong class. I thought it should be _ContentSubHead instead of ContentSubHead??

You call a class ContentSubHead which is incorrect, it should be _ContentSubHead

See this code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.InteriorText p{
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
._ContentSubHead {
font-size: 2.0em;
font-weight: bold;
}
</style>
<title></title>
</head>
<body>
<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>
<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>
</body>
</html>


See if it helps :D
mikemalphurs
03-05-2008, 05:15 AM
Thanks for your help... I accidently posted an old piece of code in there. I actually do have the class applied in the HTML without an underscore.

Still no dice!
codeexploiter
03-05-2008, 05:46 AM
Check the following code


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> </title>
<style type="text/css">
.InteriorText{
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
.ContentSubHead {
font-size: 2.0em;
font-weight: bold;
}
</style>
<script type="text/javascript">

</script>
</head>
<body>
<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>
</body>
</html>

In this case it is working as it is expected, it consider the 'ContentSubHead' class on the 'p' element correctly.

One correction I've made is



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


The above class is mentioned in your post from which I've removed that p from the class name.

You can define the 'ContentSubHead' class in a number of ways other than the one I've used.

(1) .InteriorText .ContentSubHead

(2) p .ContentSubHead

(3) .InteriorText p .ContentSubHead
mikemalphurs
03-05-2008, 09:35 PM
Yep.. Re-defining the ContentSubHead class worked!

Thanks so much!