Cross-browser image resolution issue

Discussion in 'Web Design and Development' started by workerbee333, Apr 27, 2009.

  1. workerbee333 macrumors newbie

    Joined:
    Apr 27, 2009
    #1
    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.
     
  2. TuffLuffJimmy macrumors G3

    TuffLuffJimmy

    Joined:
    Apr 6, 2007
    Location:
    Portland, OR
    #2
    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.
     
  3. workerbee333 thread starter macrumors newbie

    Joined:
    Apr 27, 2009
  4. TuffLuffJimmy macrumors G3

    TuffLuffJimmy

    Joined:
    Apr 6, 2007
    Location:
    Portland, OR
    #4
    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.
     
  5. Me1000 macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #5
    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.
    :)
     
  6. workerbee333 thread starter macrumors newbie

    Joined:
    Apr 27, 2009
    #6
    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
     
  7. workerbee333 thread starter macrumors newbie

    Joined:
    Apr 27, 2009
    #7
    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?
     
  8. Ivan P macrumors 68030

    Ivan P

    Joined:
    Jan 17, 2008
    Location:
    Home
    #8
    It gives me a horizontal scrollbar in IE8 (don't flame me guys, work has horrible Windoze computers :p), yet havent experienced that in any other website I've visited on this computer.
     
  9. Me1000 macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #9
  10. workerbee333 thread starter macrumors newbie

    Joined:
    Apr 27, 2009
    #10
    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?
     
  11. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #11
    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:
    HTML:
    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.
     
  12. workerbee333 thread starter macrumors newbie

    Joined:
    Apr 27, 2009
    #12
    Fabulous, thank you! I'll try that out as soon as I can.
     
  13. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #13
    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.
     
  14. workerbee333 thread starter macrumors newbie

    Joined:
    Apr 27, 2009
    #14
    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!!
     
  15. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #15
    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.
     
  16. workerbee333 thread starter macrumors newbie

    Joined:
    Apr 27, 2009
    #16
    It's fine, I want fixed left and top. I'll just have to live with not being able to set viewers' resolutions. :)
     

Share This Page