Input button CSS > Niet opgelost

Beste,

Ik heb een probleem. Ik he b de volgende CSS. Maar het icon wil niet op de juiste plaats. Hij verspringt een regel. Kan iemand helpen?

Zo ziet hij eruit:
Dit is mijn script:

<button type="button" class="ui-yt-button white icon-left "><span><span class="ui-icon ui-icon-circle-triangle-w"></span>Back</span></button>

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_454545_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background: url(images/icon_sprite.png) -16px 0 no-repeat !important; }
.ui-state-highlight .ui-icon, .ui-state-error .ui-icon { margin-top: -1px; }

.ui-yt-button {
  font:normal 13px arial,helvetica,sans-serif;
  font-weight: bold;
  border-radius:14px;
  -moz-border-radius:14px;
  -webkit-border-radius:14px;
  height:2.1131em;
  padding:0 1.4em;
  cursor:pointer;
  white-space:nowrap;
  overflow:visible; /* fixes width in IE7 */
  outline:0 none /* removes focus outline in IE */
}

button::-moz-focus-inner {border:none} /* removes focus outline in FF */

.icon-left { cursor:pointer; white-space:nowrap; }
.icon-right { cursor:pointer; white-space:nowrap; }

.white {
  color:#2f3e46;
  text-shadow: 0 -1px 0 #f3f3f4; 
  border:1px solid #b2b2b2;
  background-color:#f6f6f6;
  background-image:linear-gradient(top, #fff, #e2e2e2);
  background-image:-moz-linear-gradient(top, #fff, #e2e2e2);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e2e2e2));
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff, endColorStr=#e2e2e2);
}

.white:hover, .white:focus {
  border-color:#8b8b8b;
  box-shadow:0 0 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0 0 3px rgba(0,0,0,0.4);
  -webkit-box-shadow:0 0 3px rgba(0,0,0,0.4)
}

.white:active {
  background-color:#ddd;
  background-image:linear-gradient(top, #ccc, #fff);
  background-image:-moz-linear-gradient(top, #ccc, #fff);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#fff));
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#cccccc, endColorStr=#ffffff);
}

Probeer deze:

Spoiler tonen

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_454545_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background: url(images/icon_sprite.png) -16px 0 no-repeat !important; }
.ui-state-highlight .ui-icon, .ui-state-error .ui-icon { margin-top: -1px; }

.ui-yt-button {
  font:normal 13px arial,helvetica,sans-serif;
  font-weight: bold;
  border-radius:13px;
  -moz-border-radius:13px;
  -webkit-border-radius:13px;
  height:2.1131em;
  padding:0 1.4em;
  cursor:pointer;
  white-space:nowrap;
  overflow:visible; /* fixes width in IE7 */
  outline:0 none /* removes focus outline in IE */
}

button::-moz-focus-inner {border:none} /* removes focus outline in FF */

.icon-left { cursor:pointer; white-space:nowrap; }
.icon-right { cursor:pointer; white-space:nowrap; }

.white {
  color:#2f3e46;
  text-shadow: 0 -1px 0 #f3f3f4;
  border:1px solid #b2b2b2;
  background-color:#f6f6f6;
  background-image:linear-gradient(top, #fff, #e2e2e2);
  background-image:-moz-linear-gradient(top, #fff, #e2e2e2);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e2e2e2));
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff, endColorStr=#e2e2e2);
}

.white:hover, .white:focus {
  border-color:#8b8b8b;
  box-shadow:0 0 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0 0 3px rgba(0,0,0,0.4);
  -webkit-box-shadow:0 0 3px rgba(0,0,0,0.4)
}

.white:active {
  background-color:#ddd;
  background-image:linear-gradient(top, #ccc, #fff);
  background-image:-moz-linear-gradient(top, #ccc, #fff);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#fff));
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#cccccc, endColorStr=#ffffff);
}

Wat is het verschil? Er is nog steeds niets gebeurd?

Pxjes, wat veranderd.. Dat moet helpen

Nee, sorry. Heeft iemand misschien nog wat?

Ik weet niet zeker maar misschien pas de tekst niet op de button dus de button moet groter of de tekst moet kleiner

Yeah idd, volgensmij moet de button width wat langer..

Nee, werkt ook niet, nou als het niet lukt laat dan maar zitten.

misschien zou je het kunnen proberen met een minder ingewikkelde css?
wie heeft dit verzonnen?

Ik?

Maak hem goed in paint/photoshop/gimp

en maak er gewoon een link van?

Allard schreef:

Ik?

oke Je houd wel van lekker ingewikkeld dus Maar heb je het al geprobeerd om allebei je een float:left; mee te geven?