Macadames' blog

Le silence est d'or, jusqu'à ce qu'il devienne plomb.

Some Safari css fixes

leave a comment »

You must know some things to adapt your css for Safari. Here’s some tips.

Background images

It’s a really strange bug.

You want a background image with no repeat or just an horizontal repeat.

As long as i can remember something, we were doing things like that :

#mystyle {
background: #mycolor url(myimage) myposition no-repeat;

If you want to be Safari compatible, just write :

#mystyle {
background-image: url(myimage);
background-position: myposition;
background-repeat: no-repeat; /* or repeat-x */

Otherwise background repeat and position do not work (you will get a beautiful but unwanted mosaic repeat with a 0 0 position).

Vertical align

In a div sometimes you need a centered vertical align, so you fix things like this for a 200px height cell with a table cell behavior :

#mydiv {
display: table-cell;
height: 200px;
vertical-align: middle;

Because you are really careful and meticulous or because you are in a hopeless case, you try to add :

overflow : hidden

Spoiled, I don’t know why but with Safari you must add :

max-height: 200px;

otherwise the height will be your css height + content height

Css hack for safari3 and webkit

Everybody know the « * html » hack for IE6, but if you want to put a webkit only declaration you must do :

html[xmlns*= » »] body:last-child myStyleDeclaration {etc ….}


Written by macadames

22, novembre 2008 à 9:57

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:


Vous commentez à l'aide de votre compte Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :