Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

Browser Specific Problems: Wierd IE7 120 DPI CSS Problem

Bottom of Page

1 to 2 of 2

  1.  
  1.  permalink
    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
  2.  permalink
    Not sure why IE7 behaves as it does, let's face it I would be rich if I did haha.

    The obvious work round is not to position the divs absolutely so they are unaffected by changes to the default font. I can see 2 possible solutions.

    No changes to the HTML, alter the CSS to this
    .container {
    width:52.142em;
    margin-right:auto;
    margin-left:auto;
    margin-top:10.1em;
    padding:0em;
    text-align:left;
    background-image: url(http://www.countingclouds.co.uk/dump/images/construction/column_height_fixer.gif)
    }

    .main_navigation_banner {
    width: 52.143em;
    height: 1.78em;
    background-image: url(http://www.countingclouds.co.uk/dump/images/construction/red_banner.gif);
    }

    .yellow_banner_top {
    width: 52.143em;
    height: 0.714em;
    background-image: url(http://www.countingclouds.co.uk/dump/images/construction/yellow_banner.gif);
    }

    The second option would be to put the yellow div inside the red div. ie.

    HTML

    <div class="container">
    <div class="main_navigation_banner">
    <div class="yellow_banner_top"></div>
    </div>
    </div>

    CSS

    .container {
    width:52.142em;
    margin-right:auto;
    margin-left:auto;
    margin-top:10.1em;
    padding:0em;
    text-align:left;
    background-image: url(http://www.countingclouds.co.uk/dump/images/construction/column_height_fixer.gif)
    }

    .main_navigation_banner {
    width: 52.143em;
    padding-top:1.78em;
    background-image: url(http://www.countingclouds.co.uk/dump/images/construction/red_banner.gif);
    }

    .yellow_banner_top {
    width: 52.143em;
    height: 0.714em;
    background-image: url(http://www.countingclouds.co.uk/dump/images/construction/yellow_banner.gif);

    }

1 to 2 of 2

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page