[Web4lib] web page layout in different monitors and browsers

Tue Jul 3 15:22:48 EDT 2007

On 7/3/2007 2:28 PM, Sandra Cahillane wrote:

> Hello all,
> 
> I am having a difficult time explaining to my director why our home page
> looks different in monitors with different resolutions and different
> browsers.  From what I've read, the best way to work around this issue is
> by using % vs. set widths and/or styles.  I've changed our page to all %'s
> but there is still a lot of blank space in a 1280x1024 resolution browser.

You should see it at 1920x1440.  :-)

Actually, the best way to work around this is to make your director
understand that web pages just *won't* - and shouldn't - "look the same"
in different display environments.  You may have to swat him with a
rolled-up newspaper.  And BTW, screen resolution in pixels, screen size
in inches, window size in inches, and window size in ems are all
different, largely unrelated, and mostly unknowable by you.  Rather than
trying to get things looking the same across displays, decide how you
want them to change as displays change, and design accordingly.

Yes, percentages are more flexible than pixel-based measurements across
different displays.  But since your page's outline is '<body><table
width="80%">...</table></body>', you're committing 20% of the window to
whitespace no matter what.  As the window grows in size, the empty white
margins will grow, probably bigger than you want.  As an alternative,
you might try something like:

  body {
    margin-left: 3em;
    margin-right: 3em;
    /* and maybe this, too... */
    max-width: 60em;
  }

And let the content flow out to the margins.

[I see you still have a lot of '<table width="800">' on your interior
pages, so I assume you'll be tackling those next.]

-- 
Thomas Dowling
tdowling at ohiolink.edu