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@57g2000hsv.googlegroups.com>,
VUNETdotUS
> 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:
On Nov 10, 5:12 am, "John L."
> 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:
>
>
>
>
> content
>
>
>
>
> .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