Sizing Up the Browser (Part 1)
When you're creating a Web page, size matters. There's limited
space to work with, and page elements take up standard amounts of space. It's a land of
constraints, and you've got to know the rules before you get started.
Unfortunately, the browser makers have been naughty, so the rules aren't simple. Each
Web browser has its own playing field with its own quirks. If we don't get to know
every one of these playing fields, then our pages might very well look crappy in
some browser.
The purpose of this quick reference is to collect everything you need to know about
the spatial aspects of the major browsers.
Here's what we'll be looking at:
- Offset — By exactly how many pixels is content offset from the edges of the browser window?
- Canvas size — How wide can a page be and still work at 640-by-480-dpi and 800-by-600-dpi
resolutions? How much height is available before the user will have to scroll?
- Text size — How big are the standard HTML text sizes? What's the tracking and leading?
You'll need this information if you want to mock up your pages accurately in Photoshop.
- Form elements — How much room do pulldown menus or text input fields take up? What about other
form elements?
After looking at the browser stats at StatMarket, we decided to focus on
the following browsers:
- Netscape Navigator 3 and higher
- Internet Explorer 3 and higher
- Windows and Macintosh
- Let the data begin.
Offset
As we all know, when you slap something into a Web page, it doesn't appear right next to the edge of the
Web browser window. There's always a buffer between the window edge and the object. Unfortunately, this
buffer isn't always the same, as the table below shows.
Key:
IE = Microsoft Internet Explorer
NN = Netscape Navigator (Communicator)
Win = Windows (98, 95, NT)
Mac = Macintosh
| Browser |
Horizontal Offset |
Vertical Offset |
| IE 5.x (Win) |
10 |
15 |
| NN 4.x (Win) |
8 |
8 |
| NN 4.x (Mac) |
8 |
8 |
| IE 4.x (Win) |
10 |
15 |
| IE 4.x (Mac) |
8 |
8 |
| NN 3.x (Win) |
10 |
15 |
| NN 3.x (Mac) |
8 |
8 |
| IE 3.x (Win) |
10 |
16 |
| IE 3.x (Mac) |
8 |
8 |
Measurements in pixels
Of course, there is a way to override the default browser offset:
<BODY MARGINWIDTH=0 LEFTMARGIN=0 MARGINHEIGHT=0 TOPMARGIN=0>
Using these attributes on the <BODY> tag means that your horizontal and
vertical buffers will become zero. The bad news is that this does not work in Navigator 3.x,
so you'll still have the default offset in that browser. Offset is easy compared with the next topic
— canvas size.
|
advertisment
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
