The Web TV Hack

I don't actually have a web TV to test with but I have downloaded a web TV emulation onto my PC and have run tests with that. What I found is that the emulator ignores percent signs in stylesheet code. I assume that web TV does as well since the emulator is supposed to be duplicating the rendering of the page by web TV. Even if it doesn't this particular code change should not do any harm.

First let's consider what the effect is of ignoring percent signs on the page. The biggest effect is where the width of an element on the page is specified as a percentage. For example I have the content of this site set to take up 94% of the available width (as well as specifying a minimum and maximum width. The code looked like this before I applied the web TV hack.

margin:2% auto;width:94%;min-width:570px;max-width:850px;

Since Internet Explorer 6 is a really old browser that doesn't understand CSS properly it ignores the minimum and maximum width specifications and always displays the content at 94% of the width with a 2% margin on either side. Modern browsers such as Firefox and Opera also apply the minimum and maximum width specifications so that the content never goes below 570 pixels wide or above 850 pixels wide.

The web TV emulator (and presumably web TV as well) ignores the minimum and maximum width specifications and also ignores the percent character as well so it sets the width to a constant 94 pixels resulting in a near unreadable page.

Fortunately there is a fairly simple way to correct this. I simply changed the code to read as follows:

margin:2% auto;width:94%;width:540px%;min-width:570px;max-width:850px;

All web browsers except web TV ignore this additional width specification because 540px% is an invalid value for the width. They all therefore display the page exactly as they did before adding that extra code. With web TV the percentage characters are ignored and so that width is read as 540px which is a valid value and which therefore overrided the earlier specified 94 to bring the content out to fill a width of 540 pixels. Why 540 pixels when I made the minimum width for modern browsers 570 pixels? Well that's because a web TV can only fit 540 pixels across the screen. Sure that stuffs up my page layout slightly with those items that don't fit properly in that width but it is nowhere near as stuffed as when it displays in just 94 pixels.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow