need help with css sprites Options

[falcon]

CSS Sprites-PageBreeze1

What I am trying to accomplish is:
1. convert pictures to sprites
2. have it display correctly for different screen sizes
3. have it display correctly for different browsers (note: IE is the worst)
The website currently in tables because I could not get it to display correctly in CSS
I believe I need "if IE then ..." to display correctly in CSS
The CSS Sprites Generator:
https://www.hscripts.com/tools/css-sprites-...rator/index.php
The 16 image sprite "image_3699" it is stored in "Images" folder
- - -
Any help would be appreciated
Let me know if more information is needed. If code is needed, let me know what code
Thank You
falcon

The webpage:
http://freetutorials.name/Reference1/PageB...creenshots.html
The sprite
image_3699

Pagebreeze image 3699
#image1 { background-image: url(./image_3699.png); background-position: -7px 0px; width: 969px; height: 616px; }
#image2 { background-image: url(./image_3699.png); background-position: -6px -616px; width: 970px; height: 609px; }
#image3 { background-image: url(./image_3699.png); background-position: -4px -1225px; width: 972px; height: 615px; }
#image4 { background-image: url(./image_3699.png); background-position: -5px -1840px; width: 971px; height: 610px; }
#image5 { background-image: url(./image_3699.png); background-position: -5px -2450px; width: 971px; height: 617px; }
#image6 { background-image: url(./image_3699.png); background-position: -6px -3067px; width: 970px; height: 612px; }
#image7 { background-image: url(./image_3699.png); background-position: -8px -3679px; width: 968px; height: 618px; }
#image8 { background-image: url(./image_3699.png); background-position: -1px -4297px; width: 975px; height: 613px; }
#image9 { background-image: url(./image_3699.png); background-position: -4px -4910px; width: 972px; height: 612px; }
#image10 { background-image: url(./image_3699.png); background-position: -5px -5522px; width: 971px; height: 618px; }
#image11 { background-image: url(./image_3699.png); background-position: -4px -6140px; width: 972px; height: 616px; }
#image12 { background-image: url(./image_3699.png); background-position: -6px -6756px; width: 970px; height: 613px; }
#image13 { background-image: url(./image_3699.png); background-position: 0px -7369px; width: 976px; height: 616px; }
#image14 { background-image: url(./image_3699.png); background-position: 0px -7985px; width: 976px; height: 616px; }
#image15 { background-image: url(./image_3699.png); background-position: -9px -8601px; width: 967px; height: 613px; }
#image16 { background-image: url(./image_3699.png); background-position: -5px -9214px; width: 971px; height: 621px; }

[falcon]

CSS code

CODE

*{margin:auto;}
   /* background color #FAEBD7= Antique White */
