|
Starhugger -> Redefining styles inside a nested Div (3/18/2007 22:42:09)
|
I'm trying to set paragraphs <p> within an internal Div to be centered, while the default of the outer Div is for paragraphs to be left-justified. I had thought defining a default style for the inner <p> would do the trick, but it keeps defaulting to the other Div style. Does defining a new Div style not override inherited styles?
I've tested it in FF and IE7, so I'm sure it's not browser or FP related. As you can see below, I've even tried defining the centered text in both the Div and the <p> levels, but it still defaults to the outer Div.
Here's an example of the page code. I've put borders around the Divs just to be able to see clearly where they are and what the text is doing inside them.
Any ideas? Thanks for the help.
Starhugger
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test for CSS Nested Divs</title>
<style>
div#outer {
margin-top: 0px;
margin-left: 15px;
margin-right: 0px;
margin-bottom: 0px;
padding: 15px;
vertical-align: top;
width: 260px;
border: solid black 1px;
}
div#outer p {
text-align: left;
margin-top: 0px;
margin-bottom: 10px;
}
div.inner {
text-align: center;
margin-top: 0px;
margin-bottom: 10px;
border: solid red 1px;
}
div.inner p {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<div id="outer">
<p>Outer line.</p>
<div class="inner">
<p>Inner line.</p>
</div>
</div>
</body></html>
|
|
|
|
