Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > IE6 bottom div space

Reply
Thread Tools

IE6 bottom div space

 
 
VUNETdotUS
Guest
Posts: n/a
 
      11-10-2007
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

 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      11-10-2007
In article
<(E-Mail Removed). com>,
VUNETdotUS <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
 
John L.
Guest
Posts: n/a
 
      11-10-2007
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.
 
Reply With Quote
 
VUNETdotUS
Guest
Posts: n/a
 
      11-12-2007
On Nov 10, 5:12 am, "John L." <(E-Mail Removed)> 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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Bottom DIV handles events from top DIV layers only in IE6,7 Royan Javascript 4 12-21-2008 12:52 PM
css "div" bottom of window or bottom of content. Dan HTML 1 04-04-2008 09:40 AM
aligning a nested div to the bottom of the parent div Chris HTML 2 09-28-2006 08:48 PM
Why Python style guide (PEP-8) says 4 space indents instead of 8 space??? 8 space indents ever ok?? Christian Seberino Python 21 10-27-2003 04:20 PM
Stack space, global space, heap space Shuo Xiang C Programming 10 07-11-2003 07:30 PM



Advertisments