Grow your CSS skills. Land your dream job.

Absolute position changes in different Browsers

  • # June 4, 2009 at 10:17 am

    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/

    # June 4, 2009 at 10:36 am

    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!

    # June 4, 2009 at 11:05 am

    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.

    # June 4, 2009 at 11:54 am

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

    Code:
    font-size: 100.01%;
    Rob
    # June 7, 2009 at 6:30 pm

    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 :)

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".