body{background-color:#FAEBD7;font-family:"Times New Roman", Times, serif;font-size:90%;color:#000000;padding:10px;}
   /* color #800080= Purple */
a:hover{color:purple;background-color:white;font-weight:bold;}
#header{text-align:center;border:1px solid darkblue;5px 50% no-repeat;}
#header b{display:block;min-height:120px;margin:0px;padding:0 200px;font-weight:normal;}
* html #header b{height:200px;}

#header h1{text-align:center;color:#FF0000;font-size:180%;margin-bottom:10px;}

#header h2{text-align:center;color:#FF0000;font-size:130%;margin-bottom:10px;}

h3{text-align:center;color:#FF0000;font-size:130%;margin-bottom:10px;}

#header h4{color:#FF0000;font-size:100%;margin-bottom:10px;}

#homelink{float:left;width:64px;height:20px;background-image:url(../Images/home.gif);background-repeat:no-repeat;margin-top:7px;font-size:1px;color:#428afc;}

#articlelink{float:right;width:64px;height:20px;background-image:url(../Images/articles.gif);background-repeat:no-repeat;font-size:1px;color:#3c8ffc;}

#forumlink{float:right;width:64px;height:20px;background-image:url(../Images/forum.gif);background-repeat:no-repeat;font-size:1px;color:#3c8ffc;}
   /* 1 col */
.col{float:left;width:100%;border:1px solid darkblue;margin-bottom:5px;}
.col a{margin-left:5px;line-height:1.5ex}
.col dt{padding-top:3px;}
.col dd{padding:2px 5px 2px 20px;}
.col b{display:block;padding:2px 5px 2px 20px;}
.col{float:left;width:100%;border:1px solid darkblue;text-align:left;margin-bottom:5px;}
   /* 2 col  */
.leftcol{float:left;width:49.5%;border:1px solid darkblue;margin-bottom:5px;}
.rightcol{float:right;width:49.5%;border:1px solid darkblue;margin-bottom:5px;}
   /* col 80%  */
.coll{float:left;width:79.5%;border:1px solid darkblue;margin-bottom:5px;}
.coll a, .rcol a{margin-left:5px;line-height:1.5ex}
.coll dt, .rcol dt{padding-top:3px;}
.coll dd, .rcol dd{padding:2px 5px 2px 20px;}
  /* col 40%  */
.lecol{float:left;width:39.7%;border:1px solid darkblue;margin-bottom:5px;margin:0;padding:0;}
.mdcol{float:left;width:39.7%;border:1px solid darkblue;margin-bottom:5px;}
  /* col 20%  */
.rcol{float:right;width:19.7%;border:1px solid darkblue;margin-bottom:5px;}
  /* 3 col  */
.lfcol{float:left;width:32.8%;margin-bottom:5px;}
.micol{float:left;width:32.8%;margin-bottom:5px;}
.ricol{float:right;width:32.8%;margin-bottom:5px;}
.lcol a, .mcol a, .rcol a{margin-left:5px;line-height:1.5ex}
.lecol a, .mdcol a, .rcol a{margin-left:5px;line-height:1.5ex}
.lecol b, .mdcol b, .rcol b{display:block;padding:2px 5px 2px 20px;}
.lecol dt, .mdcol dt, .rcol dt{padding-top:3px;}
.lecol dd, .mdcol dd, .rcol dd{padding:2px 5px 2px 20px;}
.lcol dt, .mcol dt, .rcol dt{padding-top:3px;}
.lcol dd, .mcol dd, .rcol dd{padding:2px 5px 2px 20px;}
.lcol b, .mcol b, .rcol b{display:block;padding:2px 5px 2px 20px;}
  /* 4 col  */
.ltcol{float:left;width:24.7%;border:1px solid darkblue;margin-bottom:5px;}
.lmdcol{float:left;width:24.7%;border:1px solid darkblue;margin-bottom:5px;}
.rmdcol{float:left;width:24.7%;border:1px solid darkblue;margin-bottom:5px;}
.ritcol{float:right;width:24.7%;border:1px solid darkblue;margin-bottom:5px;}
.ltcol a, .lmdcol a, .rmdcol a, .ritcol a{margin-left:5px;line-height:1.5ex}
.lftcol{float:left;width:20.2%;border:1px solid darkblue;margin-bottom:5px;}
.midlftcol{float:left;width:19.7%;border:1px solid darkblue;margin-bottom:5px;}
.midcol{float:left;width:19.0%;border:1px solid darkblue;margin-bottom:5px;}
.midrtcol{float:left;width:20.1%;border:1px solid darkblue;margin-bottom:5px;}
.rtcol{float:right;width:19.7%;border:1px solid darkblue;margin-bottom:5px;}
.lftcol a, .midlftcol a, .midcol a, .midrtcol a, .rtcol a{margin-left:5px;line-height:1.5ex}
.lftcol dt, .midlftcol dt, .midcol dt, .midrtcol dt, .rtcol dt{padding-top:3px;}
.lftcol dd, .midlftcol dd, .midcol dd, .midrtcol dd, .rtcol dd{padding:2px 5px 2px 20px;}
.lftcol b, .midlftcol b, .midcol b, .midrtcol b, .rtcol b{display:block;padding:2px 5px 2px 20px;}
.rightcol{float:right;width:49.5%;border:1px solid darkblue;margin-bottom:5px;}
.leftcol a, .rightcol a{margin-left:5px;line-height:1.5ex}
.leftcol dt, .rightcol dt{padding-top:3px;}
.leftcol dd, .rightcol dd{padding:2px 5px 2px 20px;}
.leftcol b, .rightcol b{display:block;padding:2px 5px 2px 20px;}
.clear{clear:both;height:30px;}