Why are my sites so narrow in internet explorer?

[Dal123]

I (with a massive help from others on here) built my two sites linked below, and the girlfriend just popped round with her pc laptop and I took a look at them on hers and was amazed how narrow my sites are on ie. There were colour differences also which I'm not too worried about, and slightly narrow margin on my sidebar, but they're so narrow and the page is wasted .
I'm pretty amazed at this, as I took into consideration the size of majority of computers (think 17" is most common) conveniently the size of my powerbook screen also . So did the trick with absolute page container and relative position divs (or something like that you know what I mean). So all set-up and on my mac it's perfect, got about half-inch on each side and it centres nicely. Only on ie it's appalingly narrow and looks so unprofessional.
I would've thought that pixels are pixels and should be the same no matter, especially as her screen is the same size as mine! Has anyone else come across this and is there a quick-fix to this problem?

 

[angelwatt]

Which IE. IE8 seems fine.

 

[designguy79]

I tested them in IE 6 and 7, and the width seems okay to me.

Can you do a screen capture?

What resolution is her screen?

My friend has a Dell that has a crazy resolution (he paid a lot extra I think), so everything appears smaller. Yes, pixels are still pixels, but instead of say, 72 "dots per inch" (pixels per inch is more accurate) his is like 140 or something. So everything appears half the size on a similar sized (but different resolution) screen.

 

[Dal123]

Thanks for input people . She's got internet explorer 8 and it's a dell and the other pc is
I recon you're spot on design guy, the two pc's I've tested them on are different models, and both dell pc's, about 3 years difference between the two models, so I wouldn't have thought that the old one would also have this problem.
What could be the solution to this problem I'm encountering? I've found some articles on using javascript to determine the resolution size and then using different stylesheets, which I'm pretty amazed that's going to be like designing a whole new site . Anyone else ever come across this before and have a quick fix?

 

[angelwatt]

Designing fluid or elastic layouts can be tricky depending on the page elements you have. A lot of designers just do a fixed width and stop caring. It's hard to have a layout that will look good on a 13" MBP and a 27" iMac. There's lots of articles on designing fluid and elastic designs, but they won't fit every situation. This is one of those places where the "art" of CSS comes into play. I prefer elastic layouts myself that adapt partially to different resolutions, but doesn't let the width do what it wants.

My layout definitions for this post:

• Static: Width of content is set to a fixed value e.g., 1000px, 52em, et.
• Fluid: Width is set using a relative value e.g., 100%, max-width: 90%, etc.
• Elastic: Mixes static and elastic e.g., width:42em;max-width:95%;min-width:30em;

Note: IE6 doesn't understand the min/max-width/height properties for CSS, which is what keeps them from being used more.

 

[Dal123]

Thanks angelwatt, I have a great book on elastic layouts, I might give try to incorporate that, just worried how much time it will take.
Hopefully it won't be that bad as really I only need to change a few things . With the resolution so high on her monitor I'd say it should be able to enlarge considerably without getting too distorted .
Thanks again .

 

[wheezy]

I reckon they're both about 200mm wide on my screen.

 

[Dal123]

I reckon they're both about 200mm wide on my screen.

oh my lord , thanks for telling me though, if you have time please do let us know what resolution screen you have. Sounds like you've got a nice new mac, I'll have to cater for that .