CODEWITHSUNDEEP
htmlcsscss-positionpseudo-element
Woodrow Barlow
Woodrow Barlow

Reputation: 9057

Absolute Positioning Varies Between Browsers when Using Pseudo-Elements

I am modifying a download link to display two icons above it (using pseudo-elements and an icon font). These icons need to be layered.

To do that, I've given the link a position: relative and the second icon (which I'm positioning over top of the first) gets a position: absolute. Then I just adjusted the top and left values until it sat where I wanted.

jsFiddle

@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

body {
    /* just to make sure everything fits on screen */
    padding: 100px;
    text-align: center;
}

.download {
    position: relative;
    color: #000;
    text-decoration: none;
}

.download::before {
    display: block;
    content:'\f1c1';
    font-family:'FontAwesome';
    font-size: 42pt;
    margin-bottom: 10px;
}
.download::after {
    position: absolute;
    display: block;
    content:'\f019';
    font-family:'FontAwesome';
    font-size: 28pt;
    top: -40px;
    left: 50%;
    margin-left: 5px;
}
<a href="#" class="download">Download PDF</a>

In Chrome, it works perfectly. The "download" icon sits right on top of the bottom-right of the "document" icon. In firefox, however, the "download" icon is hovering way above the "document" icon. I suspect this is a result of the pseudo-element not technically being a DOM child of the a.download element, although this example (which doesn't use pseudo-elements) has the same positioning problem.

How do the browsers' implementations of position: absolute in conjunction with pseudo-elements differ, and how can I work around this?

Upvotes: 3

Views: 806

Answers (2)

Dan Gamble
Dan Gamble

Reputation: 4165

I think i've got it.

The <a> tag is collapsing on Chrome but on Firefox it's being given a box. It seems the best bet would be to give the <a> tag some padding-top to push the text down then also absolutely position the acrobat icon as well. I'm not quite sure how to make it not collapse on Chrome

Example: http://jsfiddle.net/5jn9yw7s/

@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

body {
    padding: 100px;
    text-align: center;
}

.download {
    position: relative;
    color: #000;
    text-decoration: none;
}

.download::before {
    position: absolute;
    display: block;
    content:'\f1c1';
    font-family:'FontAwesome';
    font-size: 42pt;
    top: -52pt;
    left: 50%;
    margin-left: -21pt;
}

.download::after {
    position: absolute;
    display: block;
    content:'\f019';
    font-family:'FontAwesome';
    font-size: 28pt;
    top: -32pt;
    left: 50%;
}
<a href="#" class="download">Download PDF</a>

Upvotes: 2

Janaka Dombawela
Janaka Dombawela

Reputation: 1357

In firefox the pseudo elements' absolute positioning ignored and treated as two relative elements. You can set firefox specific fix for this by adding this to your css:

@-moz-document url-prefix() {
    .download::after {
        top: 0;
        left: 0;
        margin-left: 5px;
        margin-top:58px
   }
}

Working fiddle

Play with margins for better result.

Upvotes: 0

Related Questions