css- sprites positioning is off in IE6 , 7 & 8

sceptical 0 Newbie Poster

12 Years Ago

Hi :-)
Smiley - face at the start there, but this is really irritating for me.
As you see from the title, THE POSITIONING OF THE ELEMENTS IN IE 6,7 AND 8(At least) is off. I'm including the direct url :
Now this page is normally a redirect from a full - size page, and on a reasonable browser (Read: everything bar Internet explorer) ,everything renders well. The page is meant for small format browser or mobile, but it has css for desktop. Resize your browser window to see how it works.

Here's the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Genr8</title>

<!--[if lt IE 9]>
<link href="PuzzleMobileIE.css" rel="stylesheet" type="text/css" media="screen and (max-width: 649px), screen and (max-width: 767px) and (min-device-height:320px)" id="stylesheet-PIEmob" >
<link href="DesktopIE.css" rel="stylesheet" type="text/css" media="screen and (min-width: 651px) and (min-height: 650px)" id="stylesheet-DTIE" >
<![endif]-->
<link href="PuzzleMobile.css" rel="stylesheet" type="text/css" media="screen and (max-width: 649px), screen and (max-width: 767px) and (min-device-height:320px)" id="stylesheet-Pmob" >

<link href="PuzzlePad.css" rel="stylesheet" type="text/css" media="screen and  (min-width: 650px) and (max-width: 1024px)" id="stylesheet-Pad" >

<link href="Desktop.css" rel="stylesheet" type="text/css" media="screen and (min-width: 651px) and (min-height: 650px)" id="stylesheet-DT" >

<Script type="text/javascript" src="Scripts/js/Respond/Respond-master/dest/respond.min.js"></Script>
<Script type="text/javascript" src="Javascript Cookie Script.js"></Script>
<!--<Script type="text/javascript" src="Scripts/js/css3-mediaqueries.js"></script>-->
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
</script>
</head>

<body onload="MM_preloadImages('images/puzPlugin_56.png','images/HomeButton_03.png','images/AnimasjonMotsatt.gif','images/puzzleGenr8SpriteFull.png','images/Spritepuz1.png')">



<div class="puzzle">
<div class="puzzle2">

<div id="homeGenr8"><a href="index.html"><img src="images/HomeButton_03.png" alt="HomeG8MobAlt" name="homeGenr8" width="100%" id="homeGenr82" ></a></div>

<div id="Genr8Flash"><a href="FillingIn4.html"><img src="images/AnimasjonMotsatt.gif" alt="FlashG8MobAlt" name="Genr8Flash" width="100%" id="Genr8Flash2" ></a></div>

<div id="puzzleK"><a href="Plugins/Genr8OldPlusNew.rar"><img src="images/puzPlugin_56.png" alt="PluginsG8Alt" name="puzzleK" width="100%" class="AllElements" id="puzzleK2" ></a></div>

</div>
<ul id="navlist">
  <li id="Intro"><a href="Genr8PageIntro.php"></a></li>
  <li id="Source"><a href="SourceCode.html"></a></li>
 </ul>
<ul id="navlist2">
  <li id="genr82001"><a href="GENR8litt/genr8MartinHemberg.pdf"></a></li>
  <li id="compDebug"><a href="CompileAndDebug.html"></a></li>
  </ul>
  <ul id="navlist3">
<li id="pWorkings"><a href="PluginWorkings.html"></a></li>
 </ul>
  <ul id="navlist4">
<li id="analysis"><a href="Genr8Analysis.html"></a></li>
 </ul>
  <ul id="navlist5">
 <li id="g8new"><a href="Genr82011.php"></a></li>
 </ul>
 </div>

  <Script type="text/javascript" src="BodyScriptGenr8.js"></Script>

</body>
</html>

As you can see from the header, I have tried to include a separate stylesheet for IE8 and lower, but there seems to be no difference. I am using IETester with debugbar to test.
I have tried to change everything in the css, but nothing registers. THE MAIN question though remains: Why o why will the sprites not position right with older IE ?

css for the "mobile" or small windowed desktop:

@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 649px), screen and (max-width: 767px) and (min-device-height:320px){

    body {
    background-color: #000!important;
}
a:link {
    text-decoration: #000;
}
a:visited {
    text-decoration: #000;
}
a:hover {
    text-decoration: #000;
}
a:active {
    text-decoration: #000;
}

img {
    border:0;
 }

.puzzle {
    display: block;
    position: absolute;
    width:290px;
    height:282px;
    margin-left: -145px;
    margin-top: -141px;
    /*margin-left: auto;*/
    /*left: auto;
    top: auto;*/
    top: 50%;
    left: 50%;
    background-image: url(images/puzzleGenr8SpriteFullMob.png);
    /*_background-image: url(images/puzzleGenr8SpriteFullMob.gif);*/ /*IE6*/
    background-size:290px 282px!important;
    background-position: 0px 0px;
    z-index: 1;
    background-repeat: no-repeat;
}
.puzzle2 {
    position: relative;
    z-index: 2;
    display:block;
    background-color: #000!important;
}
#homeGenr8 {
    display: block;
    position: absolute;
    height: 28px;
    width: 69px;
    left: 0px;
    top: 0px;
    visibility: visible;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
/*html>body #homeGenr8
{
width: auto;
height: auto;
min-width: 69px;
min-height: 28px;
}
*/
#Genr8Flash {
    display: block;
    position: absolute;
    height: 28px;
    width: 62px;
    top: 0px;
    left: 228px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}

#puzzleK {
    display: block;
    position: absolute;
    visibility: visible;
    height: 28px;
    width: 63px;
    left: 227px;
    top: 254px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}


