Fotostreifen weicht in IE ab!

synaptic

und ich sehe, dass es alles nichts bringt, ohne selber am code zu wurschteln
ich muss sagen dein code ist sub-optimal..
aber ich hab mich dem mal etwas angenommen, auch wenn meine methode evtl hier nicht die beste ist, so funktioniert sie im ff und ie8

HTML

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






<meta name="description" content="Homepage der Marktmusikkapelle 
Aurolzmünster"> 
<meta name="author" content="MMK Aurolzmünster"> 
<meta name="keywords" content="[Marktmusikkapelle, Aurolzmünster, 
Blasmusikverband, Jungendmusik]"> 
<meta name="date" content="[2009-09]">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">


<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="content-language" content="de">
<title>Jahreshauptversammlung 09</title>
<link rel="stylesheet" href="Jahreshauptversammlung09-Dateien/site.css">
<style type="text/css">
a.type1:link { color:#064293; }
a.type1:visited { color:#064293; }


#photo_strip {
    width:630px; 
    height:435px;
    margin:0 auto 20px auto;
    overflow:auto;
}
#container {
    margin:0; 
    padding:0; 
    height:418px; 
    width:8000px;
    color:#222;
    background:#fff;
}
#container ul {
    margin:0; 
    padding:0; 
    list-style:none;
}
#container ul li {
    float:left;
    padding:0 15px; 
    background:#fff; 
    border-bottom:1px solid #888; 
    vertical-align:top;
}
.inlistWrap{
    width:430px;
    height:380px;
}
#container ul li img {
    border:1px solid #555; 
    margin: 30px 0 10px 0;
}
#container p {
    margin:0; 
    padding:5px 0; 
    font-size:11px;
}
</style>


<!--[if lte IE 7]>
<style>
#container {
width:630px;
scrollbar-arrow-color: #eee;
scrollbar-3dlight-color: #2672A3;
scrollbar-highlight-color: #eee;
scrollbar-face-color: #2672A3;
scrollbar-shadow-color: #eee;
scrollbar-darkshadow-color: #2672A3;
scrollbar-track-color: #888;
}
#container ul li {display:inline; zoom:1; height:390px;}
* html #container {height:470px; he\ight:430px;}
</style>
<![endif]-->


</head><body leftmargin="0" topmargin="0" marginheight="0" 
marginwidth="0">
<table width="980" align="center" bgcolor="#ffffff" border="0" 
cellpadding="10" cellspacing="0">
  <tbody><tr>
    <td><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tbody><tr>
        <td valign="top" align="left"><table width="100%" 
background="Jahreshauptversammlung09-Dateien/h_bg.gif" border="0" 
cellpadding="0" cellspacing="0">
          <tbody><tr>    
            <td valign="top" width="79%" align="left"><table 
width="100%" border="0" cellpadding="0" cellspacing="0">
              <tbody><tr>
                <td height="30">&nbsp;</td>
              </tr>
              <tr>
                <td><a name="Seitenanfang"><span class="style8">Marktmusikkapelle</span></a></td>
              </tr>
              <tr>
                <td><span class="style5">Aurolzmünster</span></td>
              </tr>
                            <tr>
                <td><span class="style5">&nbsp;</span></td>
              </tr>
                            <tr>
                <td align="center"><img 
src="Jahreshauptversammlung09-Dateien/Fotoleiste.jpg" alt="Fotoleiste"><img
 src="Jahreshauptversammlung09-Dateien/Fotoleiste2.jpg" 
alt="Fotoleiste2"></td>
              </tr>

            </tbody></table></td>
            <td valign="top" width="9%" align="left"><img 
src="Jahreshauptversammlung09-Dateien/Musilogo_neu_passend.jpg" alt="" 
width="303" height="162"></td>
          </tr>

          <tr>
            <td colspan="3" valign="top" align="left" bgcolor="#ffffff"><img
 src="Jahreshauptversammlung09-Dateien/spacer.gif" alt="" width="1" 
height="7"></td>
            </tr>
        </tbody></table></td>
      </tr>
      <tr>
        <td valign="top" align="left"><table width="100%" border="0" 
cellpadding="0" cellspacing="0">
          <tbody><tr>
            <td><img src="Jahreshauptversammlung09-Dateien/box_top.jpg" 
alt="" width="978" height="10"></td>
          </tr>
          <tr>
            <td background="Jahreshauptversammlung09-Dateien/box_bg.jpg"><table
 width="100%" border="0" cellpadding="0" cellspacing="0">
                <tbody><tr>
                  <td valign="top" width="193" align="center"><table 
