What I am trying to do is create a set of images in a fluid layout
that adjusts based on the browser size.
The code is really very simple. I have a css-p div that contains an
image placed in a certain spot on the page. The container div is
sized based on the client browser. The idea is to have the large
image inside sized to match the container. Using min-width and
max-width (both set to 100% in this case) as percentages resizes the
image based on the container (yay!) rather than the original image
size (which is not helpful in this case). Using width as has been
suggested refers back to the original image size.
This sample code works in Firefox, Mozilla, Safari, Opera ... but not
in Internet Explorer because there is apparently no suppourt for
min-width and max-width:
<style>
.fluidcontainer {overflow: hidden; border: none; position: absolute;}
.fluidimage {min-width: 100%; max-width: 100%; border: none;
position: absolute; top: 0px; left: 0px;}
</style>
...
<div class="fluidcontainer" style="top: 11.8%; left: 26.3%; width:
36.2%; height: 35%;">
<img class="fluidimage" src="/images/coolpic.jpg" id="coolpic" />
</div>
Any other suggestions?
On Mon, Mar 17, 2008 at 10:47 AM, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
> Jack Blankenships wrote:
> > I am trying to apply a max-width and min-width feature to a page for
> > IE6, but all of the examples I see online appear like this:
> >
> > (see:
> > http://www.antix.co.uk/code/css/imposing_minimum_width/default.htm)
>
>
> > The problem is that instead of having a specific number of pixels I
> > want it to be a percentage, and ideally it should be with respect to
> > the containing block element (ex. a <div>) rather than the client
> > width.
>
> Apart from the example page and 'min-width' expression being made for
> IE6 quirks mode only, it sounds like you're using 'min/max-width'
> backwards relative to plain 'width' in all browsers.
> Do you have a link so we can see what exactly you're trying to achieve?
>
> In the mean time; here are some working 'min/max-width' solutions, with
> demos, that are not relying on IE6' mode...
>
> <http://www.gunlaug.no/contents/wd_additions_14.html>
>
> regards
> Georg
> --
> http://www.gunlaug.no
>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