#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:-8px;}
#navlist li, #navlist a{height:23px;display:block;}
/*#backG{left:0px;width:580px;height:563px;}
#backG{background:url('images/puzzleGenr8SpriteFull.png') 0 0;}*/

#Intro{left:85px;width:50px;height:23px;}
#Intro{background:url('images/puzzleGenr8SpriteFull.png') -83px -5px;background-size: 290px 282px; background-repeat:no-repeat;}
#Intro a:hover{background: url('images/Spritepuz1Mob.gif') -83px -5px;
background-size: 290px 282px; background-repeat:no-repeat;}

#Source{left:152px;width:58px;height:14px;}
#Source{background:url('images/puzzleGenr8SpriteFull.png') -152px -8px;
background-size: 290px 282px; background-repeat:no-repeat;}
#Source a:hover{background: url('images/Spritepuz1Mob.gif') -152px -8px;
background-size: 290px 282px; background-repeat:no-repeat;}

#navlist2{position:relative;}
#navlist2 li{margin:0;padding:0;list-style:none;position:absolute;top:22px;}
#navlist2 li, #navlist2 a{height:28px;display:block;}

#genr82001{left:31px;width:50px;height:27px;}
#genr82001{background:url('images/puzzleGenr8SpriteFull.png') -28px -38px;
background-size: 290px 282px; background-repeat:no-repeat;}
#genr82001 a:hover{background: url('images/Spritepuz1.gif') -28px -38px;
background-size: 290px 282px; background-repeat:no-repeat;}

#compDebug{left:220px;width:60px;height:20px;}
#compDebug{background:url('images/puzzleGenr8SpriteFull.png') -220px -38px;
background-size: 290px 282px; background-repeat:no-repeat;}
#compDebug a:hover{background: url('images/Spritepuz1Mob.gif') -220px -38px;
background-size: 290px 282px; background-repeat:no-repeat;}

#navlist3{position:relative;}
#navlist3 li{margin:0;padding:0;list-style:none;position:absolute;top:63px;}
#navlist3 li, #navlist3 a{height:23px;display:block;}

#pWorkings{left:147px;width:55px;height:23px;}
#pWorkings{background:url('images/puzzleGenr8SpriteFull.png') -147px -75px;
background-size: 290px 282px; background-repeat:no-repeat;}
#pWorkings a:hover{background: url('images/Spritepuz1Mob.gif') -147px -75px;
background-size: 290px 282px; background-repeat:no-repeat;}

#navlist4{position:relative;}
#navlist4 li{margin:0;padding:0;list-style:none;position:absolute;top:105px;}
#navlist4 li, #navlist4 a{height:27px;display:block;}

#analysis{left:25px;width:53px;height:23px;}
#analysis{background:url('images/puzzleGenr8SpriteFull.png') -20px -120px;
background-size: 290px 282px; background-repeat:no-repeat;}
#analysis a:hover{background: url('images/Spritepuz1Mob.gif') -20px -120px;
background-size: 290px 282px; background-repeat:no-repeat;}

#navlist5{position:relative;}
#navlist5 li{margin:0;padding:0;list-style:none;position:absolute;top:221px;}
#navlist5 li, #navlist5 a{height:27px;display:block;}

#g8new{left:12px;width:55px;height:23px;}
#g8new{background:url('images/puzzleGenr8SpriteFull.png') -7px -232px;
background-size: 290px 282px; background-repeat:no-repeat;}
#g8new a:hover{background: url('images/Spritepuz1Mob.gif') -7px -232px;
background-size: 290px 282px; background-repeat:no-repeat;}

}

I get warnings for background-size in the css-file, but how would I go about correcting my css/html for this to display correctly in IE6,7 and 8 ?
Just to be clear - I am not going to change all my html and css just for the page to display with old IE, but I would really appreciate a little insight :-)

1 Contributor
0 Replies
179 Views

Dani AI

Generated 6 Months Ago

@сeptic al — short diagnosis and practical fixes.

The root cause is almost certainly the CSS3 background-size usage: IE8 and older do not support background-size, so any sprite positioning that assumes a scaled image will be wrong in those browsers. That is why everything looks fine everywhere except IE6/7/8. (developer.mozilla.org)

What to do (ordered by least work → more work):

Easiest and most reliable: serve a legacy (pre-scaled) sprite and override the modern rules in an IE-only stylesheet (conditional comment). That stylesheet should remove the background-size dependence and use pixel-accurate background-position values that match the image you actually ship to old IE.
If you prefer to keep one codepath, use a background-size polyfill (HTC/JS) to emulate background-size in IE8 — it works but adds complexity and maintenance. (stackoverflow.com)
Avoid the old DXImageTransform/AlphaImageLoader hack unless there’s no alternative: it can scale images but introduces other bugs (for example links becoming unclickable). (stackoverflow.com)

Debug checklist to save time:

Confirm the IE-only CSS is actually loaded by the browser (View Source / F12 Network). If you’re using Respond.js, make sure it is included after your stylesheet links and that the CSS files are reachable via normal HTTP (Respond.js re-requests them via XHR and will fail silently for redirects/cross-domain/BOM issues). (github.com)
Ensure IE is running in the document mode you expect (not Compatibility/Quirks). Use a proper DOCTYPE and consider X-UA-Compatible or server headers when diagnosing. (learn.microsoft.com)

Minimal, practical route: add a tiny PuzzleMobileIE.css (conditional comment) that swaps to a pre-sized sprite or adjusts positions — quick to test and low-risk. If long-term support for IE6–8 is not required, weigh that maintenance cost versus the polyfill/hack route.

Be the first to reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.