WN - Fotogalleri i CSS

[font=Geneva]Jag har använt galleriet Photo Gallery Mk. IIfrån http://www.cssplay.co.uk/menu/scroll_gallery.html, men har lite problem med det. Det funkar bara nästan i IE6 när jag tar bort "Transitional" och börjar koden med <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">. Då visas däremot inte tabelcellerna i rätt storlek. I Firefox funkar cellerna, men där där toppjusteras de stora bilderna inte.
Printscreens på hur det ser ut i IE respektive Firefox är bifogat.

Vet någon hur man kan lösa detta?

Den aktuella sidan:

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">

<html>

<link href="../css/default.css" rel="stylesheet" type="text/css">

<head>

<title>Unika M&ouml;bler | Sortiment</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript" type="text/JavaScript">

<!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized

 if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

  document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

 else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

</script>

<STYLE type=text/css>

#holder {Z-INDEX: 1; MARGIN-BOTTOM: 0px; POSITION: relative}

#scrollbox {BORDER-RIGHT: none; BORDER-TOP: none; BACKGROUND: #111111; MARGIN-LEFT: 0px; OVERFLOW: auto; BORDER-LEFT: none; WIDTH: 600px; BORDER-BOTTOM: none; HEIGHT: 90px}

A.gallery {BORDER-RIGHT: none; BORDER-TOP: none; DISPLAY: block; FLOAT: left; MARGIN: 0px; BORDER-LEFT: none; WIDTH: 109px; COLOR: #111111; BORDER-BOTTOM: none; HEIGHT: 70px; TEXT-DECORATION: none}

A.gallery:visited {BORDER-RIGHT: none; BORDER-TOP: none; DISPLAY: block; FLOAT: left; MARGIN: 0px; BORDER-LEFT: none; WIDTH: 109px; COLOR: #111111; BORDER-BOTTOM: none; HEIGHT: 70px; TEXT-DECORATION: none}

A.slide001 {BACKGROUND: url(../images/assortment/thumbnails/miljobild_1.jpg)}

A.slide002 {BACKGROUND: url(../images/assortment/thumbnails/miljobild_2.jpg)}

A.slide003 {BACKGROUND: url(../images/assortment/thumbnails/miljobild_3.jpg)}

A.slide004 {BACKGROUND: url(../images/assortment/thumbnails/miljobild_4.jpg)}



A.gallery SPAN {DISPLAY: block; Z-INDEX: 100; BACKGROUND: none; LEFT: 0px; OVERFLOW: hidden; WIDTH: 1px; POSITION: absolute; TOP: -1px; HEIGHT: 1px}

A.gallery:hover {BORDER-RIGHT: none; BORDER-TOP: none; BORDER-LEFT: none; BORDER-BOTTOM: none; WHITE-SPACE: normal}

A.gallery:hover IMG {BORDER-RIGHT: none; BORDER-TOP: none; Z-INDEX: 100; BORDER-LEFT: none; BORDER-BOTTOM: none}

A.gallery:active IMG {BORDER-RIGHT: none; BORDER-TOP: none; Z-INDEX: 50; BORDER-LEFT: none; BORDER-BOTTOM: none}

A.gallery:unknown IMG {BORDER-RIGHT: none; BORDER-TOP: none; Z-INDEX: 50; BORDER-LEFT: none; BORDER-BOTTOM: none}

A.gallery:hover SPAN {PADDING-RIGHT: none; DISPLAY: block; PADDING-LEFT: none; FONT-SIZE: 11px; Z-INDEX: 100; BACKGROUND: none; LEFT: 0px; PADDING-BOTTOM: none; WIDTH: 600px; COLOR: #111111; PADDING-TOP: none; FONT-STYLE: none; POSITION: absolute; TOP: 0px; HEIGHT: 418px}

A.gallery:active {BORDER-RIGHT: none; BORDER-TOP: none; BORDER-LEFT: none; BORDER-BOTTOM: none}

A.gallery:active SPAN {PADDING-RIGHT: none; DISPLAY: block; PADDING-LEFT: none; Z-INDEX: 50; BACKGROUND: none; LEFT: 0px; PADDING-BOTTOM: none; WIDTH: 600px; COLOR: #111111; PADDING-TOP: none; FONT-STYLE: none; POSITION: absolute; TOP: 0px; HEIGHT: 418px}

A.gallery:unknown SPAN {PADDING-RIGHT: none; DISPLAY: block; PADDING-LEFT: none; Z-INDEX: 50; BACKGROUND: none; LEFT: 0px; PADDING-BOTTOM: none; WIDTH: 600px; COLOR: #111111; PADDING-TOP: none; FONT-STYLE: none; POSITION: absolute; TOP: 0px; HEIGHT: 418px}#thumbs {WIDTH: 1500px; HEIGHT: 70px}



#pad {WIDTH: 0px; HEIGHT: 418px}



</STYLE>



</head>



<body>

<div id="Layer1" style="position:absolute; z-index:1">

 <table width="100%" height="582" border="0" cellpadding="5" cellspacing="0">

  <tr> 

   <td></td>

   <td width="268" height="550" rowspan="3" background="../images/lock_logo.jpg"></td>

   <td width="190" height="32" align="center" valign="middle" bgcolor="#333333"><a href="start.htm">START</a></td>

   <td width="190" height="32" align="center" valign="middle" bgcolor="#333333"><a href="about.htm">OM 

    OSS</a></td>

   <td width="190" height="32" align="center" valign="middle" bgcolor="#444444">SORTIMENT</td>

   <td></td>

  </tr>

  <tr> 

   <td height="132"></td>

   <td width="590" height="518" colspan="3" rowspan="2"> 

    <p class="largertext"></p></td>

   <td></td>

  </tr>

  <tr> 

   <td height="386"></td></td>

   <td></td>

  </tr>

  <tr> 

   <td></td>

   <td height="32"></td>

   <td height="32" colspan="3" align="right" valign="middle">M&Aring;NDAG-FREDAG 

    11-18, L&Ouml;RDAG 11-15, S&Ouml;NDAG 12-16<br>

    Argongatan 8, 431 53 M&ouml;lndal | <a href="http://www.hitta.se/pink/XkaCscNHh9Y9FydNXkouuw==.aspx" target="_top">Karta</a> 

    | 031-87 70 90 | <a href="mailto:[email protected]">[email protected]</a></td>

   <td></td>

  </tr>

 </table>

</div>

<div id="Layer2" style="position:absolute; left:0px; top:42px; width:100%; height:518px; z-index:2"> 

 <table width="100%" height="386" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

   <td></td>

   <td width="278" height="386"></td>

   <td width="600" height="386">

<DIV id=holder> 

    <DIV id=pad></DIV>

    <DIV id=scrollbox> 

     <DIV class="largertext" id=thumbs></p><A class="gallery slide001" href="../../images/assortment/miljobild_1.jpg#nogo"><SPAN><IMG src="../images/assortment/miljobild_1.jpg" width="600" height="386"><BR>

      Information om produkten<BR>

      0:-</SPAN></A> <A class="gallery slide002" href="../../images/assortment/miljobild_2.jpg#nogo"><SPAN><IMG src="../images/assortment/miljobild_2.jpg" width="600" height="386"><BR>

      Information om produkten<BR>

      0:-</SPAN></A> <A class="gallery slide003" href="../../images/assortment/miljobild_3.jpg#nogo"><SPAN><IMG src="../images/assortment/miljobild_3.jpg" width="600" height="386"><BR>

      Information om produkten<BR>

      0:-</SPAN></A> <A class="gallery slide004" href="../../images/assortment/miljobild_4.jpg#nogo"><SPAN><IMG src="../images/assortment/miljobild_4.jpg" width="600" height="386"><BR>

      Information om produkten<BR>

      0:-</SPAN></A></DIV>

    </DIV>

   </DIV>

 </DIV>

  

  </td>

   <td></td>

  </tr>

 </table>

</div>

</body>

</html>

Tillhörande CSS:

Kod:

body {

        font-family: Verdana, Arial, Helvetica, sans-serif;

        font-size: 10px;

        color: #FFFFFF;

        background-color: #111111;

        background-image: url(../images/grey_background.jpg);



}

A:link {

        color: #FFFFFF;

        font-family: Verdana, Arial, Helvetica, sans-serif;

        text-decoration: none;

        font-weight: bold;

}

A:visited {

        color: #FFFFFF;

        font-family: Verdana, Arial, Helvetica, sans-serif;

        text-decoration: none;

        font-weight: bold;

}

A:hover {

        color: #FFFFFF;

        font-family: Verdana, Arial, Helvetica, sans-serif;

        text-decoration: underline;

        font-weight: bold;

}

td {

        font-family: Verdana, Arial, Helvetica, sans-serif;

        font-size: 10px;

        color: #FFFFFF;

}

div {

        height: 570px;

        width: 100%;

        left: 0px;

        top: 10px;

        right: 0px;



}

.largertext {

        font-family: Verdana, Arial, Helvetica, sans-serif;

        font-size: 12px;

        color: #FFFFFF;

        text-align: left;

}

.largertextjustify {

        font-family: Verdana, Arial, Helvetica, sans-serif;

        font-size: 12px;

        color: #FFFFFF;

        text-align: justify;

}

IE6:
http://www.happyhelmet.se/problems/printscreen_ie6.jpg

Firefox:
http://www.happyhelmet.se/problems/p...en_firefox.jpg</span>