Question

I have an application with some smallish windows that are displayed in isolation – these windows look fine when viewed on a small screen, but on a large one they look awkwardly small (and perhaps more annoyingly, awkwardly positioned).

Is there a way to have, say, a 0px margin-top if the screen height is less than 1000px, then increase that margin-top by 50% of any additional height beyond that?

Most importantly, I only want to consider implementing something like this if it can work dependably cross-browser (some of my users will be as far back as IE7).

Answer 1

With jQuery/javascript (cross-browser) it would be something like this:

$(document).ready(function()
{
   if(screen.height > 1000)
      $('body').css('margin-top', (screen.height-1000).toString()+'px');
   else
      $('body').css('margin-top', '0px');
});

Hope it helps.