Cross-browser image resolution issue

[workerbee333]

Sorry if this q has already been answered. I didn't know what keywords to search!

My website looks fine in all browsers but IE7, where it is HUGE. Resizing the screen by pressing "cmd/ctrl -" shrinks the divs and text but not the background image.

What's going on, and is there any way to fix it with code? I can't expect all users to reset their screen res. CNN seems to have the same resolution across browsers...

Please let me know if you need a screen shot or code. I'd be happy with a link to a thread that resolved this issue already.

 

[TuffLuffJimmy]

What did you use to write your site? Do you have a link to your site? Or perhaps if it's not up yet you could share some source code.

 

[workerbee333]

Thanks for the quick response. HTML & CSS @ http://biology4.wustl.edu/imaging-facility/

 

[TuffLuffJimmy]

well the first thing you should do is check your site on another computer running IE, in case it's something wrong with your browser. The next thing you should do is check the resolution of your images and if they're larger than they need to be. Finally check if your code contexts are written correctly, Safari, Opera and Firefox seem to be very tolerant of coding mistakes, but IE is not.

 

[Me1000]

You have 6 HTML errors and 1 CSS error (a typo) which you might look at fixing.

IE7 looks like it's displaying the page fine for me.

 

[workerbee333]

I've checked and it's the same problem. Images are 72 dpi and the code is both standards-compliant and cross-browser compliant for layout.

I can't tell if it's an IE default resolution setting issue that can be circumvented by e.g. a js workaround, or if it's something I can fix by re-coding everything in ems (though that wouldn't fix the bg img).

As I mentioned, major websites like CNN don't seem to have this drastic resizing issue in my browser, so I assume there must be something I can do!

*Edit: mostly standards compliant! thx

 

[workerbee333]

All valid now but didn't make a difference to my IE7 resolution.

If it doesn't look enormous in your IE7, but it does in the three I've tried, what could the problem be?

 

[Ivan P]

It gives me a horizontal scrollbar in IE8 (don't flame me guys, work has horrible Windoze computers ), yet havent experienced that in any other website I've visited on this computer.

 

[Me1000]

The website is a little too wide for my tastes, causing the scroll bars even on my MBP (but safari is never "maximized")

IE7: http://s3.amazonaws.com/resultcaptures/8654372b-83b2-4f68-a4f2-040f3019b1b2.window.png

unless Im not understanding the problem correctly.

 

[workerbee333]

Yes, that's what I'm talking about. It's wide on some resolutions and not on others.

Is that because I'm using a fixed-width layout (in px)? And if so, how do developers for big sites like CNN.com get around issues like that?

 

[Cabbit]

I think the problem is your container margin.
You seem to have a fixed margin on the left and perhaps also the right.
Change the margin on your wrapper to:

div#wrapper {
	position:absolute;
	top:70px;
	margin: 0 auto;
	width: 1150px;
	}

That should fix the main problems, also consider changing the sites width to 960px as that is more the default expected for the most common 1024x768 resolution used.

Also note you only need to use # you don't need div#. And consider a full em and % based layout. Follow my example link and you will see a fluid 2 column website that has the main content fluid and the right content fixed but this content scales well onto all devices and screen resolutions. The code is available by viewing the source.

 

[workerbee333]

Fabulous, thank you! I'll try that out as soon as I can.

 

[Cabbit]

Fabulous, thank you! I'll try that out as soon as I can.

It worked fine when i over-rid your CSS, i'll take a look and see if there is any other problems causing issue in your CSS but i am still quite a beginner.

 

[workerbee333]

I guess it was just a browser resolution issue. Maybe my ff operates at one default resolution, and my ie at another.

So I just shrunk all the divs to smaller absolute widths. Oh well. Thanks for the help, guys!!

 

[Cabbit]

I guess it was just a browser resolution issue. Maybe my ff operates at one default resolution, and my ie at another.

So I just shrunk all the divs to smaller absolute widths. Oh well. Thanks for the help, guys!!

if you change the margin to 0, auto then when you scale the browser the content will remain in the middle with a equal margin on each side rather than a fixed margin on the left and a variable margin on the right.

 

[workerbee333]

It's fine, I want fixed left and top. I'll just have to live with not being able to set viewers' resolutions.