So I've got my site (http://www.coloradobeernews.com/drupal) looking like I want it to look. I've got the site centered, with a background image that makes shadows on the sides. However, on some versions of IE on Windows, the background image doesn't appear and the site is not centered.
Here's the relevant lines of CSS:

html, body { 
     color: #000; 
     margin: 0; 
     padding: 0; 
     text-align: center; 
     background: #C00; 
     font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
     font-size: 95%;
}
body {background: url(background.png) top center repeat-y;}

#container {position: relative; text-align: left; width: 800px; margin: 0px auto; padding: 0;}

On my template file:

<body >
<div id="container"> 
<div id="header">

It works fine in Safari and Firefox and on some PCs. It's not that big of a deal, I just like the shadow and centered look.

Comments

zwhalen’s picture

Which version(s) of IE are giving you problems? It looks okay to me in IE6 and IE7b. Personally, I've stopped worrying about any IE's earlier than 6.

justinian’s picture

Thanks, I checked one of the machines that wasn't displaying the shadows and it's running IE 6, but the resolution was really low. When I upped the resolution to 1024 the shadows appear.
On machines that have screen resolutions of 800x640, the shadows don't appear. I guess it's becasue I've got the page width set to 800px.
Do you think most people's resolution is higher than 800x640?

zwhalen’s picture

Probably, but you can't count on it. Again, this is my personal take, but I feel that if design elements (like shadows and cool backgrounds) are hidden in low-res monitors, that's not a big deal. The important thing in terms of usability is that the content fits without the user having to scroll left and right to read it all.

justinian’s picture

Thanks, that's good advice.
I'll leave it as is and reward the people with the higher res with a nicer site. It's perfectly viewable at lower resolution, so I'm not too worried about it.