3

I have 2 problems with WP IE :

  • transparent background-image have artifacts on their transparent borders
  • absolute positioned divs to the bottom of the page leaves a ~5px white gap between the browser navigation bar and the bottom of the page

Note that I use divs instead of img to handle CSS retina image replacement for HDPI devices (iPhone 4+, iPad3+, Android Galaxy S3, WP8 Lumia 920...). With img, the artifacts are gone.

HTML:

    <div class="header-left"></div>
    <div class="footer-left"></div>

CSS: 

.header-left {
    position: absolute;
    top:0;
    left:0;
    background-image: url('../img/bkg_header_left.png');    
    background-size: 92px 79px; 
    width: 92px;
    height: 79px;       
}

.footer-left{
    position:absolute;  
    bottom:0;
    left:0;
    background-image: url('../img/bkg_footer_left.png');
    background-size: 315px 50px;
    width:315px;
    height:50px;    
}


/*  DPI specific CSS
 *  retina image replacement */ 
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
    only screen and (-moz-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min-device-pixel-ratio: 1.5) {

    .header-left {
        background-image: url('../assets/bkg_header_left@2x.png');
    }

    .footer-left{
        background-image: url('../assets/bkg_footer_left@2x.png');
    }
}

Simple sample page based on HTML5 boilerplate (i.e. includes a CSS for normalisation/reset) : http://file.rspreprod.fr/wp-ie-bugs/index.html

For those without Windows Phone, here is a capture of the result on WP7.5 :

capture

Rémy DAVID
  • 4,343
  • 6
  • 25
  • 27
  • I'm having the same issue with the white gap at the bottom when using position: absolute with bottom: 0. Did you find a fix for it? – efdee Feb 17 '13 at 18:27

2 Answers2

0

Ok so the image artifacts can be solved using : background-repeat:no-repeat;

Still looking at the white gap, seems to be the body's fault for some reason I can't figure.

Rémy DAVID
  • 4,343
  • 6
  • 25
  • 27
0

With regards to the white border - it looks like either your <body> or <html> tag has a margin or padding setting applied. If either of those tags also has positioning, such as position: relative - you can easily see this behavior.

The reason is that position: absolute is always actually relative to the nearest positioned parent. For more information on that, check out this fantastic article.

If that is, in fact, the problem - you can try the following potential fix:

html, body { margin: 0; padding: 0; }

This will strip the spacing from around the page's edge, and hopefully bring your content flush with the edges of the browser.

Troy Alford
  • 26,660
  • 10
  • 64
  • 82