css - Google Chrome clears :after-element left, all other browsers not -
the following code render button (a link) background images in :before
, :after
pseudo-selectors flexible cross-browising result. problem is, chrome doesn't (safari, don't know).
html:
<div class="btn-container align-right more-info-btn"> <a class="btn" href="#">super button<i class="arrow-after-right"></i> </a> </div>
css:
.btn-container .btn { display: inline-block; text-decoration: none; height: 24px; background: transparent url('http://img842.imageshack.us/img842/5052/kdti.png'); padding: 0 6px; font-size: 11px; line-height: 21px; font-weight: bold; color: red; font-family: helvetica, arial, freesans, verdana, tahoma, 'lucida sans', 'lucida sans unicode', 'luxi sans', sans-serif; } .btn-container .btn:before { content:''; display: inline-block; background: transparent url('http://img600.imageshack.us/img600/3825/6ppo.png') no-repeat; width: 4px; height: 100%; margin-left: -10px; float: left; } .btn-container .btn:after { content:''; display: inline-block; background: transparent url('http://img834.imageshack.us/img834/4803/b5zs.png') no-repeat; width: 4px; height: 100%; margin-right: -10px; float: right; }
button in google chrome:
button in other browsers:
jsfiddle:
i have tried different float/clear combinations, far without success.
set explicit width .btn_container. that'll solve problem. here's fiddle http://jsfiddle.net/k7y4u/6/
i did: .btn-container .btn { width: 90px; }
Comments
Post a Comment