Wierd IE7 120 DPI CSS Problem

Discussion in 'CSS' started by ste-jenkins, Jan 22, 2007.

  1. #1
    Hi,
    Wonder if anyone can help.

    I have a problem that appears when viewing a page in IE7/WinXP where the DPI settings are set to 120 DPI, not 96 DPI.
    You can see the page in question at http://www.countingclouds.co.uk/dump/

    If you take a look at the screengrab http://www.countingclouds.co.uk/dump/ie.jpg you can see how it looks on IE7/WinXP - there's a thin white line in between the two horizontal bars, and the white line cuts the drop-shadow on the right of the screen. You can see this more clearly at http://www.countingclouds.co.uk/dump/iesample.jpg

    Now, if I change my DPI settings to 96 DPI, the problem disappears on IE7, it just goes away. I have read about how IE7 uses the DPI settings, I vaguely understand the problem, but I cannot work out how to fix this.

    The horizontal bars need to remain where they are, i.e. cannot be moved physically up or down; I am using relative measurements throughout apart from the body font size.

    If I set the body font size to a relative measurement, e.g. "font-size: 0.875em", the problem goes away in IE7 (yes, it goes away completely) - BUT - Opera has a different default font size, so the solution breaks in Opera - see screengrab http://www.countingclouds.co.uk/dump/opera-with-em-for-body-font.jpg.

    So, anyone got any solutions?
    Thanks, Ste
     
    ste-jenkins, Jan 22, 2007 IP