PDA

Click to See Complete Forum and Search --> : CSS inheritence in DIVs

wienerdog
11-30-2006, 02:38 PM
I'm having some trouble getting my CSS to display properly.

I've got a container DIV and a DIV inside as a header container. My main container has a 2px border and I'd like the header DIV to have the same border at the bottom, but it is appearing above the DIV to the right instead of the bottom of the DIV ID "header".

Also, the whole DIV ID "header" should have a green background, but it's not working, it's only applying the green background to the one section. What am I doing wrong?


CSS:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-style: normal;
line-height: normal;
font-weight: normal;
color: #12295B;
margin: 5px 0px 5px 0px;
text-align: left;
}

img.left {
position: relative;
float: left;
}

.clear {
clear: left;
}

#contatiner {
width: 800px;
border: solid 2px #12295B;
position:absolute;
left: 50%;
margin: 5px 0px 10px -400px;
padding: 0px;
}

#header {
margin: 0px;
height: 150px;
background-color: #A3B62C;
border-bottom: solid 2px #12295B;
}

#inside_issue {
border: 0px;
margin: 5px 5px 0px 0px;
width: 125px;
text-align: left;
float: right;
background-color: #A3B62C;

}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #FFF;
text-align: center;
margin: 0px;
}

#inside_issue a {
line-height: 16pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-style: normal;
font-weight: bold;
color: #12295B;
text-decoration: underline;
}

#content {
margin: 10px 0px 0px 0px;
}

#footer {
margin: 10px 0px 10px 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
text-align:center
}



HTML:
<body>
<div id="contatiner">

<div id="header">
<img class="left" src="images/header.jpg" alt="LRA Worldwide Internal Newsletter 12-2006" id="header_image" />

<div id="inside_issue">
<h1>
Inside This Issue:</h1>
<div class="InsideIssueText">
Message from Rob
<a href="leadership.html" target="_self">Leadership Team</a>
<a href="project_journal.html" target="_self">Project Journal</a>
<a href="company_news.html" target="_self">Company News</a>
<a href="new_business.html" target="_self">New Business</a><br />
<a href="LRAnews.html">LRA in the News</a>
<a href="personnel.html" target="_self">Personnel News</a>
<a href="suggestion.html" target="_self">Suggestions</a></div>
</div>
</div>
<div id="content">
<img class="left" src="images/message_header.jpg" alt="Company News" width="650" height="30">
<img class="clear" src="images/team_rush.jpg" alt="rob" width="150" height="145">
<p>Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. </p>

<p>Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues. Text goes here and continues.
</p>

</div>

<div id="footer">
<a href="http://www.LRAWorldwide.com" target="_blank" class="LinkText">www.LRAworldwide.com</a> &bull;
<a href="http://www.lraworldwide.net/newsletter/2006_08/index.html" target="_self" class="LinkText">
Last Month's Newsletter</a><br>
Copyright &copy; 2006 &bull; LRA Worldwide, Inc &bull; All Rights Reserved</div>
</div>
</body>
resdog
11-30-2006, 03:14 PM
try this:

under the #header rule, add the height of the image. If the image height is 150px, then add this property:

height:150px;

that forces the div to be that height, and color in the rest. It worked on my test sample.
wienerdog
11-30-2006, 04:12 PM
It looks like that fixed it. Thanks! Now why is my text not lining up next to the photo?
resdog
11-30-2006, 04:19 PM
You've got a <p> tag starting off the text, which sets it apart from the image. Move the opening <p> tag to BEFORE the <img> tag, then set the align on the <img> tag to be "left." That should fix that problem.
wienerdog
11-30-2006, 04:39 PM
Are you supposed to NOT be using properties like "align" in HTML anymore? Aren't I supposed to do something in CSS to get my image to align left in a paragraph?
Neballer
11-30-2006, 05:37 PM
p {text-align:left;}
<p><img></img>words</P>

wait, forget that.
why don't you just put the image as a background in your header div
#header {
margin: 0px;
height: 150px;
background-color: #A3B62C url('images/header.jpg');
border-bottom: solid 2px #12295B;
}

this why you can get rid of inside_issue and insideIssueTest and just keep it all in one nice neat container
resdog
11-30-2006, 06:28 PM
how about wrapping the image of that guy and the text in another div, with the attribute "clear:left;", then in the "clear" class, set it to float:left;.
wienerdog
11-30-2006, 07:35 PM
how about wrapping the image of that guy and the text in another div, with the attribute "clear:left;", then in the "clear" class, set it to float:left;.

I'm not following you on this one. Why would i want my "clear" class to float left?

I'm having all sorts of problems in Firefox. God this is infuriating.
It looks like Firefox is putting the image on top of the text I want running around it, while it looks ok in IE 6/Win. My links section in the top right looks fine in IE and the background color is cut off in FF. What is going on?!

I should note I'm doing this in XHTML Strict thinking it would help fixing for IE bugs and keep it from going int Quirks mode, alleviating the broken box model.

EDIT: Oh DUUHHHHH - The height of my HEADER DIV wasn't high enough. Duh duh duh! I'm an idiot.