|
| |
|
|
Starhugger
Posts: 494
Joined: 4/12/2005
Status: offline
 |
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>
|
|
|
|
Nicole
Posts: 2800
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline
|
RE: Redefining styles inside a nested Div - 3/18/2007 23:29:08
You've got text-align: centre; in both your div.inner and div.inner p
I don't think having it in both creates any problems, but it only needs to be in one. Put it just in the div.inner
Move your text-align: left; from div.outer p to div.outer and it should work. Like this:
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;
text-align: left;
}
div#outer p {
margin-top: 0px;
margin-bottom: 10px;
}
div.inner {
text-align: center;
margin-top: 0px;
margin-bottom: 10px;
border: solid red 1px;
}
div.inner p {
margin-top: 0px;
margin-bottom: 0px;
}
_____________________________
Nambucca Valley & Kempsey Web Design | NixDesign
Get Netscape Navigator 9
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
Thanks! 