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

In article
<1194671172.404755.104820 [at] 57g2000hsv.googlegroups.com>,
VUNETdotUS <vunet.us [at] gmail.com> 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

Use a strict doctype, and before anything else, at least get your
snippet to validate.

--
dorayme

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.

On Nov 10, 5:12 am, "John L." <remov... [at] 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