Position image at the bottom of container for IE

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

  1. VUNETdotUS

    VUNETdotUS Guest

    My div has a width 100px. My images has the same width. Image is a
    background curve for the bottom of the div container. How do I
    position it perfectly attached to the bottom right/left corners in IE
    when left:0px;bottom:0px produce no perfect result (I see the space at
    the bottom)
    Thanks
    VUNETdotUS, Nov 8, 2007
    #1
    1. Advertising

  2. VUNETdotUS

    Els Guest

    VUNETdotUS wrote:

    > My div has a width 100px. My images has the same width. Image is a
    > background curve for the bottom of the div container. How do I
    > position it perfectly attached to the bottom right/left corners in IE
    > when left:0px;bottom:0px produce no perfect result (I see the space at
    > the bottom)


    By using background images as background images?

    element#id{
    background:url(image.jpg) no-repeat bottom left;
    }

    Always perfectly attached, no whitespace, and easy to swap by a
    different image for all pages at once in the case of a redesign later.

    --
    Els http://locusmeus.com/
    Els, Nov 8, 2007
    #2
    1. Advertising

  3. VUNETdotUS

    Els Guest

    Els wrote:

    > background:url(image.jpg) no-repeat bottom left;


    Sorry, make that background:url(image.jpg) no-repeat left bottom;
    (first horizontal, then vertical position)

    --
    Els http://locusmeus.com/
    Els, Nov 8, 2007
    #3
  4. VUNETdotUS

    VUNETdotUS Guest

    On Nov 8, 12:03 pm, Els <> wrote:
    > Els wrote:
    > > background:url(image.jpg) no-repeat bottom left;

    >
    > Sorry, make that background:url(image.jpg) no-repeat left bottom;
    > (first horizontal, then vertical position)
    >
    > --
    > Els http://locusmeus.com/


    Thanks!
    VUNETdotUS, Nov 8, 2007
    #4
  5. VUNETdotUS

    Nik Coughlin Guest

    Els wrote:
    > Els wrote:
    >
    >> background:url(image.jpg) no-repeat bottom left;

    >
    > Sorry, make that background:url(image.jpg) no-repeat left bottom;
    > (first horizontal, then vertical position)


    I never knew that! I always use bottom left, it works and the validator
    doesn't complain. You learn something every day :)
    Nik Coughlin, Nov 8, 2007
    #5
  6. VUNETdotUS

    Els Guest

    Nik Coughlin wrote:
    > Els wrote:
    >
    >> Sorry, make that background:url(image.jpg) no-repeat left bottom;
    >> (first horizontal, then vertical position)

    >
    > I never knew that! I always use bottom left, it works and the validator
    > doesn't complain. You learn something every day :)


    Yes, bottom left works because it's pretty explicit, but for example
    40px 200px would have undesired results ;-)

    --
    Els http://locusmeus.com/
    Els, Nov 8, 2007
    #6
  7. VUNETdotUS

    VUNETdotUS Guest

    On Nov 8, 12:03 pm, Els <> wrote:
    > Els wrote:
    > > background:url(image.jpg) no-repeat bottom left;

    >
    > Sorry, make that background:url(image.jpg) no-repeat left bottom;
    > (first horizontal, then vertical position)
    >
    > --
    > Els http://locusmeus.com/


    thanks!
    VUNETdotUS, Nov 8, 2007
    #7
  8. VUNETdotUS

    VUNETdotUS Guest

    On Nov 8, 12:03 pm, Els <> wrote:
    > Els wrote:
    > > background:url(image.jpg) no-repeat bottom left;

    >
    > Sorry, make that background:url(image.jpg) no-repeat left bottom;
    > (first horizontal, then vertical position)
    >
    > --
    > Els http://locusmeus.com/


    what if I already have a background? can I use 3 backgrounds in one
    element for top,left, bottom?
    VUNETdotUS, Nov 8, 2007
    #8
  9. VUNETdotUS

    Els Guest

    VUNETdotUS wrote:

    > On Nov 8, 12:03 pm, Els <> wrote:
    >> Els wrote:
    >>> background:url(image.jpg) no-repeat bottom left;

    >>
    >> Sorry, make that background:url(image.jpg) no-repeat left bottom;
    >> (first horizontal, then vertical position)

    >
    > what if I already have a background? can I use 3 backgrounds in one
    > element for top,left, bottom?


    Not in the current CSS support, no. But you can nest divs. As it so
    happens, Nik just started on a nice tutorial on how to do this for
    fluent design: http://nrkn.com/index.html

    For fixed width, you'll probably (depending on the design of course)
    need only three divs: top, middle, bottom.

    Also, you can re-use divs you're already using anyway, such as the
    header for the top border and corners, the footer for the bottom ones,
    and the container around the page for the repeated background in the
    middle.

    --
    Els http://locusmeus.com/
    Els, Nov 8, 2007
    #9
    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,327
    ainigma
    Apr 4, 2008
  2. Video Flyer
    Replies:
    12
    Views:
    580
    Whitecrest
    Feb 17, 2004
  3. Dave Smithz
    Replies:
    11
    Views:
    1,344
  4. Noozer
    Replies:
    1
    Views:
    7,090
    Carolyn Marenger
    Mar 13, 2006
  5. Cuthbert
    Replies:
    8
    Views:
    411
    Ancient_Hacker
    Sep 13, 2006
Loading...

Share This Page