Friday, October 23, 2015

Alignment problem of Firefox that's non-existent on Chrome

Given this html:

<span class="form-search"></span>
<input class="search-query form-control" style="width: 200px" placeholder="Live search"/>

And CSS:

span.form-search {
    position: relative;       
span.form-search:before {
    display: block;
    width: 14px;
    height: 14px;
    content: "\e003";
    font-family: 'Glyphicons Halflings';
    background-position: -48px 0;
    position: absolute;
    opacity: .5;
    z-index: 1000;
} {

Live code:

The above display perfectly ok with Chrome, but not on Firefox.



The work-around to make it work on Firefox is simple, just add a float: left to the span.form-search

span.form-search {
    position: relative;   
    float: left;    

Live code:

Yes it's easy to land on comet than to properly align stuff on web using CSS.

No comments:

Post a Comment