Absolute Positioning in Firefox

Hey gang,

I’m attempting to a position a bunch of disjointed css span text rollovers using absolute positioning. They work perfectly in Safari. In Firefox, however, some of the spans show up in the proper position, while others are off by a pixel or two. Any ideas about what’s causing this inconsistency? Are there special considerations for absolute positioning of <span> ?


Hi Welcome to Sitepoint :slight_smile:

Without full code its hard to give an accurate answer but Firefox is usually pretty consistent. (IE6 is usually 1px out with absolute positioning when using right and bottom and the distance covered is an odd number of pixels.

The first things to check would be:

Have you zeroed padding and margins on related elements?
Have you set a stacking context with position:relative on the parent?
Have you set a consistent line-height.

If its text that you are trying to position then text is always out between browsers just because they all handle it differently.

Are there special considerations for absolute positioning of <span>

Generally, no, but
<legend><span>Some legend</span></legend>
there are some places where Firefox will not place abso-po’d elements in the same place with respect to other browsers (the legend example will look the same in Safari, Chrome and Firefox… and lower in Opera and IE).

Cool. Thanx guys!