Question

I have a relatively simple design that is puzzling me. It has 4 large images that need to be stuck to the top left, right and bottom left, right corners. The images are quite large and the content container overlaps them. A little something like this:

Structure http://www.kalleload.net/uploads/nizyjc/zxyagpfrmjqe.png

My problem is that my implementation works fine in all major browsers except IE8 (which I was just starting to respect). Is there a better way I can do this?

I’m using the following markup at the moment:

<div class="corner-top">
    <div><img src="./images/top-left-corner.png" /></div>
</div>

<div class="corner-bottom">
    <img src="./images/bottom-left-corner.png" />
</div>

<div id="container">
....
</div>


#container {
    margin: 60px auto;
    width: 488px;
}

.corner-top {
    background: url('./images/top-right-corner.png') top right no-repeat;
    height: 356px;
    min-width: 868px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -20;
}

.corner-top div {
    min-width: 868px;
}

.corner-bottom {
    background: url('./images/bottom-right-corner.png') bottom right no-repeat;
    bottom: 0;
    height: 325px;
    min-width: 868px;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: -20;
}

.corner-bottom div {
    min-width: 868px;
}

Answer 1

There are many approaches to rounded corners (basically the same). I think the most comfortable one to have four divs in each other:

<div id="container" class="topleft"> 
  <div class="topright"> 
    <div class="bottomleft"> 
      <div class="bottomright"> 
         <!-- content -->
      </div>
    </div>
  </div>
</div>

Another advantage is that you don’t need the <img> tags.