mm524 mm524 - 1 year ago 46
CSS Question

CSS not working in Safari - OK in Chrome, Firefox

I'm a fairly new coder, so I hope this question makes sense.

My website is 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.


Answer Source

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.