width="242" border="0" cellpadding="0" cellspacing="0">
                      <tbody><tr>
                        <td><table width="100%" border="0" 
cellpadding="0" cellspacing="4">
                            <tbody><tr>
                              <td><table style="border-collapse: 
collapse;" width="100%" bgcolor="#2672a3" border="1" 
bordercolor="#2e5474" cellpadding="0" cellspacing="0">
                                <tbody><tr>
                                  <td><table width="100%" border="0" 
cellpadding="0" cellspacing="0">
                                    <tbody><tr>
                                      <td width="28" align="center"><img
 src="Jahreshauptversammlung09-Dateien/note.jpg" alt="" width="14" 
height="14"></td>
                                        <td><span class="style1"><a 
href="http://aurolzmuenster.bplaced.net/Musihomepage/index.htm">Home</a></span></td>
                                    </tr>
                                  </tbody></table></td>
                                </tr>
                              </tbody></table></td>
                            </tr>
                                                        <tr>
                              <td><table style="border-collapse: 
collapse;" width="100%" bgcolor="#2672a3" border="1" 
bordercolor="#2e5474" cellpadding="0" cellspacing="0">
                                <tbody><tr>
                                  <td><table width="100%" border="0" 
cellpadding="0" cellspacing="0">
                                    <tbody><tr>
                                      <td width="28" align="center"><img
 src="Jahreshauptversammlung09-Dateien/note.jpg" alt="" width="14" 
height="14"></td>
                                      <td><span class="style1"><a 
href="http://aurolzmuenster.bplaced.net/Musihomepage/Wir_ueber_uns.htm">Über
 die Musikkapelle</a></span></td>
                                    </tr>
                                  </tbody></table></td>
                                </tr>
                              </tbody></table></td>
                            </tr>
                                                        <tr>
                              <td><table style="border-collapse: 
collapse;" width="100%" bgcolor="#2672a3" border="1" 
bordercolor="#2e5474" cellpadding="0" cellspacing="0">
                                <tbody><tr>
                                  <td><table width="100%" border="0" 
cellpadding="0" cellspacing="0">
                                    <tbody><tr>
                                      <td width="28" align="center"><img
 src="Jahreshauptversammlung09-Dateien/note.jpg" alt="" width="14" 
height="14"></td>
                                      <td><span class="style1"><a 
href="http://aurolzmuenster.bplaced.net/Musihomepage/Mitglieder.htm">Mitglieder</a></span></td>
                                    </tr>
                                  </tbody></table></td>
                                </tr>
                              </tbody></table></td>
                            </tr>
                            <tr>
                              <td><table style="border-collapse: 
collapse;" width="100%" bgcolor="#2672a3" border="1" 
bordercolor="#2e5474" cellpadding="0" cellspacing="0">
                                <tbody><tr>
                                  <td><table width="100%" border="0" 
cellpadding="0" cellspacing="0">
                                      <tbody><tr>
                                        <td width="28" align="center"><img
 src="Jahreshauptversammlung09-Dateien/note.jpg" alt="" width="14" 
height="14"></td>
                                        <td><span class="style1"><a 
href="http://aurolzmuenster.bplaced.net/Musihomepage/Probehoeren.htm">Probehören</a></span></td>
                                      </tr>
                                  </tbody></table></td>
                                </tr>
                              </tbody></table></td>
                            </tr>
                            <tr>
                              <td><table style="border-collapse: 
collapse;" width="100%" bgcolor="#2672a3" border="1" 
bordercolor="#2e5474" cellpadding="0" cellspacing="0">
                                <tbody><tr>
                                  <td><table width="100%" border="0" 
cellpadding="0" cellspacing="0">
                                      <tbody><tr>
                                        <td width="28" align="center"><img
 src="Jahreshauptversammlung09-Dateien/note.jpg" alt="" width="14" 
height="14"></td>
                                        <td><span class="style1"><a 
href="http://aurolzmuenster.bplaced.net/Musihomepage/Fotoalbum.htm">Fotoalbum</a></span></td>
                                      </tr>
                                  </tbody></table></td>
                                </tr>
                              </tbody></table></td>
                            </tr>
                            <tr>
                              <td><table style="border-collapse: 
collapse;" width="100%" bgcolor="#2672a3" border="1" 
bordercolor="#2e5474" cellpadding="0" cellspacing="0">
                                <tbody><tr>
                                  <td><table width="100%" border="0" 
