I have been driving myself slowly mad for the last 2 days trying to find a way to design this elastic text box. It is made up of 9 transparent .pngs but I am having serious problems getting the side edge classes to set themselves the same height as the centre class which contains the text.
There are currently different situations occurring in IE and FF with IE showing the edges and FF not giving them any height at all. Please excuse the code as it has been a long day of trial and lots of error.
Current state <a href="http://www.keirmcguffogdesign.com/example.html">here</a>.
HTML
<div class="boxMiddleRow">
<div class="boxLeftEdge"></div>
<div class="boxCentre">
<div id="lipsum">
<p> Lorem ipsum ...........</p>
</div>
</div>
<div class="boxRightEdge"></div>
</div>
CSS with /* left in so you might be able to see what I've been trying and what doesn't work.
.boxMiddleRow {
position: static;
/*background-image: url(../images/content/textBoxEdgeLeft.png);
background-repeat: repeat-y;*/
width: 100%;
display:block;
/*padding:50px;*/
}
.boxLeftEdge {
background-image: url(../images/content/textBoxEdgeLeft.png);
background-repeat: repeat-y;
position: static;
display:block;
float:left;
width: 50px;
height:100%;
left: 0px;
/*margin-right:-50px;*/
/*padding-bottom:50px;*/
}
.boxCentre {
background-image: url(../images/content/textBoxCentre.png);
background-repeat: repeat;
position:static;
display:block;
/*float:left;*/
/*margin-left: 50px;
margin-right:50px;*/
margin-left:50px;
margin-right:50px;
}
.boxRightEdge {
background-image: url(../images/content/textBoxEdgeRight.png);
background-repeat: repeat-y;
position: static;
display:block;
float:right;
margin-left:-50px;
/*margin-top:-50px;*/
width: 50px;
height:100%;
right: 0px;
/*padding-top:50px;
padding-bottom:50px;*/
}
Thanks for any help
Bookmarks