CSS help needed...

[schoolboy]

Well, you are wrong... but frankly, I don't really care if your site is user-efficient or not.

In fact, keep it as it is, because we have 3 clients in your industry, and for as long as your site is less efficient than theirs, they have a competitive advantage over you.

[WebKat]

I don't understand why you're getting attitude with me. A small browser window on a larger monitor with higher resolution shows the same thing as a larger browser window on a monitor with lower resolution/on a smaller monitor/etc. It's how many pixels wide the browser window is that matters, and that is determined by the size of the window and by the resolution of the monitor. If I have a monitor running at 800x600 and have a fullscreen browser window, that's going to look exactly the same as having an 800 x 600 browser window on a much higher resolution monitor. Do you see my point? They're ultimately the same thing. I'm not "wrong."

[schoolboy]

By default, all browsers initially open in 100% of screen width. To resize the browser requires a manual change by the person viewing that browser. Unless there is a compelling reason to change the default opening width (such as a stretched out site) practically everyone keeps the default view (100% of screen width).

Again, it is a user-efficiency consideration. By making your site 980 pixels wide you remove the need to alter browser size in over 95% of views. Every EXTRA action needed by your users contributes to inefficiency.

Consider too that people now browse in TABS... flicking from one site to others in quick succession. IF they have to re-size their browser just because YOUR site is affecting the look of the other tabs, they will stop looking at your site, and look only at those that offer them less hassle.

As I said... this is detailed research done by Forrester and eConsultancy. You are perfectly free to ignore it, of course.

[rstevenson]

By default, all browsers initially open in 100% of screen width.

One small caveat here, if I may. That statement is true of one particular, quite popular but not ubiquitous, operating system. Those of us who use the other OS, the one gaining in popularity, have never experienced that default behaviour. In fact this other OS only recently adopted a similar sort of behaviour in its latest version, and only as an option set on an application by application basis.

The reason I noticed the horizontal scrolling is because I often work in two or three programs at once and I like to be able to click from one to the other while keeping them all visible. Hence my normal browser window width is about 1000 pixels even though my screen is set to 1680 px wide. I use the latest Firefox, by the way, as my main browser.

So to get to the OP's question about not seeing in his browser what I'm seeing, that's normal. That's exactly why you have to test in different browsers and different machines, and preferably in different OSes. It would be nice if all browsers rendered code exactly the same but they don't. I expect that Chrome is making some sort of assumption that FF is not making (or vice versa).

I see your home page no longer shows the little bit of scroll -- did you make stevesh's suggested change? -- but the product page still requires a scroll of about 1" to the right. This is true until I increase the browser window width to about 1160 px.

As for the more general issue of what should be the best site width, I agree with schoolboy that 980px is currently optimal. I usually set things at 960px just to be sure. Do you know about this handy gadget?

Maybe someday we'll be able to make sites that have a design minimum and maximum width, floating in between those two extremes, but most browsers can't handle that yet.

Rob

[gjh42]

If you look at my jewelry site, you can see an example of design to fit variable browser widths. When I first built it, 800x600 monitors were still common enough (and that's all I had), so the homepage elements stretch out from there to 95% or so of about 1200px (I forget the exact numbers at the moment), where the stretch stops and you get more background.

[WebKat]

So to get to the OP's question about not seeing in his browser what I'm seeing, that's normal.

Hey, hey, hey! Let's not be gender-reassigning me here! I'm 100% female ;)

I changed the width to 80% to try that out for a while. I have made several other changes to the layout on that page to make it able to shrink quite narrow on the browsers I've tried it on without side scroll, and it seems to work; that's why I want to know the details of who is still getting side-scroll.

As for maximized windows, they're a creation of the devil. I can't stand having a window maximized for any reason. I realize that's just me, but I'm throwing it out there to show that we do exist, we browser-resizing folk. I need to be able to see the contents of several pages at once on a regular basis so maximized windows, or even tabs, are not the way I roll.

[stevesh]

I like the 80% a lot better on my 1280 X 1024 screens. Now, if you'll remove the category counts from the categories sidebox so your category names don't wrap, I'll be happy .

I get your point about Amazon using 100% widths, but their pages (especially the product info pages) carry a ton of content and they need the extra screen area.

[WebKat]

Now, if you'll remove the category counts from the categories sidebox so your category names don't wrap, I'll be happy .

I don't like them either--I didn't realize you could turn them off! I'll go dig through the configuration and see if I can find out where...

[rstevenson]

I changed the width to 80% to try that out for a while. I have made several other changes to the layout on that page to make it able to shrink quite narrow on the browsers I've tried it on without side scroll, and it seems to work; that's why I want to know the details of who is still getting side-scroll.

The home page continues to work. The product page shows exactly the same width of mainwrapper as the home page (the borders match up) but the center content pushes out beyond the mainwrapper, shoving the right column out too.

Mac OS X v10.6.8
Firefox v11.0, Safari v5.1.4, Opera v11.6.1, Chrome v18.0.1025.142

All four browsers show the same issue on the product detail page. Product listing pages are fine.

Rob

[IronLady]

Hey,

How about with small browser like mobile phone or tablet?

I create a screenshot to compare your site with my template that i am still working on if viewed on small browser :



Actually, I've been playing around with "responsive design" and I want to released it on free add-on contribution. But, i just don't have much time to continue the development of the template. Maybe later

I create the template based on twitter bootstrap. There are a couple of option out there to create responsive site(Twitter Bootstrap, Skeleton, Foundation, etc). Maybe if you are interested to modify or just try, you can download my template here https://github.com/ironlady

Finally, I think that it just a matter of taste, some people like responsive and some of them like fixed.