DIV background (top & bottom images) overlapping?

sp1ky · #1 (**permalink**) 11-09-06, 12:05 PM

Hi guys,
Not sure if this is css or html....

I am trying to create a table-less content box with rounded/shadowed top/bottom images. I have my <div> with a background set (Shadowed side). My problem is that when I put an <img> with my shadow/round bottom before ending div </div> it continues.... Ok that was a sucky explanation.. heres what i mean:

PHP 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">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



  <title>Untitled Document</title>

<style type="text/css">

/*<![CDATA[*/

<!--

body {

        background: #4a5a63;

        margin: 0;

}

body, td, th {

        font: 0.88em Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans-serif;

}

.container {

        width: 790px;

        margin: 0 auto;

}

.content {

        float: left;

        background: url(images/pcontent_bg.gif) repeat-y;

}

.navigation {

        float: right;

        margin-top: 0.5em;

        background: url(images/nav_bg.gif) repeat-y;

}

 div.textualcontent {padding-left:7px;}

-->

/*]]>*/

</style>

</head>



<body>

  <div class="container">

    <div class="content">

      <img alt="" src="images/pcontent_top.gif" />



      <div class="textualcontent">

        Main Content loaded here

      </div><img alt="" src="images/pcontent_bottom.gif" />

    </div>



    <div class="navigation">

      <img alt="" src="images/nav_top.gif" />



      <div class="textualcontent">

        <ul>

          <li>Link 1</li>



          <li>Link 2</li>



          <li>Link 3</li>

        </ul>

      </div><img alt="" src="images/nav_bottom.gif" />

    </div>

  </div>

</body>

</html>

See it here

It happens it both IE and FF so i assume its a simple error..
Thx
= Sp1kY

jfulton · #2 (**permalink**) 11-12-06, 11:53 AM

The lines sticking out are the backgoround image of the navigation div. Maybe you should try using the top and bottom rounded corner images as backgrounds instead of actual img elements.

Code:

.navigation {
        float: right;
        margin-top: 0.5em;
}
.navigation top_container{
        width: ?px;
        height: ?px;
        background: transparent url(images/nav_top.gif) no-repeat scroll top center;
}
.navigation bottom_container {
        width: ?px;
        height: ?px;
        background: transparent url(images/nav_bottom.gif) no-repeat scroll bottom center;
}

.navigation div.textualcontent {
        padding-left:7px;
        background: url(images/nav_bg.gif) repeat-y;
}

Code:

    <div class="navigation">
      <div class="container_bottom"></div>
      <div class="textualcontent">
        <ul>
          <li>Link 1</li>

          <li>Link 2</li>

          <li>Link 3</li>
        </ul>
      </div>
      <div class="container_bottom"></div>
    </div>