CODEWITHSUNDEEP
css
Vipin Verma
Vipin Verma

Reputation: 5735

Difference in site apperance when viewed in firefox and chrome

open the following URL in chrome www.nextag.com/camera/stores-html and refresh the page

Notice the location of the help icon next to ZIP code on top right corner..it is misaligned Now open the same in firefox.. it is properly aligned..

CSS code for this is as follows: 

background: none repeat scroll 0 0 white;
border: 1px solid #C2CCCC;
border-radius: 4px 4px 4px 4px;
color: #C2CCCC;
display: block;
float: right;
font-weight: bold;
height: 13px;
margin-left: 4px;
text-align: center;
width: 12px;
padding-right: 1px;

to make it work in firefox.. i added the following 3 ATTRIBUTES:

position: relative;
top: -15px;
left: 18px;

then it started working fine in chrome, but now it got misaligned in firefox.. what do i do??

Upvotes: 0

Views: 139

Answers (3)

ThomasDurin
ThomasDurin

Reputation: 2003

You have a SPAN inside A. Simply disable the "float: right" property and add "display: inline"

.rb span.zip-info {
    dispay: inline;
    float: none;
}

Upvotes: 1

Jitender
Jitender

Reputation: 7969

Add property float:left

.rb #zipTxt a {
color: #2283AB;
font-size: 12px;
font-weight: bold;
float: left;
}

Upvotes: 1

Heman
Heman

Reputation: 13

Have you tried using the "position: absolute" attribute instead of "position: relative"?

Seems like Firefox has an invisible padding or margin that places the element at the top right of the text space. Chrome is placing the element at the top right of the fieldset element outside of the flow of text.

You can do one thing add a div wrapper and then absolutely position the element in the top right of the wrapper.

Hope this helps.

Upvotes: 1

Related Questions