SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2006
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css table like layout with image backgrounds

    I took this code from one of the samples on the Web. I have modified it with my images which I needed to makse much smaller than the original ones. I just can't seem to get rid of extra space after the top row and before the middle row. Any ideas...

    Also, is there a way to attach screen captures in the post?

    Thanks!

    Here is my code....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>Custom Borders Using Divs and CSS Float</title>
    <style type="text/css">
    body {
    background-color:#ffffff
    }

    .TableLikeContainer {
    padding:0;
    margin:0;
    }

    /* Top Row */
    .CustomBorderTopBorder {
    height:5px;
    background-image: url(/common_images/test/tHor.jpg);
    background-repeat: repeat-x;
    }

    .CustomBorderTopBorder h2 {
    font-size:medium;
    text-align:center;
    padding-top:10px;
    margin-top:0;
    margin-bottom:0;
    }

    .CustomBorderTopLeftBorder {
    width:5px;
    height:5px;
    float:left;
    background-image: url(/common_images/test/tl.jpg);
    background-repeat: no-repeat;
    }

    .CustomBorderTopRightBorder {
    width:5px;
    height:5px;
    float:right;
    background-image: url(/common_images/test/TR.jpg);
    background-repeat: no-repeat;
    }

    /* Middle Row */
    .CustomBorderLeftBorder {
    height:100%;
    background-image: url(/common_images/test/verL.jpg);
    background-repeat: repeat-y;
    }

    .CustomBorderRightBorder {
    background-image: url(/common_images/test/verR.jpg);
    background-repeat: repeat-y;
    background-position: 100% 0%;
    }

    .CustomBorderCenterContent {
    margin-left:5px;
    margin-right:5px;
    background-color:white;
    }

    .CustomBorderCenterContent p {
    margin:0;
    padding-top:0.25em;
    padding-bottom:0.25em;
    }

    /* Bottom Row */
    .CustomBorderBottomBorder {
    height:5px;
    background-image: url(/common_images/test/BHor.jpg);
    background-repeat: repeat-x;
    }

    .CustomBorderBottomBorder h4{
    font-size-small;
    text-align:center;
    padding-bottom:10px;
    margin-top:0;
    margin-bottom:0;
    }

    .CustomBorderBottomLeftBorder {
    height:5px;
    width:5px;
    float:left;
    background-image: url(/common_images/test/BL.jpg);
    background-repeat: no-repeat;
    }

    .CustomBorderBottomRightBorder {
    height:5px;
    width:5px;
    float:right;
    background-image: url(/common_images/test/BR.jpg);
    background-repeat: no-repeat;
    }



    </style>
    </head>
    <body>
    <div id="Panel" class="TableLikeContainer" style="width:200px;">
    <div id="Box2" class="CustomBorderTopBorder">
    <div id="Box1" class="CustomBorderTopLeftBorder">&nbsp;</div>
    <div id="Box3" class="CustomBorderTopRightBorder">&nbsp;</div>
    <!--<h2>top</h2>-->
    </div>

    <div id="Box4" class="CustomBorderLeftBorder">
    <div id="Box6" class="CustomBorderRightBorder">
    <div id="Box5" class="CustomBorderCenterContent">
    <!-- margins don't count in the height -->
    <p>asdfadsf</p>
    <p>asdfadsf</p>
    </div>
    </div>
    </div>

    <div id="Box8" class="CustomBorderBottomBorder">
    <div id="Box7" class="CustomBorderBottomLeftBorder"></div>
    <div id="Box9" class="CustomBorderBottomRightBorder"></div>
    <!--<h4>bottom</h4>-->
    </div>
    </div>
    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Its hard to see without your images in place where you are talking about but i guess its where you have specified small heights for your elements.

    IE won't render an element less than the current font-size/line-height unless you reduce the font-size to match or use overflow:hidden instead.

    e.g.

    Code:
    .CustomBorderTopBorder {
    height:5px;
    background-image: url(/common_images/test/tHor.jpg);
    background-repeat: repeat-x;
    overflow;hidden
    }
    You will probably need to do that for all elements that have a small height.(less than the current font-size)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •