IE6 bottom div space

J

John L.

VUNETdotUS said:
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.
 
V

VUNETdotUS

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,774
Messages
2,569,598
Members
45,158
Latest member
Vinay_Kumar Nevatia
Top