CODEWITHSUNDEEP
htmlcss
Owais Ahmed
Owais Ahmed

Reputation: 55

HTML element position in Firefox is different

This is my design. The right arrow at the bottom looks fine in chrome and IE. But in Firefox its position is different.

 #prev{
    background-image: url("http://oi57.tinypic.com/2ztfrx4.jpg");
    background-repeat: no-repeat;;
  }       

  #next{
    background-image: url("http://oi60.tinypic.com/2wpjazt.jpg");
    background-repeat: no-repeat;;
  }

Please check the attached image.

I have attached the image which is running in Firefox and the right arrow position is way down.

How can I fix this ?

Upvotes: 1

Views: 51

Answers (1)

Marc Audet
Marc Audet

Reputation: 46785

You can fix the alignment issue using a negative margin on #next as shown below.

Since you specified a width for the the icon image/element, just set the left margin to the negative value of the width, in this case, -26px.

This solution works in the latest versions of Firefox, Chrome and IE.

#prev {
    background-image: url("http://oi57.tinypic.com/2ztfrx4.jpg");
    background-repeat: no-repeat;
    display:inline-block;
    width:26px;
    height:26px;
}
#next {
    background-image: url("http://oi60.tinypic.com/2wpjazt.jpg");
    background-repeat: no-repeat;
    display:inline-block;
    width:26px;
    height:26px;
    float: right;
    margin-left: -26px;
}
.products {
    border-style: solid;
    border-width: 1px;
    border-color: #98bf21;
    text-align:center;
    white-space:normal;
}
<div id="container">
    <div id="catalog" style="width:300px;height:557px;">
        <div id="logo">
            <img alt="Mountain View" src="http://files.usmre.com/4215/mountain%20view%20lake.jpg" style="width:300px;height:200px;">
        </div>
        <div class="products" id="productTitle" style="width:296px;height:350px; font-size: 24px;"></div>
    </div>
    <div style="position:relative;display:block;padding:0px;margin:0px;white-space:nowrap;width:300px;padding-top:10px">
        <div id="prev"></div>
        <div id="next"></div>
    </div>
</div>

Upvotes: 1

Related Questions