Absolute position changes in different Browsers

[ttmt]

Hi all

I have a simple page with a header, the header contains some contact numbers that are positioned absolutely.

The position of the contact numbers shifts horizontally when comparing between Safari (mac) and Firefox (mac pc), IE (pc).

Is there a better way to position that is the same across browsers ?

http://www.ttmt.org.uk/header/

[apostrophe]

The only difference I can see in all the browsers is in the rendering of the text and there aint nuthin’ you can do about that!

[ttmt]

By rendering of the text do you mean the size ?

It looks like it’s difference in the text size that makes the nav longer in some browsers and so made me think the positioning of the numbers were different.

http://www.ttmt.org.uk/header/header.png

Is there any way to make sure the text size is the same in all browsers ?

ttmt.

[apostrophe]

You could try adding this to your css reset but I’m not guaranteeing anything:

Code:

font-size: 100.01%;

[Rob MacKay]

text is rendered differently – but setting your widths with PX will fix the width not to shift.

It looks absolutely fine to me though. For the sake of killing one div though, I would remove the #telfax div and put the ID attribute onto the UL. So it goes from…

Code:

• tel/fax.01284 606 950
• mob.07545 301 525

To

Code:

• tel/fax.01284 606 950
• mob.07545 301 525

You wont see a change, this is because you don’t need a block element to wrap a block element, unless you are doing something more complex and it requires it :)

[Author]

Posts