HELP! Weird CSS Issue with Safari and Chrome Browsers

I just noticed that the main content areas of my site are pushed off to the right in Opera and Chrome web browsers by some 150px or so. This only happens in the aforementioned borwsers, IE6, 7 and 8 plus Firefox and Safari are all displaying perfectly. Anyone have any idea what's causing this:

Sorry, got the above muddled a bit. **Safari **and Chrome are not displaying right, whereas all other browsers are fine including Opera.

Looks fine to me in Google Chrome 4.0.220.1 under Windows. Maybe a bug in earlier versions of Chrome? I haven't got Safari to hand to test in that.

Regards,
Christian.

That's odd. I just did a Google Chrome, "About" and it says I have version 3.0.195.24 and that it's up to date?

Where do I get version 4.0.220.1

You're right. I installed the Chrome 4.0.220.1 Beta and it seems to cure the Chrome issue.

I just installing the latest Safari (4.0.3) but unfortunately Safair is still screwed up.

Any Safari experts care to look at my CSS and see what on earth is causing the strange 150px on all my site pages?

Fixed! Turns out I needed a float:left; in my #contentMainWrapper

limelites:

Fixed! Turns out I needed a float:left; in my #contentMainWrapper

That also fixed it in earlier chrome version

Thanks Tony, one less I need to check now then.

Tony, just noticed something weird. A strange one. The float:left; in my contentMainWrapper seems to puch some of the contents in my footer up to the top of the page in Firefox and IE.

Perhaps you could shed some of your expert CSS on this one? It has me baffled.

Can't see this in firefox but sounds like you need a clear:both applied to the footer.

You couldn't see it because I'd removed the float:left;

I reinstated it with the float:left and then dropped a <br class="clearBoth" /> right at the top of my tpl_footer.php and it worked! Thanks for the tip!!

Or you can apply clear:both as a css rule to the first div that is appropriate - maybe #footerhsy in your case but I still can't see the problem in firefox.

Seems to be working now with the <br class="clearBoth" /> at the top of the tpl_footer.php file.

Thanks again :hug:

hmmm, there I go speaking too soon again.

It's solved on most pages, but on the pages where I have the footer disabled, it's causing the page border to disappear and I can see that something isn't wuite right with the CSS.

For example, the shopping_cart page or the login page.

I think there are deeper issues here I am afraid. If I validate that page I get 96 errors.

I've always had validation problems. Most of them are &amp errors.. Nothing to worry about really. Goto eBay.com for example and validate and I'm sure you'll get over 500 on any one page.

So, not sure if I should remove the float:left; and thereby reinstate my page borders and slight alignment issues in FF, IE, Opera and Chrome, but cause the weird gap pictured above in Opera? Or vice versa and leave as is?

Can't seem to find the actual cause so for now need to go with the best of the two.... What you think?

Well what is happening is that the page borders are closing up to almost nothing because everything on the page is actually floated and therefore outside the flow.

You could solve it by putting the clear:both break under the center section rather than above the footer.

niccol:

Well what is happening is that the page borders are closing up to almost nothing because everything on the page is actually floated and therefore outside the flow.

You could solve it by putting the clear:both break under the center section rather than above the footer.

Sounds like a plan.... Not sure what class in the CSS i'd have to add a clear:both; to, in order to put it under the centre section. Would it be the contentsMainWrapper?

No you'd put a <br class="clearBoth" /> in to tpl_main_page.php at the appropriate point.

You got that dead right. I popped a <br class="clearBoth" /> in tpl_main_page.php just above where it calls the footer. Eureka!

Thank you so much, you've been a great help.