Archive for November 27th, 2006

With IE7 came a new feature I was ecstatic about.  IE7’s pagezoom allows a user to zoom into a website much like you would a PDF.  Unlike previous versions of this feature, the entire page gets enlarged, not just the text.  This finally makes zooming useful for users with impaired vision.

I wanted to make sure this feature worked well with LansingLowdown.com, a local entertainment site I maintain at The State News.  I was really pleased with how well it worked on the site.  There were only 2 visual errors that occured when zooming the page.

Background Image Scaling

It appears that background images aren’t scaled when the page is enlarged.  Luckily, on LansingLowdown.com, the background isn’t a vital part of the site’s design.  Which is good because there doesn’t appear to be a solution to this problem short of breaking semantic markup.

Position Relative Bottom Margin

The other error I ran into was related to a div which had the property position: relative.  For some reason, a position: relative DIV gets a bottom margin which expands the more the page is zoomed.  If you’re using IE7, you can check out this page which will show the error in action.

There are two different ways to solve this problem.  In the case of LansingLowdown.com, I removed the position: relative from the div causing the problem.  I was able to remove the property from the header of the site and work around using the property.

If this is not possible with your site’s design, you can also try to float your position: relative DIV.  If your DIV is floating, the problem just doesn’t occur.  In many cases, this may take some rethinking of how your site is coded.

It’s likely that there will be certain display errors which can’t be fixed.  It’s best to just try and minimize those errors and make your site as usable as possible for people that need the IE7 pagezoom feature.