CSS - nested div border not working on right hand side.

[jpirkle]

I am trying to figure out the complication here. I have a feeling that the error is due to the CSS being created while learning CSS, but I can niether figure out what is causing the error, or why it would happen.

I have nested divs that I want to display like a table, but the right hand of the inner div appears to be corrupting the right hand side of the outer div.

here is an image, look at the upper right corner.

http://i129.photobucket.com/albums/p233/optimisto1820/assignmentboxpost.png

the css code:


body {
background-color: #8c5325;
color: #000000;
margin-right: 2.5%;
margin-left: 1.5%;
margin-top: 5px;
margin-bottom: 5px;
}

div.body {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
padding-top: 1%;
padding-right: 2.5%;
padding-left: 2.5%;
color: #000000;
}

div.body p {
padding-top: 2px;
margin-bottom: 0px;
}

div.content {
background-color: #FFFFFF;
color: #000000;
margin-top: 1em;
margin-right: 1em;
margin-left: 1em;
}

#Assignmentbox {
clear: both;
border: 2px solid #041547;
width: 95%;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
margin-top: 10px;
}

.Assignmentbox_title {
background-color: #FFFF99;
font-family: Arial, Helvetica, sans-serif;
color: #041547;
font-size: medium;
line-height: normal;
padding: 5px;
font-weight: bold;
width: 100%;
text-align: left;
border-bottom: 1px solid #041547;
margin: 0px;
}

.Assignmentbox_details {
width: 100%;
padding: 5px;
text-align: left;
}


the html code (editing out some content):


<div id="Assignmentbox">

<div class="Assignmentbox_title">Assignment Assignment title goes here</div>
<div class="Assignmentbox_details">
<ol>
<li>Complete the reading for this lesson.</li>
<li>step 2</li>
<li>step 3</li>
<li>step 5</li>
</ol>
<p><!-- #BeginLibraryItem "/educator_amgov_v6/Library/submit_work.lbi" -->
For complete directions on how to submit work and attach files in the assessment area, please go to the <span class="boldblue">Course Information</span> area.<!-- #EndLibraryItem --></p>
</div>
</div>


This occurs in both IE and FF. I would appreciate any insight.

Joe

[mburt]

I don't see the problem in IE, but there is two very important rendering differences between FireFox and IE:
-IE does not calculate padding, borders, margins, etc. when using percentages for widths
-FF does

Change your CSS with this:

body {
background-color: #8c5325;
color: #000000;
margin-right: 2.5&#37;;
margin-left: 1.5%;
margin-top: 5px;
margin-bottom: 5px;
}

div.body {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
padding-top: 1%;
padding-right: 2.5%;
padding-left: 2.5%;
color: #000000;
}

div.body p {
padding-top: 2px;
margin-bottom: 0px;
}

div.content {
background-color: #FFFFFF;
color: #000000;
margin-top: 1em;
margin-right: 1em;
margin-left: 1em;
}

#Assignmentbox {
clear: both;
border: 2px solid #041547;
width: 95%;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
margin-top: 10px;
}

.Assignmentbox_title {
background-color: #FFFF99;
font-family: Arial, Helvetica, sans-serif;
color: #041547;
font-size: medium;
line-height: normal;
padding: 5px;
font-weight: bold;
width:99%;
<--
width: 100%;
-->
text-align: left;
border-bottom: 1px solid #041547;
margin: 0px;
}

.Assignmentbox_details {
width: 100%;
padding: 5px;
text-align: left;
}

[jpirkle]

Thanks, Mike. That helped a bit. It explained enough for me to do the same with the assignment_details rule. The only lingering effect is that the outside border is not complete. See below:

http://i129.photobucket.com/albums/p233/optimisto1820/assignmentboxwithfix.png

the ultimate goal is for this (supposedly) simple construct to be a complete box with a banner for the title.

It seems that setting a background color for the "Assignmentbox_title" (inner div) makes the right hand border of the outer div disappear. I "kludged" one in by setting a right border on the inner div, but it is obviously inside of the outer by 1 pixel.

Once again, I thank you for the explanation, and I hope you have further insight to this missing border.