liquid layout

[mr curious]

Hey all,

I tried my hands on a liquid layout website and it seems that everything turned out alright, its just that (in IE expecially) is that when I zoom the percentage of the browser, the text in the body spills out the divs.

Not really sure why this happens.
the site is at http://www.cherryart.co.za

Thanks
mc

[abduraooft]

When aiming a liquid layout, the better unit of measurement to be used is em. Otherwise the layout may break even in FF, if the user has set "Zoom text only" under the "View" tab in his browser.

Have a look at http://jontangerine.com/log/2007/09/...youts-with-css

[mr curious]

(1) I don't care for Elastic Layout because enlarge or shrink only text size and not image. Since modern browsers has ZOOM there is no use in just text.

Is there any way to keep a liquid layout and have the div resize with an increase in size?

And I also wanted to know if I coded anything badly in terms of liquidity, since this is my first attempt at a liquid layout.

Thanks

[GoozeX]

Originally Posted by mr curious

Is there any way to keep a liquid layout and have the div resize with an increase in size?

And I also wanted to know if I coded anything badly in terms of liquidity, since this is my first attempt at a liquid layout.

Thanks

Try replacing the em with % for your div.

[mr curious]

I haven't used em's. Its all in %. if you'll take a look at the link to the site

[GoozeX]

Any value set using % will change as the size of browser window changes: the bigger the browser, the bigger the padding will come.

If you want your design to scale well with different font sizes, then you use ems. So if users increase their browsers font sizes, then sizes set in ems will also increase accordignly.

Using px is for precise design with graphical elements that line up exactly, regardless of browser window size or font setting.

By the way, i checked your source code and you got few errors.
For the Cherry Art, when using <span> dont use "id" use "class" instead.

<p><span id="cherry">CHERRY ART</span>&nbsp; produces a wide range of prints…

For all the <spans id=""> change the id to class <span class="">

[mr curious]

cool thanks Goozex.
That makes perfect sense. So in a way liquid layouts don't accommodate for everything!
is there a way to combine a liquid layout with ems?
so you could still define containers etc with % but the font size with ems?

[effpeetee]

This may mildly interest you.

Try pulling it around. Size wise.
"control +" and "control -" will alter the text size without altering the image.
Frank