CSS not working in Safari - OK in Chrome, Firefox

Question

My website is http://proustscookies.blogspot.com/. I'm working on styling the buttons attached to the Search form using CSS.

Here is the CSS:

input.gsc-search-button {
margin-left: 10px;
height: 24px;
width: 60px;
border-style: none;
background-color: #666666;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
color: #FFFFFF;
}

The margin-left command is working great in Firefox and Chrome, but not at all in Safari.

All other CSS rules (above and throughout the site, data not shown) are working in all three browsers (and last time I checked also in IE).

I found the object name (input.gsc-search-button) using the Chrome Extension Stylebot. Unfortunately I can't find the underlying html anywhere (This is a blogger-sponsered widget. Could Google be hiding the code somewhere? I don't know.)

If anybody could help me figure out why the margin isn't showing in Safari, or how to find the html for the Search box, I would appreciate it very much.

Solution 1

It's overridden by google. If you do:

margin-left: 10px!important;

You can override that.

Or you could make your selector more specific (and hence give it precedence) by doing something like

td.gsc-search-button input.gsc-search-button {
   margin-left: 10px;
}

Hint: you can right click on an element (in firefox or chrome) and click "inspect element" to see the css associated with that element.

Solution 2

I had a similar issue where all styles were applied correctly except on mobile safari, very strange. It even worked on desktop safari!

In the end, I fixed it with more exact targeting. I had this before:

.phone{
  background-color:gray;
}

This change fixed it.

  div.phone {
    background-color:gray;
  }

By the way, I figured it out with using inspector on mobile safari. http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787