Probleme mit CSS

Acendro

Hajo, ich hab folgenden Code

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<META NAME="DESCRIPTION" CONTENT="XXXXXXXXXXXXXXXXXXXXXXXXXXXX">
<META NAME="KEYWORDS" CONTENT="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX">


<style type="text/css">
#scroller {width:220px; height:160px; position:relative;padding:5px 20px; background:#ffffe0; float:left;} /*background:#ffffe0;*/
#scroller b#thumbs {background:#ffffff; display:block; width:220px; height:120px; overflow:auto; float:right; margin-top:175px; border:1px solid #ccc; border-width:4px 4px 4px 4px; padding:0;}
#scroller b#thumbs a {display:block; float:left; margin:3px 10px 1px 3px; background:#f8f8ff; width:50px; height:50px; border:1px solid #000;}
#scroller b#thumbs a img {width:50px; height:50px; border:0;}


#scroller b#thumbs a:hover {border:1px dotted #ccc; background:#fff;}
#scroller b#thumbs a:active, #scroller b#thumbs a:focus {border:1px solid #fff; background:#fff; outline:0;}
#scroller b#thumbs a:hover img {display:block; position:absolute; background:#aaa; z-index:100;}
#scroller b#thumbs a:active img, #scroller b#thumbs a:focus img {display:block; position:absolute; background:#aaa; z-index:100;}


#scroller b#thumbs a:hover img.hr {width:200px; height:150px; left:23px; top:7px; border:1px solid #333;}
#scroller b#thumbs a:hover img.vt {width:120px; height:160px; left:65px; top:7px; border:1px solid #333;}


#scroller b#thumbs a:active img.hr, #scroller b#thumbs a:focus img.hr {width:640px; height:480px; left:260px; top:-82px; border:1px solid #333;}
#scroller b#thumbs a:active img.vt, #scroller b#thumbs a:focus img.vt {width:416.25px; height:555px; left:365px; top:-82px; border:1px solid #333;}


</style><!--[if IE]>
<style type="text/css">
#scroller {width:220px; height:160px; position:relative;padding:5px 20px; background:#ffffe0; float:left;} /*background:#ffffe0;*/
#scroller b#thumbs {background:#ffffff; display:block; width:220px; height:120px; overflow:auto; float:right; margin-top:175px; border:1px solid #ccc; border-width:4px 4px 4px 4px; padding:0;}
#scroller b#thumbs a {display:block; float:left; margin:3px 10px 10px 3px; background:#f8f8ff; width:50px; height:50px; border:1px solid #000;}
#scroller b#thumbs a img {width:50px; height:50px; border:0;}


#scroller b#thumbs a:hover {border:1px dotted #ccc; background:#fff url(click_on.gif);}
#scroller b#thumbs a:active, #scroller b#thumbs a:focus {border:1px solid #fff; background:#fff; outline:0;}
#scroller b#thumbs a:hover img {display:block; position:absolute; background:#aaa; z-index:500;}
#scroller b#thumbs a:active img, #scroller b#thumbs a:focus img {display:block; position:absolute; background:#aaa; z-index:100;}


#scroller b#thumbs a:hover img.hr {width:200px; height:150px; left:32px; top:7px; border:1px solid #333;}
#scroller b#thumbs a:hover img.vt {width:120px; height:160px; left:65px; top:7px; border:1px solid #333;}


#scroller b#thumbs a:active img.hr, #scroller b#thumbs a:focus img.hr {width:640px; height:480px; left:260px; top:-84px; border:1px solid #333;}
#scroller b#thumbs a:active img.vt, #scroller b#thumbs a:focus img.vt {width:393.75px; height:525px; left:375px; top:-83px; border:1px solid #333;}


#scroller  b {
scrollbar-arrow-color: #333;
scrollbar-3dlight-color: #bbb;
scrollbar-highlight-color: #eee;
scrollbar-face-color: #bbb;
scrollbar-shadow-color: #eee;
scrollbar-darkshadow-color: #bbb;
scrollbar-track-color: #fff;
}
</style>
<![endif]-->
<style type="text/css">
  body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 2em 0;
    text-align: center;  /* Zentrierung im Internet Explorer */
  }


  	div#Seite {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 900px;
    padding: 0;
    background: #ffffe0;
    border: 2px ridge silver;
  }
 
  div#titel {
    font-size: 1.5em;
    margin: 0; padding: 0.7em;
    text-align: center;
    background-color:#FF9933;
    border-bottom: 1px solid silver;
  }


  div#Inhalt {
  	float:left;
  	width: 65%;
    margin: 0 0 1em 0;
    padding: 0 0;
  }
  * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
    margin-bottom: 0;
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
    color: navy;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }
  p#Fusszeile {
  	height: 65px;
    clear: both;
    font-size: 0.83em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color: #FF9933;
    border-top: 2px ridge silver;
  }

</style></head><body>






[img]http://img175.imageshack.us/img175/135/bild1to1.jpg[/img]
<div id="Seite">
<div id="titel">
 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>






  <div id="scroller" ><span></span> <b id="thumbs"> [url='#nogo'][img]http://img175.imageshack.us/img175/135/bild1to1.jpg[/img][/url] 
    <font size="1">[b]Zur Vergrößerung einfach über ein Bild fahren. Beim 
    anklicken eines der kleinen Bilder öffnet sich eine XXL-Ansicht, die sie mit 
    einem Klick außerhalb des Bildes wieder schließen können[/b]</font> [/b]</div>
  <div id="Inhalt">
    <h2><center>XXXXXXXXXXXXXXXXX</center></h2>



    


[b]XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX[/b]</p>



XXXXXXXXXXXXXXXXXXXXXXXXXXX</p>



	


[b]<center>XXXXXXXXXXXXXXXXXXX</center>[/b]</p>
  </div>
  <p id="Fusszeile">
[b]XXXXXXXXXXXXXXXXXXXXXXXXX[/b]</p>
</div>


</body></html>

Alles anzeigen

SO wenn ich das lokal teste sieht das 2mal toll aus mit FireFox und mit IE....
Wenn ich das aber hochlade is das vergrößerte Bild bei IE in dem kleinen Kasten und nich außerhalb, sieht scheiße aus und ich bekomms einfach nich weg. Kann mir einer helfen, wäre echt nett...

Tags