Macadames' blog

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