CODEWITHSUNDEEP
htmlcssmacoscross-browserpositioning
Nicsoft
Nicsoft

Reputation: 3712

Elements position differs between Chrome and Firefox

This is a question I belive has been asked before but I haven't found any solution.

Open my jsfiddle in both Firefox and Chrome (Or Safari instead of Chrome). If you look carefully at the letter 'y', you can see that there are one or two extra pixels between the letter and the lower border of the section1-div, in Firefox compared to one of the other two.

I have set padding and margin top/bottom to 0px on the most elements in order to reset the styling to som extent.

Why is that and what measures should I take in order to prevent this?

UPDATE: Using Chrome 17.0.963.56, FF 11 and Mac.

Upvotes: 0

Views: 324

Answers (1)

Nicsoft
Nicsoft

Reputation: 3712

I'm not really sure why this problem happend. It was not working. In my own code I could relate it to the padding. Chrome/Safari and Firefox is handling the padding differently. By adding som padding to the standard css and making an exception for Firefox I did get the expected result. This doesn't help the jsfiddle example (it could actually be that there isn't any problem in the example, could be that the font is displayed a bit different and it looks like there are differen number of pixels between the letter and the border...). 

#adminmenu a{
    padding-bottom: 2px;
}

@-moz-document url-prefix() {

    #adminmenu a{ padding-bottom: 0px; }

}

Upvotes: 1

Related Questions