Posted by VUNETdotUS on 11/12/07 15:35

On Nov 10, 5:12 am, "John L." <remov...@edombmtech.co.uk> wrote:
> VUNETdotUS wrote:
> > This example shows a gap in between a div's bottom and background
> > image equal to div's height.
> > Firefox works as expected. Anyone can suggest a fix? Thanks
>
> >http://www.vunet.us/wic/test/ztop.asp
>
> That's not a good way to do it, IMO. Much better to nest the divs:
>
> <div class="box">
> <div class="boxtop">
> <div class="boxbottom">
> content
> </div>
> </div>
> </div>
>
> .box {
> width: 150px;
> background: url(images/bg_ads.jpg) repeat-y;}
>
> .boxtop {
> background: url(images/bg_adstop.jpg) top no-repeat;}
>
> .boxbottom {
> background: url(images/bg_adstop2.jpg) bottom no-repeat;
> padding: 10px;
>
> }
>
> The repeating image should be on the outer div, and the padding should
> be on the inner div (or the elements inside the div if you wish to avoid
> IE5's box model issues).
>
> You could also ease your divitis by applying the background images to
> block level elements inside the box.

thanks a lot. works well

[Back to original message]