IE6 bottom div space

Discussion in 'HTML' started by VUNETdotUS, Nov 10, 2007.

  1. VUNETdotUS

    VUNETdotUS Guest

    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
    VUNETdotUS, Nov 10, 2007
    #1
    1. Advertising

  2. VUNETdotUS

    dorayme Guest

    In article
    <>,
    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


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

    --
    dorayme
    dorayme, Nov 10, 2007
    #2
    1. Advertising

  3. VUNETdotUS

    John L. Guest

    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.
    John L., Nov 10, 2007
    #3
  4. VUNETdotUS

    VUNETdotUS Guest

    On Nov 10, 5:12 am, "John L." <> 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
    VUNETdotUS, Nov 12, 2007
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Dan
    Replies:
    1
    Views:
    8,360
    ainigma
    Apr 4, 2008
  2. Shuo Xiang

    Stack space, global space, heap space

    Shuo Xiang, Jul 9, 2003, in forum: C Programming
    Replies:
    10
    Views:
    2,885
    Bryan Bullard
    Jul 11, 2003
  3. Christian Seberino
    Replies:
    21
    Views:
    1,649
    Stephen Horne
    Oct 27, 2003
  4. Chris
    Replies:
    2
    Views:
    11,688
    Bergamot
    Sep 28, 2006
  5. Royan
    Replies:
    4
    Views:
    160
Loading...

Share This Page