Okay Im having a little problem with nested divs. I have a div 'table' structure that forms a box with rounded corners and contains div rows, such as header and body rows. These rows contains div cells that content can be put into.
My problem is that if a cell contains more text than it has space and the text overflows, the parent div does not increase in six and so the structure becomes broken and deformed.
Here is an example:
As you can see, the box is displayed perfectly. The 'header row' div is displayed with a red border. the text in the cells does not overflow and so there is no problem here.
However, if I decrease the size of the screen...
Since the individual 'cell' div's widths are based on percentage, their widths decrease as the screen width decreases, so when the text overflows the structure becomes broken. I think this is because the 'header row' div does not increase in size to cater for it's cells overflowing, and the overflowing text interfers with the div layer below the 'header row'.
It's worth mentioning that this happens in both IE and Firefox, but only in IE does the box graphic dissappear, though it is still a problem in Firefox as it displaces the rest of the structures content.
If someone could help me out here I would be most grateful!
Here is the HTML:
And here is the CSS:
My problem is that if a cell contains more text than it has space and the text overflows, the parent div does not increase in six and so the structure becomes broken and deformed.
Here is an example:
As you can see, the box is displayed perfectly. The 'header row' div is displayed with a red border. the text in the cells does not overflow and so there is no problem here.
However, if I decrease the size of the screen...
Since the individual 'cell' div's widths are based on percentage, their widths decrease as the screen width decreases, so when the text overflows the structure becomes broken. I think this is because the 'header row' div does not increase in size to cater for it's cells overflowing, and the overflowing text interfers with the div layer below the 'header row'.
It's worth mentioning that this happens in both IE and Firefox, but only in IE does the box graphic dissappear, though it is still a problem in Firefox as it displaces the rest of the structures content.
If someone could help me out here I would be most grateful!
Here is the HTML:
Code:
<div class="rounded-box">
<div class="top-left"></div><div class="top-right"></div>
<div class="header-row">
<div class="cell1a">Indemnity</div>
<div class="cell2a">Spread Initial</div>
<div class="row-end"> </div>
</div>
<div class="bottom-left"></div><div class="bottom-right"></div>
</div>And here is the CSS:
Code:
/* Styles for rounded boxes */
.rounded-box {margin: 20px 0 20px 0;}
.top-left {background-image: url('../images/box.gif'); margin-right: 9px; height: 9px; font-size: 2px;}
.top-right {background-image: url('../images/box.gif'); margin-top: -9px; margin-left: 9px; background-position: 100% 0; height: 9px; font-size: 2px;}
.bottom-left {background-image: url('../images/box.gif'); margin-right: 9px; background-position: 0 -9px; height: 9px; font-size: 2px;}
.bottom-right {background-image: url('../images/box.gif'); margin-top: -9px; margin-left: 9px; background-position: 100% -9px; height: 9px; font-size: 2px;}
/* Styles for question areas */
.header-row {border: solid 1px red; background: #EEEEEE; color: #000000; font-size: 11px; padding: 0 10px 0 10px; font-weight: bold;}
.body-row {border-left: 1px solid #336699; border-right: 1px solid #336699; background: #EEEEEE; color: #000000; font-size: 11px; padding: 0 10px 0 10px;}
.body-row select {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; margin-top: 0px; border: solid 1px #336699;}
.body-row input {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px !important; margin-top: 0px; border: solid 1px #336699;}
.body-row .question {margin: 0; padding: 5px 0 10px 0;}
.body-row .question-off {margin: 0; padding: 5px 0 10px 0; color:#AAAAAA; text-decoration: none;}
.row-spacer {border-left: 1px solid #336699; border-right: 1px solid #336699; background: #EEEEEE; height: 5px; font-size: 1px; line-height: 0;}
.row-end {text-align: right;}
/* Header cell styles for rounded box areas */
.header-row .cell1a {float: left; width: 17%; text-align: center;}
.header-row .cell2a {float: left; width: 17%; text-align: center;}
