Hi everyone,

I'm having problems with different screen resolutions.

I have:
- an <h1>
- a top navigation menu with id #topNav
- a menu on the left (#leftNav)
- the content #content

My h1 has a background image but the top nav and content have a CSS-defined background color. Therefore when I change the resolution to 1152*864, the #topNav and #content expand to the right while the background image of the h1 (1000px long) doesn't. In the end it's quite ugly. How can I solve this problem?

I thought I might give a width of 1000px to the topnav and the content, but when I do that, if I switch to 800*600, it doesn't resize... If I remember correctly few people still use 800*600 so it might not be problematic, but I think it would be better if it worked.

What do you think I should do?
Should I increase the width of my h1 background image ?

quite troublesome indeed ^^

Thank you
Adrien
Back to top

You have a few realistic options:

1. Tile the image on the x axis with CSS. This will only work if the image looks ok tiled
   
2. Redo the image so you can fade it out to the left or right and let it merge with a background color. That looks ok, but requires the fade, which often won't fit in the with the site design.
   
3. Place the h tag image in a bordered area, then have another bordered area next to it, creating a sort of boxed design look. In other words, set a width and a border on the h tag.
   

Personally, I think you picked a bad width, I tend to go with a fixed 760 px, with fake extensions done with css. 1000 px requires a horizontal scroll bar on 800 px displays, which really is unpleasant for end users. Something like 40% of users still use 800x displays, maybe a bit less, but not a lot less.

More rarely I'll go with a liquid layout, but they are a lot harder to do in a commercial setting, which is why almost no commercial sites use liquid layouts.

I've done some commercial sites that you would never realize are actually 760 px wide because I use positioned background divs to extend the top and bottom navigation / header bars, which makes the site look like it fills up any page width, but never scrolls horizontally for almost all users out there.
Back to top

thanks. i'll try a few of these.

do you think I can detect the resolution (with JavaScript for ex) and change the HTML accordingly?

by the way how many users have 1157*864?
Back to top

Almost none I'd guess. Is that a mac resolution or something?

Standard resolutions in real world use currently are:

800x600 - maybe around 40% or so
1024x768
1280x1024

The last two are split, with more 1024x768 than 1280, though many new lcd 17 and 19 lcd monitors default to this size, but many users don't like the relatively small fonts etc and change it to 1024 wide.

However, that's not the size of the browser window, it's the display size.

The greater the resolution, the less likely that the user has their browser open full screen.

That's why designing a site for anything larger than 1000 px width as absolute maximum is a very bad idea. The only site I know of that is large and commercial that does even 1000 px width is espn.com

And note, the page width has to be about 20-25 px less than the maximum resolution because the browser scroll bar.

No, I don't think js for sizing is a very good option unless it's a geek type site. Just pick a size that works for 90% of your visitors minimum, ideally more, and stick with it.

Macs currently represent about 3% total of the US web market, and 1.8% of the global market, and since macs have so many screen resolutions and configurations within that 3% USA, it's pointless even considering them at all unless you are making a mac only site.

Also keep in mind that even at 1024 full screen, many users utilize the lefthand bar, for favorites/history etc, that is usually around 100px wide, give or take.

This is why I design all my sites to work at 760 px, especially all my commercial sites.

Useability studies show that text should be at most about 10-12 words per line, that usually translates to around 5-600 pixels, so with say a 100 px left column and maybe some floated 80-100 px right columns/boxes, you're just about at the realworld useability with 760, maybe a little tight for 3 columns, perfect for 2.
Back to top

1157x864 is a laptop one I think.... my laptop has a native res like that, but an upgrade to the driver lets me run 1024x768 without wonky bars, or 1280x800 - which is nice but no use for site design.
Back to top

thanks a lot

I have another IE problem (the last one I hope). When I designed my website, I forgot to add the xhtml doctype. Now that I've added it, my left menu expands to the right on IE (but it didn't when there was no doctype, which is weird).

Here's my code
#mainNav {float: left; width: 200px; background: #ddd;}
#mainNav div {margin: 0; padding: 0; font-family: "Trebuchet MS", Arial, sans-serif; border: 1px dashed black; border-top: 0; border-left: 0;}
#mainNav a {color: black; text-decoration: none; display: block; padding: 3px 1px 3px 15px;}
#mainNav a:hover {color: rgb(80,0,0); background: #eee;}
#mainNav h3 {background: url(frise.jpg) repeat-x; padding: 3px; color: white; margin: 0; font-variant: small-caps; text-align: center;}
* html body #mainNav a {width: 100%;}

It fixed it by changing the width to 210px on IE, but the menu is a bit bigger. How can I keep the same width?

<!--[if lte IE 6]>
<style type="text/css" media="screen">
#mainNav div {border-style: solid;}
#mainNav h3 {width: 210px;};
</style>
<![endif]-->
Back to top

You've triggered what's called quirksmode/standards mode rendering. quirksmode is triggered by absence, or incomplete, doctypes. standards mode is triggered by correctly arranged doctypes.

When you don't use a doctype, MSIE will display the page in quirksmode, which is non standards compliant. In this case, it's the box model probably.

Standards box width = explicit width + borders + padding
MSIE quirks width =explicit width

So you must have 10 px somewhere or other that's triggering it, in the body/html for example or something.

Don't design in MSIE, it's a bad idea, design in Firefox, with doctypes, then debug for MSIE. MSIE is currently 6 years old almost, for 6. Make your site work in real browsers like Firefox, Opera, Konqueror/Safari, then go back and fix the display / layout issues for MSIE 5x and 6. MSIE 5x by the way does not support the w3c box model at all, just the MS version, where width = explicitly declared width and height = explicitly declared height.

w3c box model, standards mode, is always width/height + borders + padding.

There are other little differences between quirks mode and standards mode, each browser has little ones, so do yourself a favor, when you design your page, make the first thing you put on it the doctype, not the last thing. And make the last browser you test each stage with msie, not the first.
Back to top