CODEWITHSUNDEEP
html
Bulrog Bulrog
Bulrog Bulrog

Reputation: 11

Code works in IE but not in any other browser ,dont know why

HI there i am new to programming and web programming ,this code is suppose to show the date and time as pictures of my choice and change accordingly as the time and date change , the code works and displays the images correctly in IE but not on FireFox Chrome or any other browser,on the other browsers the pictures appear but do not follow the styling rules as coded is there something wrong with my code or am i missing something else 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
 image{
       posyion: fixed;
       width: 120px;
       max-width: 100%;
       height:300px;
       max-height:100%; 
       overflow: visible;
       margin: auto;
       padding: 0;
     } 

</style>
<script>
function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  var yyyy = today.getFullYear();
  var mm = today.getMonth() + 1; 
  var dd = today.getDate();
  h = checkTime(h);
  m = checkTime(m);
  s = checkTime(s);
  mm = ( mm < 10 ) ? ( "0" + ( mm ).toString() ) : ( mm 
  ).toString();
  dd = ( dd < 10 ) ? ( "0" + ( dd ).toString() ) : ( dd 
  ).toString()

  var string = h + ":" + m + ":" + s ;
  var string1 =  dd + "-" + mm + "-" + yyyy;

  var img = stringToImage(string);
  var img2 = stringToImage(string1);


   document.getElementById('timetxt').innerHTML = img;
   document.getElementById('timetxt2').innerHTML = img2;

   var t = setTimeout(startTime, 500);
 }
 function checkTime(i) {
   if (i < 10) {
     i = "0" + i
 } 
   return i;
}

function stringToImage(s) {
   var temp = ""
   for (var i = 0; i < s.length; i++) {

    temp = temp + "<img src='" + img[s[i]] + "'/>"
  }
  return temp
}


var img = {
            "1": "images/one.jpg",
            "2": "images/two.png",
            "3": "images/three.jpg",
            "4": "images/four.jpg",
            "5": "images/five.jpg",
            "6": "images/six.png",
            "7": "images/seven.jpg",
            "8": "images/eight.png",
            "9": "images/nine.jpg",
            "0": "images/zero.gif",
            ":": "images/Colon.jpg",
            "-": "images/line.jpg"
      }

</script>

</head>

<body onload="startTime()">
<div id="container" align = "center">
<div id="timetxt" class = "image" align = "center"></div>
<div id="timetxt2" class = "image" align = "center"></div>
</div>

</body>
</html>

all the pictures display on all browsers but only on IE does it apply the styling parameters ,so the pictures should have a width of 180px and a height of 300px so on IE the browsers applys theses rules but other browsers do not apply theses rules it seems to happen only with the styling part of the code everything else runs as planned

Upvotes: 1

Views: 48

Answers (1)

kshetline
kshetline

Reputation: 13700

I noticed right off that you have posyion instead of position where you're trying to state that your image is position: fixed.

I don't know if that's the only problem you have, but that will mess up a lot.

Upvotes: 1

Related Questions