Question

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.

Answer 1

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