Screen resolutions

[Xander]

Not me! 1280 x 800 or something on my laptop...

For your audience I reckon you can go larger and forget 800x600. We're currently redesigning our site (at work) and making it a bit larger.

I think mainly people working in banks and schools have tiny screens

[Rantz]

To emulate max-width (or max-height, min-width or min-height with some modification) for IE, you can use:

width:expression( document.body.clientWidth > 500 ? 500 : "auto" );

Where both 500's are the max-width you want to use. "expression()" is IE-specific and will be ignored by other browsers. This means it's browser proprietary code, which is generally frowned upon, but readability goes before code perfection in my opinion.

[Mirage]

I'm browsing this page in 240x320.

[Nominus Experse]

1280 x 800 on my laptops, and 1280 x 1024 with my desktop.

[Jojee]

@Rantzien: Thanks, that works but... when I add that in, it overrides the max-width I have for Firefox. >.< How do I make it work for both browsers?

[Kes]

I've always heard that 800x600 is more of a courtesy for people who don't browse in maximised windows.

I use a 1440 x 900 resolution but I am currently browsing in a 1300x720 window (just the website not the nav bar or anything). However I change my browser size (width especially) quite frequently depending on what other programs I have up and which sites I'm viewing.

My biggest issue when I was making a website was Mac vs. PC. I had the whole thing absolutely fantastic looking on both Safari and Firefox on my Mac, but when I switched over to my PC, IE and Firefox had their own issues. I was running up and down stairs to switch between computers for a long time. Who says there's no such thing as geeks exercising?

Good luck.

[Jojee]

Oooh never mind Rantz, that was a coding error on my part. xD

Now I just need to fix one more thing in IE... so let's say I have a table and I set a height and width for the <</>TD>. Then, with no cellpadding or cellspacing and div-right and top and all that good stuff at 0... I put an image that's the exact same size as the table in the <</>TD>. How do I get it so that IE doesn't add extraneous borders?

And ah Kes, websites look different on Macs and PCs? o_O

[Kes]

Only in the sense that the browsers are different. Like I mentioned in the browser thread, I'm pretty sure that even if you use Firefox on all your OSs it will have at least subtle differences, but it's been a while.


Edit: I tried to clear this up a bit by posting some screen shots in the Browser thread because I'm silly like that. I totally did not intend to split up my ideas into two threads. >.<

[Rantz]

Now I just need to fix one more thing in IE... so let's say I have a table and I set a height and width for the <</>TD>. Then, with no cellpadding or cellspacing and div-right and top and all that good stuff at 0... I put an image that's the exact same size as the table in the <</>TD>. How do I get it so that IE doesn't add extraneous borders?

Put
border-style:none;
for the table or the image, depending on which has the border.

[Baloki]

800x400 and 1280x1024, also you suck JoJo!

FInally don't forget to set up a second stylesheet which you can use for lower res', bug me on MSN sometime and I'll show you what I mean

[Loony BoB]

Home: 1680x1050
Work: 1600x1200

[Blue Harvest]

1024 x 768. Anything else looks weird on my compy.

[blackmage_nuke]

My screen made a resoultion to quit smoking this year but it didnt turn out too well

Anyway i use 1024 * 768 but dont feel you have to design a website for this resolution just because everyone uses it. It depends on your website. If you dont need that many pixels then just go with 800 * 600. Pick the one that leaves you with less clutter but not too much blank space.

[o_O]

Here's a useful way to make browser-specific code: *wrecks tables* (*fixes tables*)
<div class="smallfont" style="margin-bottom:2px">HTML Code:</div><div style="color: black; background-color: white; margin:0px; padding:5px; border:1px inset; width:900px; height:400px; overflow:auto"><code style="white-space: pre; line-height: 7px; font-size: 11px;">&lt;html&gt;
&lt;head&gt;
&lt;title&gt;lol&lt;/title&gt;
&lt;style type="text/css"&gt;
#tablecat {
width: 1000px;
background: black;
border: medium solid yellow;
color: yellow;
text-align: right;
vertical-align: auto;
font-family: arial;
font-size: 50px;
}
#tablecat td { border: thin solid white; background-image: url('http://www.processandfaith.org/images/background-ocean.jpg'); }
&lt;/style&gt;

&lt;!--[if IE]&gt;
&lt;style type="text/css"&gt;
#tablecat {
width: 250px;
height: 200px;
background: rgb(100, 100, 180);
border: thin dashed rgb(150, 50, 50);
color: red;
text-align: center;
vertical-align: bottom;
font-family: copperplate gothic bold;
font-size: 15px;

}
#tablecat td { border: thin solid white; background-image: url('http://www.graphicsarcade.com/backgrounds/dark/dark_background_11.gif'); }
&lt;/style&gt;
&lt;![endif]--&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;table id="tablecat"&gt;
&lt;tr&gt;
&lt;td&gt;
You are &lt;comment&gt;not&lt;/comment&gt; using IE.
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td colspan="100%"&gt;
This table will look completely different if you view it in &lt;!--[if IE]&gt;Mozilla&lt;![endif]--&gt;&lt;comment&gt;IE&lt;/comment&gt;.
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></div></div>

[Loony BoB]

<html><body><whatever><b>You can always just do this if you don't want to mess up tables.

It seems to work, anyway.</b></whatever></body></html>