View Full Version : screen resolution accessibility - a perfect solution?

12-20-2010, 01:19 PM
Dear Forum,

I began working on a "best" solution for screen res widths of 1024+ for centralised fixed width pages with potentialy large (or any size) left and right margin graphics and have come up with something I'm very happy with:

an outside wrapper set to 100% + overflow hidden (removes the horizontal scrollbar on all screen res)

a wrapper inside that set to 1000px with margin auto (allows the central page to be in the middle of, or to fill the page of all screen res - brilliant because originally one main objective was for a left margin not to push the page to the right and out of view on a lower res screen)

an inside wrapper inside the centralised one above set to for example, width 1800px and left 400px, allows both margins to be viewable for all screen res larger than the central page (1000px+)

ok, so the final hurdle in what for me would be a perfect solution is for any screen res lower than 1000px - currently the horizontal scroll bar is removed - therefore the central page has its right potentialy chopped off.... and so with some research, I've put together the following JavaScript:

<SCRIPT language="JavaScript">
if (screen.width<1000)
{document.getElementById('outsidewrapper').style.cssText='overflow: visible;';}

This is my best effort at JavaScript - I am slowly and steadily learning more. I feel its on the right track, to return the overflow on the outer wrapper would bring the horizontal scroll bar back, but on IE (lower than 1000 res screens) this causes an error and does not work on any browser.

If anyone could help with syntax or wisdom how to get this code to work, it'd make for me today a good day, if any of this is difficult to understand without seeing, the site is: http://www.delightwebdesign.co.uk/

many thanks


rnd me
12-20-2010, 09:44 PM

12-21-2010, 06:30 PM
Well I tried that code (thanks for giving it a shot) although I couldn't get it to work - IE came up with something like object not found...

but anyway, it turns out that putting "min-width" on the outside wrapper restores the scroll bar for low res screens, it magically revokes the overflow: hidden - something I never new until today!