Firefox and Chrome Display "top: -5px differently"
- by Kevin
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.
