CODEWITHSUNDEEP
htmlcss
Kevin Meredith
Kevin Meredith

Reputation: 41909

Firefox and Chrome Display "top: -5px differently"

Using Google Web Toolkit, I have a DIV parent with a DIV and anchor children.

<div class="unseen activity">
  <div class = "unseen-label"/>
  <a href .../>
</div>

With the following CSS, Chrome shows the "unseen label" slightly below the anchor. which is positioned correctly in both Chrome and FireFox.

However, FireFox shows the label in line with the anchor.

.unseen-activity div.unseen-label {
    display: inline-block;
    position: relative;
    top: -5px;
}

and

.unseen-activity a {
    background: url('style/images/refreshActivity.png') no-repeat;
    background-position: 0 2px;
    height: 20px;
    overflow: hidden;
    margin-left: 10px;
    display: inline-block;
    margin-top: 2px;
    padding-left: 20px;
    padding-right: 10px;
    position: relative;
    top: 2px;
}

Please tell me how to change my CSS so that Chrome render the label centered to the anchor. However, I need to keep FireFox happy and rendered correctly.

Upvotes: 2

Views: 404

Answers (1)

Anagio
Anagio

Reputation: 3075

To center your unseen-label class set a width on the unseen class, then for your unseen-label set margin:0 auto; along with a width and align it as you need to. I'm not in firefox so can't comment on what you're seeing. But you can set your unseen class to position:relative; then your unseen-label position to absolute which will let you position it anyplace using negative top right left bottom spacing. Then also get rid of the display inline-block

Upvotes: 1

Related Questions