//flex table opened by JP
PDA

Click to See Complete Forum and Search --> : CSS question

cesc
04-09-2007, 08:51 AM
I have 2 divs, div a and div b.
div b is contained within div a.
In order to control the text inside div b, my CSS file looks something like this:

.b p {
font-size: 10pt;
color: #3366ff;
margin-top: 0px;
text-align: center;
padding-top: 2px;
}


My problem is that when I change the attributes of div a's p tag, it also affects b's p tag. How would I go about fixing that? Thanks.
Tony2005
04-10-2007, 07:41 AM
What browser are you testing this in? Have you tried others?. Could you post the CSS for div A and also the html you are using see if I can re-create the error on my end

Tony
cesc
04-10-2007, 08:27 AM
Sure. I'm about to leave to work now but as soon as I'm back, I will do it. Thanks.
cesc
04-11-2007, 01:07 AM
Ok, here's the css file:


.outer {
background: #cccccc;
}

.inner {
background: #3366ff;
}

.inner p {
color: #ffffff;
}

.outer p {
color: #FFFF00;
}


And here is the html file:

<html>

<head>

<title>Test page</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

<body>

<div id="container">
<div class="outer">
<div class="inner">
<p>inner</p>
</div>
<p>outer</p>
</div>
</div>

</body>

</html>


Notice how both words are yellow. Thanks.
Tony2005
04-11-2007, 07:50 AM
I see what you mean.

Are you planning to use different fonts for the inner and outer div tags?


.outer {
background: #cccccc;
}

.inner {
background: #3366ff;
}

.inner p {
color: #ffffff;
}

.outer p {
color: #FFFF00;
}

?

If not then replace your css code with the following:


.outer
{
background: #cccccc;
color: #FFFF00
}

.inner
{
background: #3366ff;
color: #ffffff
}



As you can see I've placed the background and color attributes in to one class rather than two makes it look a bit neater I think also you don't need a ";" after every attribute, only use it if you are going to have another attribute after.

I'm not 100% sure what the problem was but I think it was due the the css selectors "inner p" and "outer p". Like I said above if your not planning on having different fonts in the same class don't use the css selectors.

Hope this helps.

Regards
Tony

P.S.

http://www.yourhtmlsource.com/stylesheets/

I find this site very handy with CSS and other HTML problems I have