CSS help needed...

ZC 1.5.0

As far as I know, my pages are all using the same stylesheet... so I'm not sure what is causing this to happen...

Here is my shop: http://opalessenceshop.com

Almost everything fits very nicely into the window...the categories, the EZ Pages, the testimonials, the "Information" pages... it's fluid so it adjusts when you resize the window, etc... but when you click on a product, the product description page (for example, this one) gets all wonky on the right side. The right side column moves outside the bounds of the main table/div/area/whatever and causes side-scroll (at the window size I use, anyway) and the contents of the center area spill out over the border that defines the center column. I'm using Chrome, if that matters. Anyway, I can't figure out what is making it shove over like that.

I am NOT a CSS expert. I've sort of "learned as I've gone" over the years and don't always know why certain things work the way they do... that is, I don't always understand the theory behind the things I'm implementing. The logic, as it were. For that reason, I'm especially bad at troubleshooting broken CSS. I'm hoping someone a little more fluent in it might spot some obvious mistake that I've made so I can fix it...? crossing fingers and toes

Thanks in advance for any help.

I'm pretty sure it's your connect widget that's whacking it out. The formatting appears to be controlled in a file named like.php.

At the bottom of the product content, both your Google+1 widget and your fb:like widget are styled inline at 450px, and the Twitter follow widget is set to 173px wide.

Thanks--I'll look at it tomorrow when I have some time.

Yeah, that's correct what gjh42 said. Your social button make your layout messy.

And setting a site to 100% width looks awful on widescreen monitors. Rather use a fixed width of about 980 PX.

I'd prefer the fluid full width design. Just a matter of taste, I guess. I don't like big margins on the sides. Anyway, I gave width and max-width settings to the table cells the social buttons were in and that seemed to fix it. Thanks for the help! I doubt I'd have narrowed it down to those buttons on my own.

True, the result is better now than it was, but far from perfect.

Your home page fits in my usual browser window (about 1050 px wide) but has a slight horizontal scroll (which is true even if I maximise the browser window to over 1600 px, indicating a bug in the code.) On the other hand, a product page is about 100 px wider when viewed at my normal window width, so requires more horizontal scrolling. This isn't true in a full width window.

So it seems you have made your site in such a way that browser windows less than about 1200 px wide can't view it without horizontal scrolling. If you're trying to tell people with smaller browser windows to go away, you're succeeding admirably. :dontgetit

Rob

Making #mainWrapper 99% rather than 100% should get rid of the horizontal scroll.

I don't like 100% width sites much either, but it looks like you've used the extra space, in part, to make your fonts bigger, which is a plus in my book.

rstevenson:

True, the result is better now than it was, but far from perfect.

Your home page fits in my usual browser window (about 1050 px wide) but has a slight horizontal scroll (which is true even if I maximise the browser window to over 1600 px, indicating a bug in the code.) On the other hand, a product page is about 100 px wider when viewed at my normal window width, so requires more horizontal scrolling. This isn't true in a full width window.

So it seems you have made your site in such a way that browser windows less than about 1200 px wide can't view it without horizontal scrolling. If you're trying to tell people with smaller browser windows to go away, you're succeeding admirably. :dontgetit

Rob

What browser are you using? I can make the page pretty narrow in Chrome without getting side scroll since making the changes to the tables...

I think you are falling into the common trap of designing a website FOR YOURSELF, and basing the design on what you are seeing on YOUR MONITOR, on a browser YOU HAVE CHOSEN.

All cardinal errors in the world of web design.

We build quite a few sites (not just zencart) and twice a month we convene focus groups (generally people we don't know) to come in and "test drive" the sites we are working on. We tell them to be ruthless about criticising the sites. And we test on a wide variety of machines, screens, operating systems... etc

Since starting this procedure some 10 years ago, we have found design formulae that work consistently well. But we still get very critical feedback from the focus groups.

Usually, the final site ends up looking very different from what we envisaged...

Well this is why I'm asking what browser you're using and such, because when I look at it, I can't replicate the problem you're seeing.

The most important thing about eComm sites - way above "s e x y" looking design - is USER EFFICIENCY.

Webshoppers want SPEED, SIMPLICITY, EASE and EFFICIENCY. (These FOUR key factors were identified in a massive research undertaking conducted by the eConsultancy a couple of years ago.)

So... anything that makes sites SLOWER, MORE DIFFICULT, LESS STREAMLINED and LESS EFFICIENT, need to be addressed.

By making your site 100% width, you are "stretching" various components over a wider area - and one result of this is that users need "more mouse effort" to navigate the site.

Think of it this way...

If your competitor's site achieves a user goal in TWO CLICKS and your site achieves the same goal in THREE CLICKS, your site is 33% LESS EFFICIENT than your competitor's site.

This stuff is known to have a huge impact on sales. Less efficient sites will not get as many sales as more efficient sites...

So... while YOU make like 100% width, please know that it makes the site LESS EFFICIENT and MORE DIFFICULT to navigate.

But don't take my word for it... when you aren't getting sales, it's probably because your visitors (potential customers) feel the same way.

I'll consider setting a fixed width, but the problem I have with that is that it alienates anyone with a narrower browser window. Figuring out exactly WHAT fixed width to use is very difficult.

How does having a site that fills the screen cause the user to have to do three clicks instead of two?

Also, just as a data point, Amazon.com fills 100% width on the screen as well, and they seem to be doing ok.

WebKat:

I'll consider setting a fixed width, but the problem I have with that is that it alienates anyone with a narrower browser window.

We're not talking about browser windows here... we are talking about monitor screen resolutions and aspect.

WebKat:

Figuring out exactly WHAT fixed width to use is very difficult.

980 pixels is considered suitable for over 95% screen resolutions and screen widths

WebKat:

How does having a site that fills the screen cause the user to have to do three clicks instead of two?

That was just an example of efficiency. If I have to shift my mouse pointer FURTHER, it means more effort. This may seem "silly" but it's not my research that points out these faults. It's research from Forrester and eConsultancy... probably the two most reputable internet research firms in the world.

schoolboy:

We're not talking about browser windows here... we are talking about monitor screen resolutions and aspect..

...which affects browser window width. You refer to it one way, I refer to it another way, but we're talking about the same thing.

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. :D

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."

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.

schoolboy:

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. :P

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