Search code examples
cssgoogle-chromesafaricenterprestashop

Css centering - It randomly jumps into place


I'm creating a new website for my webshop - And I have this css problem ...

The system is made on the prestashop platform, but this is basic CSS so that doesn't matter.

On the CMS pages, I'm having a problem centering the page, i've tryed using the -tag, margin: 0 auto, margin-Left/right auto, 100% width and so on.

The problem isn't that the text isn't centered, it's that the browser doesn't realises it untill you change something with the inspector or change the browser width. So if you update the site, the content jumps into place.

(if you don't see the problem, try pressing the same menu item again - sometimes it works sometimes it doesn't. The sites with most problems are: /betingelser-3, /udtalelser-6 and /om-os-4.)

The problem is only in Safari and Chrome (webkit) Everything is fine on IE, firefox, Opera.

http://forsejt.dk/mackabler.dk/content/betingelser-3

I think there is just too many div's and css-styles so the browser times out? If that can happen:) I've tryed on a Macbook pro 15", Macbook air 13" and Mac pro.

Any Css tricks for this?


Solution

  • So I'm not quite sure why this is, but it seems like the overflow:hidden in .row is the culprit. Try removing that or overriding it and it seems to work. My guess would be that it gets in the way of webkit calculating the width properly for some reason?

    There's also some other suggestions on a similar question here: CSS centering not working with margin auto and overflow hidden

    But it seems to me that the accepted solution there won't work for you, as it looks like all of your floats are properly cleared.