CSS help needed...

[WebKat]

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.

[RescoCCC]

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.

[gjh42]

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.

[WebKat]

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

[IronLady]

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

[schoolboy]

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

[WebKat]

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.

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

Rob

[stevesh]

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.

[WebKat]

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.

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