cellpadding="0" cellspacing="0">
                                      <tbody><tr>
                                        <td width="28" align="center"><img
 src="Jahreshauptversammlung09-Dateien/note.jpg" alt="" width="14" 
height="14"></td>
                                        <td><span class="style1"><a 
href="http://aurolzmuenster.bplaced.net/Musihomepage/Terminkalender.htm">Terminkalender
 </a></span></td>
                                      </tr>
                                  </tbody></table></td>
                                </tr>
                              </tbody></table></td>
                            </tr>
                                                         <tr>
                              <td><table style="border-collapse: 
collapse;" width="100%" bgcolor="#2672a3" border="1" 
bordercolor="#2e5474" cellpadding="0" cellspacing="0">
                                <tbody><tr>
                                  <td><table width="100%" border="0" 
cellpadding="0" cellspacing="0">
                                      <tbody><tr>
                                        <td width="28" align="center"><img
 src="Jahreshauptversammlung09-Dateien/note.jpg" alt="" width="14" 
height="14"></td>
                                        <td><span class="style1"><a 
href="http://aurolzmuenster.bplaced.net/Musihomepage/Kontakt.htm">Kontakt</a></span></td>
                                      </tr>
                                  </tbody></table></td>
                                </tr>
                              </tbody></table></td>
                            </tr>
                            <tr>
                              <td><table style="border-collapse: 
collapse;" width="100%" bgcolor="#2672a3" border="1" 
bordercolor="#2e5474" cellpadding="0" cellspacing="0">
                                <tbody><tr>
                                  <td><table width="100%" border="0" 
cellpadding="0" cellspacing="0">
                                      <tbody><tr>
                                        <td width="28" align="center"><img
 src="Jahreshauptversammlung09-Dateien/note.jpg" alt="" width="14" 
height="14"></td>
                                        <td><span class="style1">
                                                                                <div>
<a target="_blank" href="http://www.onlex.de/_gbuch.php4?username=klari">Ins
 Gästebuch eintragen...</a></div></span></td>
                                      </tr>
                                  </tbody></table></td>
                                </tr>
                              </tbody></table></td>
                            </tr>
                        </tbody></table></td>
                      </tr>
                      <tr>
                      </tr>

                      <tr>
                        <td valign="top" align="center">
                                                </td>
                      </tr>
                  </tbody></table></td>

                                    <!-- Hauptfenster mit Fotos -->

                  <td valign="top" align="center"><table width="92%" 
border="0" cellpadding="0" cellspacing="0" height="100%">
                      <tbody><tr>
                        <td height="35"><span class="style10">Unser 
Fotoalbum: Jahreshauptversammlung</span></td>
                      </tr>
                                            <tr><td><span class="style12">(Einlesen der Fotos kann einige
 Sekunden dauern...)</span></td></tr> 
                                             <tr><td>&nbsp; </td></tr>
                      <tr>
                        <td class="style12">
                                                <div id="photo_strip">
<div id="container">
<ul>
<li><div class="inlistWrap"><img src="Jahreshauptversammlung09-Dateien/Jahreshauptversammlung.jpg" alt="Jahreshauptversammlung" height="300px"><p>#1 </p></div></li>
<li><div class="inlistWrap"><img src="Jahreshauptversammlung09-Dateien/Jahreshauptversammlung_2.jpg" alt="Jahreshauptversammlung" height="300px"><p>#2 </p></div></li>
<li><div class="inlistWrap"><img src="Jahreshauptversammlung09-Dateien/Jahreshauptversammlung_3.jpg" alt="Jahreshauptversammlung" height="300px"><p>#3 </p></div></li>
<li><div class="inlistWrap"><img src="Jahreshauptversammlung09-Dateien/Jahreshauptversammlung_4.jpg" alt="Jahreshauptversammlung" height="300px"><p>#4 Unser Buffet - echt 
lecker!</p></div></li>
<li><div class="inlistWrap"><img src="Jahreshauptversammlung09-Dateien/Jahreshauptversammlung_5.jpg" alt="Jahreshauptversammlung" height="300px"><p>#5 </p></div></li>
<li><div class="inlistWrap"><img src="Jahreshauptversammlung09-Dateien/Jahreshauptversammlung_6.jpg" alt="Jahreshauptversammlung" height="300px"><p>#6 </p></div></li>
<li><div class="inlistWrap"><img src="Jahreshauptversammlung09-Dateien/Jahreshauptversammlung_7.jpg" alt="Jahreshauptversammlung" height="300px"><p>#7 </p></div></li>
<li><div class="inlistWrap"><img src="Jahreshauptversammlung09-Dateien/Jahreshauptversammlung_8.jpg" alt="Jahreshauptversammlung" height="300px"><p>#8 </p></div></li>
<li><div class="inlistWrap"><img src="Jahreshauptversammlung09-Dateien/Jahreshauptversammlung_9.jpg" alt="Jahreshauptversammlung" height="300px"><p>#9 </p></div></li>
<li><div class="inlistWrap"><img src="Jahreshauptversammlung09-Dateien/Jahreshauptversammlung_10.jpg" alt="Jahreshauptversammlung" height="300px"><p>#10 </p></div></li>
<li><div class="inlistWrap"><img src="Jahreshauptversammlung09-Dateien/Jahreshauptversammlung_11.jpg" alt="Jahreshauptversammlung" height="300px"><p>#11 </p></div></li>
<li><div class="inlistWrap"><img src="Jahreshauptversammlung09-Dateien/Jahreshauptversammlung_12.jpg" alt="Jahreshauptversammlung" height="300px"><p>#12 </p></div></li>
<li><div class="inlistWrap"><img src="Jahreshauptversammlung09-Dateien/Jahreshauptversammlung_13.jpg" alt="Jahreshauptversammlung" height="300px"><p>#13 Musikanten können auch kreativ sein!</p></div></li>
</ul>
</div>
</div>    
                          </td></tr>
                     <tr align="center"><td class="style3"><a 
