CSS Elastic text box with background images for borders and corners

Discussion in 'CSS' started by pample, Oct 9, 2008.

0
  1. #1
    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
     
    pample, Oct 9, 2008 IP
  2. pample

    pample Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    ps. Just a little more info before anyone suggests the sliding doors method or anything similar. The images I'm using are all .pngs with transparency settings on them. I want to be able to reuse it throughout a site setting different widths and having different amounts of text so I need a way of setting the middle edges heights to be the same as the centre (content) box.

    Thanks again
     
    pample, Oct 9, 2008 IP
  3. feha

    feha Active Member

    Messages:
    1,005
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    80
    #3
    feha, Oct 10, 2008 IP
  4. feha

    feha Active Member

    Messages:
    1,005
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    80
    #4
    Sorry!
    Double post without intention, edited.
    Thank you for understanding.
     
    feha, Oct 10, 2008 IP