Safari adding space next to text, Safari bug? - html

Question

So I am coding some semi-complex buttons where when you click on one, a loading symbol moves in on the left of some text.
The buttons look fine in all browsers (ie8-10, FF, Chrome on Mac & PC) except Safari on mac. It seems to add extra space to the right of the lettering for no reason.
Here's a screen shot of what it should look like:
Here's what the before looks like in Safari:
Here's the HTML:
<div class="move1">
<div class="final-button small">
<div class="final-spinner">
<img src="images/Loader_24g.gif" />
</div>
<div class="final-title">
send money
</div>
</div>
</div>
<div class="move2">
<div class="final-button large">
<div class="final-spinner">
<img src="images/Loader_32g.gif" />
</div>
<div class="final-title">
send money
</div>
</div>
</div>
and the CSS:
.final-button {
font-family: 'proxima-nova', Helvetica, Arial, Verdana, Sans-Serif;
color: #ffffff;
text-transform:uppercase;
background:#97c231;
float:right;
border-radius:2px;
cursor:pointer;
}
.final-button:hover {
background:#a6d536;
}
.final-button .final-spinner {
float:left;
overflow: hidden;
width: 0px;
}
.final-button .final-title {
float:left;
}
.final-button.small {
font-size: 18px;
padding:8px 28px;
}
.final-button.small .final-spinner {
}
.final-button.small .final-title {
padding: 3px 0 0 0;
}
.final-button.large {
font-size: 24px;
padding:12px 23px;
}
.final-button.large .final-spinner {
}
.final-button.large .final-title {
padding: 2px 0 0 0;
}
.move1, .move2 {
margin:50px 0 0 0;
clear:both;
overflow:hidden;
}
and a live example here:
http://412webdesigns.com/playground/tempGo/button.html
any ideas why safari is doing this? There's nothing on here that should push it over like that.

Answer 1

check this lines in your css in safari dev tools:
.final-button .final-title {
float: left; //remove it
}
I think that is float problem, so remove it or change with #inline-block or #inline.
Try change html:
<div class="final-spinner">
<img src="images/Loader_32g.gif" />
</div>
<div class="final-title">
send money
</div>
To
<img class="final-spinner" src="images/Loader_32g.gif" />
<span class="final-title">
send money
</span>
And don't use float every where :)
Hope it fix your problem