Scaling Limits accross x-axis

[windwalker]

Hi everybody,
I've got a little question about something I've been toying / battling with for sometime now.

It's pretty straightforward: "Is there a way to limit the scaling factor across the x-axis? ie. If I want a page to scale from 1024 to 1200, is there a way to limit the scaling?"

1. If I set the table to scale at say 95%, at 1024 I'm displaying ~ 972, and at 1280 I'm displaying ~ 1216, this is okay, but not ideal. Is there another way to insure a small space around the sides?

[edited by: windwalker at 4:11 pm (utc) on Sep. 25, 2007]

[whoisgregg]

Welcome to WebmasterWorld [webmasterworld.com], windwalker!

You can use the CSS declaration max-width, but I don't believe it's fully supported across all browsers. You can always use javascript to "watch" the window width and dynamically rewrite the styles of the elements, but users without javascript would need an alternate solution.

Btw, signatures and URLs (linked or not) aren't allowed at WebmasterWorld. :)

[windwalker]

Thanks Gregg,
Maybee I'm stuck with percentages if max-width isn't cross compliant...

Thanks for the heads up about signatures, I was trying to be polite by putting one! Opps!

[whoisgregg]

I did a little bit of research... it looks like max-width is supported in IE7, just not in IE6. :D

[Robin_reala]

Yep, for everything except tables.

[whoisgregg]

Thanks Robin. :)

[Marshall]

windwalker,

You could set the width of the parent element that contains your content, e.g. a <div> wrapper around everything, to 100% then set a margin. Browsers have a default margin, but it is not uniform, so you could do the following:

body {margin:0; padding:0;}
#wrap {width: 100%; /* though I suggest 99% */ margin: 5px;}

<div id="wrap">
ALL YOU CONTENT
</div>

I strongly suggest you do not use:
* html body {margin:0; padding: 0;}
as you will have to set the margins and padding for [u]every[/u] element.

Marshall