On Tue, Sep 22, 2009 at 8:54 AM, bill walton <bwalton...@gmail.com> wrote:
> The panel in the middle behind the signup form is actually two images:
> an 11px-wide one on the left that gets repeated, and an 11px one on the
> right that finishes the image off. The visual intent is shading on the
> bottom and right edges of the panel for a 3D effect.
>
> The problem is that the image on the right is not expanding to the same
> height as the one on the left.
A possible solution:
HTML:
<div id="outer">
<div id="inner">
...
</div>
</div>
CSS:
#outer {
background: url(right-edge.png) no-repeat bottom right;
margin: 0;
padding: 0;
padding-right: [width of right-edge.png]px;
}
#inner {
background: url(bottom.png) repeat-x bottom left;
margin: 0;
padding 0;
}
As long as you never give #inner padding-right & never give #outer
padding-bottom, you should be OK.
If you float any children of #inner, make sure to add overflow:hidden to #inner.
Erik
PS This hasn't been tested in IE6, so you might need to force
hasLayout for it to work. (Give each of those divs zoom:1 and you
should be fine.)
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
