Problem with “table-cell” in Safari

Once having met the problem, I found anything on the Web. Therefore this might be helpful for someone starting to create their own web-pages in a Web2.0 manner.

As I thought FireFox is the best browser (stop holywar :), firstly I created pages that are rendered perfectly in FireFox. What is great: all other browsers (of course except for buggy IE6) rendered pages in the same way. But then, as ‘div’ markup became popular, I tried to change the way of creating web-pages. Of course sometimes this suits me best. The idea is to use display: table-cell; declaration instead of old float: left.

But Safari is the one, that thinks different. While “all” browsers rendered page correctly, Safari put any div randomly on the top of the page. The solution is to add another div width display: table-row; declaration so that Safari start render everything perfectly.

 Permalink Posted in Blogging, Design, Daily Life