class="type1" 
href="http://aurolzmuenster.bplaced.net/Musihomepage/Fotoalbum.htm"><u>Zurück
 zur Jahresübersicht!</u></a></td></tr>
                  <tr><td>&nbsp; </td></tr>
                                    </tbody></table></td>
                </tr>
            </tbody></table></td>
          </tr>
          <tr>
            <td><img 
src="Jahreshauptversammlung09-Dateien/box_bottom.jpg" alt="" width="978"
 height="7"></td>
          </tr>
        </tbody></table></td>
      </tr>
      <tr>
        <td align="center" height="30"><span class="style11">Copyright ©
 2006 MMK Aurolzmünster. All rights reserved. </span></td>
      </tr>
    </tbody></table></td>
  </tr>
</tbody></table>
</body></html>

Alles anzeigen

musste halt entweder nur die änderungen rausholen oder die pfade anpassen, ich hab deinen quelltext über "seite speichern unter..." geholt, da von dir ja hier keinerlei spezieller quelltext geboten wurde

klari

Hallo!

Wow, daaaaaaaaaaaanke für die Mühe, die du dir da gemacht hast. Ich hätte meine Quelltext schon raufladen können, hat aber niemand gefragt und ich hab ehrlich gesagt nicht drangedacht, tut mir Leid.

Hab jetzt alles geändert, aber leider zeigt es jetzt immer noch einen horizontalen UND einen vertikalen Scrollbalken an im HTML-Kit - im Firefox passt's jetzt, außer dass der Fotostreifen länger ist als Fotos da sind. Und warum zeigt HTML-Kit was anderes an als der Firefox?

synaptic

weil die das anders interpretieren.. ich hab jetzt auch net auf doctypes oder so geachtet und es auch nur im ie8 gechecked..
evtl musste halt für die anderen browser mal n paar hacks für de abmessungen einbaun
und da eben mit anderen werten agieren

klari

Puh, ich befürchte, das übersteigt meine Fähigkeiten. Ich hab nicht gedacht, dass das so kompliziert wird. Notfalls muss es halt im IE 8 abwärts laufen...

synaptic

ja ich finde diese kruden hacks auch voll fürn arsch, da lieber ne anständige browserweiche in php geschrieben und nen eigenes stylesheet eingebunden, das brauch keine hacks und funktioniert trotzdem gut

wobei ich deine seite eh ganz anders coden würde.. so tablefi**erei is echt fürn hintern

klari

Mhm, tut mir Leid, aber besser kann ich's (im Moment) nicht. Und hätt auch gar keine Zeit zum Neu-Machen, zudem hab ich lang genug dran gearbeitet...

synaptic

ja muss dir ja net leid tun und ich will die zeit die du aufgewendet hast sowie deine leistung auch nicht schmälern...
besorg dir mal den ieTester, der is relativ zuverlässig.. damit kannste mal testen wie es geht/aussieht in den ganzen IEs

aber wenn du die page von anfang an mit divs und css machst haste weitaus weniger code für ein gleiches ergebnis

klari

Okay...
Wusste gar nicht, dass es sowas wie den IE-Tester gibt, danke...

Tags