CODEWITHSUNDEEP
cssfirefox
SERG
SERG

Reputation: 3971

Need a css hack for firefox markup

Here is a link to the BUG, only shown in firefox( chrome is ok). The problem is with the stars (active, inactive), and try to click on one-two radio.

I have this css, but it is not working right

/* STARS */
.star-icon {
    color: #ddd;
    font-size: 1.4em;
    position: relative;
}
.star-icon.full:before {

    color: #fdb229;
    content: '\2605'; /* Full star in UTF-8 */
    position: absolute;
    left: 0;
}
.star-icon.half:before {

    color: #fdb229;
    content: '\2605'; /* Full star in UTF-8 */
    position: absolute;
    left: 0;
    width: 50%;
    overflow: hidden;
}
@-moz-document url-prefix() { /* Firefox Hack :( */
    .star-icon {
        font-size: 20px;
        line-height: 10px;
    }
}
/* STARS */

Upvotes: 0

Views: 380

Answers (3)

Ian Taylor
Ian Taylor

Reputation: 357

As previously mentioned by Patryk you shouldn't be using line-height to position elements. If I were you, I'd have floated block elements with fixed height and width and then positioned the pseudo-element centrally using absolute positioning.

Another solution in this case is to scrap the whole @-moz-document override and just add:

width: 1.4em;

I've checked it in both Chrome and Firefox. I suspect the issue is because span's are naturally inline element and don't have set width's.

Upvotes: 1

Patryk Dobrzyński
Patryk Dobrzyński

Reputation: 327

Why are you doing this in this way? Font line-height's could be interpreted different in different browsers. Maybe this could help: http://yuilibrary.com/yui/docs/cssreset/ but I recommend you to do it with images (if you want to use half-stars and be sure that everything is ok in any browser).

Upvotes: 1

Anant Dabhi
Anant Dabhi

Reputation: 11104

Change line-height: 10px; to line-height: 17px;

@-moz-document url-prefix("") {
.star-icon {
    font-size: 20px;
    line-height: 17px;
}
}

Upvotes: 1

Related Questions