Corner images using CSS

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;
}

Could you outline what IE8 does wrong, for those of us who don't want to discover this one in the future? — ijw
– ijw, Commented Sep 1, 2009 at 19:55

Kobi · Accepted Answer · 2009-06-18 08:50:19Z

2

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.

answered Jun 18, 2009 at 8:50

Kobi

139k41 gold badges259 silver badges302 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ross Over a year ago

This was the method I used first, I couldn't find a way to make the bottom corners stick to the bottom on large resolution monitors however - the content's pretty short.

Kobi Over a year ago

I guess the inner divs should fill 100% of the main div, and it should be easy to position the that div. But, well, you've already tried it.

Loofer · Accepted Answer · 2009-06-18 08:59:28Z

0

you could try forcing IE8 into IE7 compatablity mode.

stick

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

in your <head>

answered Jun 18, 2009 at 8:59

Loofer

7,0339 gold badges67 silver badges107 bronze badges

Collectives™ on Stack Overflow

Corner images using CSS

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related