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 : http://evolvedtools.com/Genr8Mobi.html.
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 :-)