Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Text positioning in all versions of Internet Explorer - a known bug?

    Internet Explorer seems to position text differently than Firefox, Chrome and Safari. Please see the following link and enlargement image:
    http://www.cerulean.co.nz/demo/testing.html



    In these examples the text element has been given a background colour, and you can see that IE positions the text 1 pixel higher than the other browsers I tested. This is a problem when text needs to be vertically centred in a tightly spaced box as it looks noticeably off-centre in IE. This screen capture was done on a machine running Windows XP SP3 with ClearType on. I tried other fonts with the same results.

    Is this positioning difference a known bug in IE? I've tried searching for information but I can't find any discussion on the issue. Is it possible to correct the IE behaviour using CSS, preferably without having to create a separate stylesheet for IE alone?

    Any advice is appreciated, thanks.
    Last edited by cerulean; 10-27-2010 at 10:33 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Remove those line-heights and check again.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your reply, abduraooft.

    You're right that the positioning difference is caused by the line-height value.

    I've done some more testing and I've found that to make Internet Explorer position the text the same as the other major browsers the line-height needs to be set to:
    • 'normal' - the same as removing the line-height rule as you suggested, but often the line-height would be inherited so it would need overriding. In theory 'normal' can be interpreted differently by different browsers, but the browsers I tested all set the line-height to the same number of pixels
    • an odd number of pixels if the font-size is an even number of pixels
    • an even number of pixels if the font-size is an odd number of pixels


    It's annoying that Internet Explorer is the odd one out when it comes to other methods of specifying line-height, but at least there is a workaround.

    Thanks again for your help.
    Last edited by cerulean; 10-27-2010 at 10:39 PM.

  • #4
    Banned
    Join Date
    Jul 2010
    Posts
    66
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hi,
    IE always takes one pixel as square where as other browsers takes one pixel as dot
    so adjust according to this you will find a result


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •