I’m working now at a UI of a Java platform for selling flowers. One thing that I’m doing is implementing the design into the template system. There are some important things that I should take care like: everything should easy be translate in N’ languages.

One of the elements that need to be translated are the buttons. They are very fancy, with icon and glow effect so I’m implenting them using the full-button-resize technique that I described in a previous post. Everything is going ok but I have some problems with Safari, the height of the button should be with 1px less that the Firefox css code, so I search for a css hack.  Nobody likes css hack but most of us have use of them once in a while.

Here is the way that I solved my problem:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Chrome rules here */
}

1. Alex on March 1st, 2010 at 12:53 pm

   try this:

   #style {
   -webkit-width:900px;
   }

   worked for me