CODEWITHSUNDEEP
htmlcsssafari
ntgCleaner
ntgCleaner

Reputation: 5985

Safari adding space next to text, Safari bug?

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:

enter image description here

Here's what the before looks like in Safari:

enter image description here

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.

Upvotes: 0

Views: 658

Answers (1)

Egor Malkevich
Egor Malkevich

Reputation: 1536

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

Upvotes: 1

Related Questions