Heigh and width of a browser's browser

[Tatu]

How much browse would a browse browse browse if a browse browse could browse browse? :þ

Talk about the weird mood I am in today. I think I am going to go make some great Chimerican stir fry...

Anyways, I have a couple general questions/inquiries:
<font color=#FF0000>IF I GET CONFUSING AT ANY POINT, TELL ME!</font>

1. I need to know what is the average web-page viewing height (is it 400 pixels?) and width (I think 600 pixels) of a person with the average monitor size (is it 17 inches?) with the average resolution setting (I think 800*600 pixels).

2. I have noticed that when I have a 600 width table that is aligned to the very closest right edge of the browser window (using DIV ALIGN's as well as some snippets of text into the BODY tag), about 5 or ten pixels of the image are &quot;cut off&quot; or covered by the scrolling bar. Is this just my browsers or a universal bug/screw up? Does this mean whenever we have a 600 pixel wide image, part of it is covered up by the scrolling bar? Should I be designing image s to be 590 wide or something?
To demostrate if I am right, check out http://ohpoop.tripod.com/index.html . If this does NOT happen with your browser, you should see a 20-pixel red line to the right (next to your scroll bar)

3. With Netscape, I get a 10 pixel buffer when the scrolling bar is not needed (it dissapears). NOT WHAT YOU ARE THINKING! Compare my examples:
http://ohpoop.tripod.com/index.html[nbsp][nbsp] (W/O BUMPER)
http://ohpoop.tripod.com/index2.html[nbsp][nbsp](W/[nbsp][nbsp]BUMPER)

4. I have yet to remember again. All this talk of old ladies and Chimerican food... ;)

Thanks everyone, let's get these general know-how tips settled for all of us!
-Tatu

------------
Whenever I see an old lady slip and fall on wet sidewalk, my first instinct is to laugh. But then I think, what if I was an ant and she fell on me. Then it wouldn't seem quite so funny.

[Tatu]

To demonstrate #2 you need to resize your window to 600 pixels wide.

@lso: The &quot;W/O BUMPER&quot; labels need to be switched around.

[Tatu]

Oh yeah, for #1 please check it out and see if you smaller monitor / larger resolution people could see if you can visit http://ohpoop.tripod.com/index2.html and tell me if you can see the green/red/purple image in its entirety without having to scroll. Thanks bunches...

NASTY COLORS SELECTED FOR TEST PURPOSES ONLY, THEY DO NOT REFLECT ON MY TASTE OR PERSONAL REFLECTION! :)

Thanks everyone!!! That is enough browsers for me for today, good night!
-Tatu

[Justin]

I believe the average resolution is 800 x 600, but I suspect that there are a lot of users who do not even know that you can change the resolution... I've seen people with 21&quot; monitors using 640 x 480, which is Windows default :(

WebTV users get an effective resolution of approximately 640 x 480, but fonts are always sized up. I *always* do one of two things:

1) Set the margins to zero (works in Netscape and IE, using 4 different tags) and make the table 600 pixels wide, or

2) Keep the margins there (10 pixels by default) and use 580 for the table width.

In either case I center the table, though sometimes I flush left if I use left hand navigation in combination with a background image to achieve a certain effect...

This usually looks good on WebTV (which has no ability to scroll horizontally), and any standard PC/Mac resolution. Centering the table also gives the impression of less wasted space around the table (rather than having 400 blank pixels of space on one side you have 200 on each side).

I've never messed with flushing a table right - I generally go with centered or left flush, and now I have one more reason to keep that theory ;)

Physical monitor size is usually irrelevant, though most commonly a larger monitor is run at a higher resolution. I run 1024 x 768 on both 17&quot; monitors, and 800 x 600 on the 14&quot; on the other PC. For a while I got resolution crazy and was pushing all monitors to the max, running 1600 x 1200 on the 17's and 1024 x 768 on the 14, but my eyes did not like that a whole lot (thought the 100 Hz vertical refresh helps ;) )

Anyway, I try to code for *most* browsers, but not all (as noted in other threads). I use CSS, JavaScript, and so on, but I also try to go with 600 pixels wide in order to work with most all browsers/monitors/resolutions. I tried to keep with the 216 &quot;web safe colors&quot; but that gets boring - I don't know if there are any users still running a 256 color video card anyway... if so, they have my sympathies...

BTW - I think Tatu needs a friend.... ;)

------------------
Justin Nelson
FutureQuest Support

[Dan Kaplan]

Good points, Justin.[nbsp][nbsp]One small clarification:

Set the margins to zero (works in Netscape and IE, using 4 different tags) Works in Netscape 4+ and IE 4+ (I presume; I don't believe there's any way of installing multiple IE's on one machine, plus where do you find old versions?), but does not work in Netscape 3 or Opera.[nbsp][nbsp]That's presenting a few problems for a design I'm currently working on...[nbsp][nbsp]Fortunately, I'd peg the number of users with IE or Netscape 4+ at 80-85%, maybe as high as 90%.

Monitor resolutions confuse the heck out of me.[nbsp][nbsp]Never seems to support the recommended setting...

From what I've read, web-safe pallettes are falling into the same category as 14/15&quot; monitors -- design so it will look ok on them, but don't fret about it too much.[nbsp][nbsp]I generally accomplish this by using percent sizing and grouping items strategically.[nbsp][nbsp]:)[nbsp][nbsp]Of course, I've never checked on a 21&quot; monitor to see what that does to it...

I don't know if there are any users still running a 256 color video card anyway... if so, they have my sympathies... We have that on one of our photofinish computers at the track, and it sucks for trying to analyze a picture. :([nbsp][nbsp]Fortunately, it's just our backup installation...

By the way, Justin, I'm impressed that you manage to get CSS to work as consistently across IE and Netscape as you do.[nbsp][nbsp]I haven't seen too many people accomplish that.

I looked at my site in WebTV once and it was somewhat of a shocker.[nbsp][nbsp]Mostly just the font sizing, as you said.[nbsp][nbsp]Made the overall page layout look less than desireable, but still functional.[nbsp][nbsp]The day I see more than 1% of my traffic from WebTV I might start to worry about it a bit more.[nbsp][nbsp]I even get the occasional hit with Netscape 1.0.[nbsp][nbsp]I don't want to imagine what that looks like.

Wow, and to think I have work to do...

Dan

[Tatu]

Hey!!!!! I have friends! Maybe they're Monica, Rachel, Ross, Phoebe, Joey, and Chandler, but they are Friends! :þ

So what percentage of people have a monitor that can not see more than 600 pixels w/o scrolling?

Tee hee! I switched my resolution from 1024*768 to 640*480 (on my 19&quot; monitor)for about 15 seconds. Talk about a hearty chuckle...

-Tatu

[Tatu]

*sitting alone in a dark, echoeing e-room*
Hello? Helloooo? Could some one at least point me to a page that talks abot this? It's been over a day now and I haven't really found talk about this anywhere (not even HTML Goodies)!

-Tatu

[Dan Kaplan]

1) I know there's not much consensus on this, but it looks like 17&quot; is becoming the standard.[nbsp][nbsp]600 pixels would be for 15&quot; monitors.[nbsp][nbsp]I could be wrong, but isn't it actually 620 that you have to work with (640 - 20 for the scroll bar)?

2 &amp; 3) I tend not to use DIV tags, but I have noticed that Netscape reserves the right scroll bar space whether or not it's needed.[nbsp][nbsp]It looks funny if it's not needed, so you can add
's at the bottom of the page to at least give the impresssion that there's a reason for it...

I don't recall seeing much about this at HTMLGoodies, either.

Dan