Topic: Cleanest way to build boxes with rounded edges, borders/dropshadows and gradients

Hi, I've been working on a site the last week or so and I'm beginning to feel that I'm going about things the wrong way to build these panels that I've had from my design.



Here is an example panel, the content that fits inside can grow in length, so the width of the panel will be fixed, but not the height. usually I would crop the image into two parts, a large top part, and a small bottom part, that would include the curves only, if necessary I would add a backround colour to match the end point of the gradient.

The problem here is that this involves a drop shadow and sits on a background that includes a gradient as well (may not in this screenshot), so I want to use a png to work best with the drop shadow on the box and the anti-aliasing on the curves, however this will cause me problems with IE6.

In any case here's a sample of what my current code looks like pretty much

<div class="panel">
  <div class="innerPanel">
    <p>This is the content inside my panel</p>
  </div>
</div

div.panel {
  background: url("../images/bg_panel_bottom.png") no-repeat 0 100%;
  padding: 0 0 5px;
}

div.innerPanel {
  background: url("../images/bg_panel_top.png") no-repeat 0 0;
  padding: 5px 5px 0;
}

Witht he code above I would use a large extended bg_panel_top.png so that if the panel grew it would mange, the problem here is that the gradient would lose its visual appeal, and it's posible with excessive content that the background would eventually run out and look broken.

Now I've no phobia of adding mroe divs, but I do want the code to be clean and slick, so it is easiy readable and rewritable, I also don't want to rely on any kind of JavaScript solution, so, has anyone got any ideas or points they'd like to raise, any suggestions on how to improve this?

When I have to tackle creating containers like this I typically use this structure.

<div class="container">
	<div class="top"></div>
	<div class="content">
		<p>Stuff</p>
	</div>
	<div class="bottom"></div>
</div>

div.container { width: 200px; }
div.container div.top { background: url("top.png") no-repeat; height: 5px; }
div.container div.content { background: url("content.png") repeat y; padding: 5px; }
div.container div.bottom { background: url("bottom.png") no-repeat; height: 5px; }

And as for the IE6 transparency bit Javascript is your only real option aside from reisio's suggestion of just making a separate graphic for IE6 only. I personally use a jQuery plugin called iFixPng.

About PNGs, if you're fine with having alpha transparency in every browsers but IE6, you can use PNG8 with alpha transparency. IE6 will simply skip any non-fully opaque pixel.

All you need is to add an extra program to your PNG creation process, or pay for Fireworks and learn Fireworks and learn a special PNG creation process, etc.!

quote:

---

When I have to tackle creating containers like this I typically use this structure.

code:
<div class="container">
<div class="top"></div>
<div class="content">
<p>Stuff</p>
</div>
<div class="bottom"></div>
</div>

div.container { width: 200px; }
div.container div.top { background: url("top.png") no-repeat; height: 5px; }
div.container div.content { background: url("content.png") repeat y; padding: 5px; }
div.container div.bottom { background: url("bottom.png") no-repeat; height: 5px; }

---

That's precisely what I'm trying to avoid though

Good point Poi, I never thought to try just an 8-bit png.