Position image at the bottom of container for IE

am 08.11.2007 17:59:12 von vunet.us

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

Re: Position image at the bottom of container for IE

am 08.11.2007 18:02:27 von Els

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/

Re: Position image at the bottom of container for IE

am 08.11.2007 18:03:25 von Els

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/

Re: Position image at the bottom of container for IE

am 08.11.2007 20:32:46 von vunet.us

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!

Re: Position image at the bottom of container for IE

am 08.11.2007 20:38:07 von Nik Coughlin

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 :)

Re: Position image at the bottom of container for IE

am 08.11.2007 20:54:24 von Els

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/

Re: Position image at the bottom of container for IE

am 08.11.2007 21:03:26 von vunet.us

Re: Position image at the bottom of container for IE

am 08.11.2007 21:09:38 von vunet.us

Re: Position image at the bottom of container for IE

am 08.11.2007 21:22:23 von Els

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/