Rounded rectangle in IE not working

It doesn't matter if you do all the error checking in the world, or if you have the most beautiful graphics, if your site or application design isn't usable, it's not going to do well. Get input and advice on usability and user interface issues here.

Moderator: General Moderators

Post Reply
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Rounded rectangle in IE not working

Post 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 :)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

User avatar
shongaks
Forum Newbie
Posts: 2
Joined: Wed Apr 18, 2007 3:04 pm

Post by shongaks »

so have you solved it???

please let me know, so I could learn it too... Thank you. :oops:
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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)
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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.
Post Reply