Page 1 of 1

Rounded rectangle in IE not working

Posted: Tue Apr 03, 2007 10:42 am
by Chris Corbyn
See this page: http://217.147.94.70/

The grey box on the left with the rounded corners should look like it does in FF. But in IE 6 and 7 the bottom of it has a flat edge as if the background is overflowing. Any clues?

Here's the CSS:

Code: Select all

div.rect1 {
  background-image: url(/images/rect_fill.png);
  background-repeat: repeat;
}

div.rect2 {
  background-image: url(/images/rect_tr.png);
  background-position: top right;
  background-repeat: no-repeat;
}

div.rect3 {
  background-image: url(/images/rect_bl.png);
  background-position: bottom left;
  background-repeat: no-repeat;
}

div.rect4 {
  background-image: url(/images/rect_br.png);
  background-position: bottom right;
  background-repeat: no-repeat;
}

div.rect5 {
  background-image: url(/images/rect_tl.png);
  background-position: top left;
  background-repeat: no-repeat;
  padding: 10px;
}
And here's the bit of the markup although you'll probs want to look at the source from the page directly.

Code: Select all

<div class="rect1">
  <div class="rect2">
    <div class="rect3">
      <div class="rect4">
        <div class="rect5">
          <div id="releases_bg">
            <div id="releases_header">Latest Release</div>
            <ul id="releases_list">
              <?php foreach ($releases as $release): ?>
                <?php foreach ($release as $file): ?>
                <li>&raquo; <?php echo link_to($file["filename"], $file["url"]) ?></li>
                <?php endforeach ?>
              <?php endforeach ?>
            </ul>
            <div class="centered">
              Released, <?php echo $releaseDate ?> 
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
I've taken out everything that's nested deeper than "rect5" and it still breaks so it's gotta be something with the CSS from those 5 divs.

I'm just off for a beer after work but I'll respond any replies later. Cheers guys :)

Posted: Tue Apr 03, 2007 11:06 am
by matthijs
IE is probably chocking on those 10 divs, just like I do ;)

No serious, just replace all that with:

Code: Select all

<div id="box">
 <h3 id="releases_header">Latest Release</h3>
  ...
</div>

Code: Select all

#box {
  padding-bottom:10px;
 background: url(img/largeroundedimagewithbottomcorners.gif) bottom left no-repeat;
}
#box h3 {
 margin:0;
 padding:10px 10px 0;
 background:url(img/magewithtoproundedcorners.gif) top left no-repeat;
}
This works everywhere.

Posted: Tue Apr 03, 2007 1:17 pm
by Chris Corbyn
Ah yeah, that's how I did that last one (which worked) but I was trying to be smart and make one that will stretch in all directions. Mine works when you put that code by itself, it's just breaking in its surroundings although the page validates.

I'll give it another look after I've eaten and if I can't solve it I'll just go back to the fixed-width version :)

Cheers.

Posted: Tue Apr 03, 2007 10:50 pm
by Kieran Huggins

Posted: Wed Apr 18, 2007 4:48 pm
by shongaks
so have you solved it???

please let me know, so I could learn it too... Thank you. :oops:

Posted: Thu Apr 19, 2007 12:43 am
by matthijs
shongaks, the code I showed is flexible and does work very good. And in all browsers. Only if you need a completely fluid box (expanding horizontally) you'll need a bit more code.

Roger has a prettier example, based on the same principles:
http://www.456bereastreet.com/lab/teaser/
And even an example with a single image:
http://www.456bereastreet.com/lab/teaser/one_image.html
And here is his flexible width example
http://www.456bereastreet.com/lab/teaser/flexible/

(they should give this guy an Oscar for his site)

Posted: Thu Apr 19, 2007 1:32 am
by Chris Corbyn
Yeah I've put it on the back-burner for now while I finsih the other bits of the site. I'll just use the same concept as matthijs posted though because it's in a fixed-width side bar.