Liebling, ich hab' meine Thumbnails geschrumpft!! (Problem mit Highslide in IE)

Attaq

Hallo zusammen

Bin neu hier. Versuche möglichst, allen geschriebenen und ungeschriebenen Forenregeln gerecht zu werden.

Ich bastle an meiner eigenen Website und eigne mir dabei erste CSS-Kenntnisse an.

Auf dieser Seite habe ich die Highslide Gallery eingebunden:
http://spielwiese.jumpman23.ch/foto.htm

Im Firefox präsentiert sich mir alles wünderschön wie es sein sollte, nämlich so:
[Blockierte Grafik: http://i79.photobucket.com/albums/j122/At…ous/foto_ff.jpg]

Im IE schrumpft es mir die Thumbnail-Ansicht jedoch übelst zusammen:
[Blockierte Grafik: http://i79.photobucket.com/albums/j122/At…ous/foto_ie.jpg]

Woher könnte dieser unschöne Effekt wohl kommen und vor allem, wie bringe ich das denn richtig hin?

Zähle auf eure Hilfe! Danke schön!

Hier noch der html-Code der Seite:

HTML

<html>
<head>
<title>spielwiese</title>
<base target="_self">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
</head>
<body>
<div id="hauptdiv"; style="position: absolute; width:780px; height:624px; top:50%; left:50%; margin-left:-390px; margin-top:-312px;">
<div class="highslide-gallery" style="position:absolute; left:65px; top:93px; width:650px;">
 <ul>
 <li>
 <a href="foto/DSC04002.jpg" class="highslide" 
   onclick="return hs.expand(this, config1 )">
  <img src="foto/DSC04002_th.jpg"  alt=""/>
 </a>
 </li>
 <li>
 <a href="foto/DSC04014.jpg" class="highslide" 
   onclick="return hs.expand(this, config1 )">
  <img src="foto/DSC04014_th.jpg"  alt=""/>
 </a>
 </li>
 <li>
 <a href="foto/DSC04015.jpg" class="highslide" 
   onclick="return hs.expand(this, config1 )">
  <img src="foto/DSC04015_th.jpg"  alt=""/>
 </a>
 </li>
 <li>
 <a href="foto/DSC04021.jpg" class="highslide" 
   onclick="return hs.expand(this, config1 )">
  <img src="foto/DSC04021_th.jpg"  alt=""/>
 </a>
 </li>
 <li>
 <a href="foto/DSC04078.jpg" class="highslide" 
   onclick="return hs.expand(this, config1 )">
  <img src="foto/DSC04078_th.jpg"  alt=""/>
 </a>
 </li>
 <li>
 <a href="foto/DSC04079.jpg" class="highslide" 
   onclick="return hs.expand(this, config1 )">
  <img src="foto/DSC04079_th.jpg"  alt=""/>
 </a>
 </li>
 <li>
 <a href="foto/DSC04194.jpg" class="highslide" 
   onclick="return hs.expand(this, config1 )">
  <img src="foto/DSC04194_th.jpg"  alt=""/>
 </a>
 </li>
 <li>
 <a href="foto/DSC04198.jpg" class="highslide" 
   onclick="return hs.expand(this, config1 )">
  <img src="foto/DSC04198_th.jpg"  alt=""/>
 </a>
 </li>
 <li>
 <a href="foto/DSC04292.jpg" class="highslide" 
   onclick="return hs.expand(this, config1 )">
  <img src="foto/DSC04292_th.jpg"  alt=""/>
 </a>
 </li>
 <li>
 <a href="foto/DSC04293.jpg" class="highslide" 
   onclick="return hs.expand(this, config1 )">
  <img src="foto/DSC04293_th.jpg"  alt=""/>
 </a>
 </li>
 <li>
 <a href="foto/DSC04298.jpg" class="highslide" 
   onclick="return hs.expand(this, config1 )">
  <img src="foto/DSC04298_th.jpg"  alt=""/>
 </a>
 </li>
 <li>
 <a href="foto/DSC04371.jpg" class="highslide" 
   onclick="return hs.expand(this, config1 )">
  <img src="foto/DSC04371_th.jpg"  alt=""/>
 </a>
 </li>
 <li>
 <a href="foto/DSC04450.jpg" class="highslide" 
   onclick="return hs.expand(this, config1 )">
  <img src="foto/DSC04450_th.jpg"  alt=""/>
 </a>
 </li>
 <li>
 <a href="foto/DSC04453.jpg" class="highslide" 
   onclick="return hs.expand(this, config1 )">
  <img src="foto/DSC04453_th.jpg"  alt=""/>
 </a>
 </li>
 <li>
 <a href="foto/DSC04455.jpg" class="highslide" 
   onclick="return hs.expand(this, config1 )">
  <img src="foto/DSC04455_th.jpg"  alt=""/>
 </a>
 </li>
 </ul>
 <div style="clear:both"></div></div>
  <table id="menue" border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td width="25%">
        <p align="center"><a class="menuelink" href="index.htm"><font size="5">start</font></a></td>
      <td width="25%">
        <p align="center"><a class="menuelink" id="linkaktiv" href="foto.htm"><font size="5">foto</font></a></td>
      <td width="25%">
        <p align="center"><a class="menuelink" href="audio.htm"><font size="5">audio</font></a></td>
      <td width="25%">
        <p align="center"><a class="menuelink" href="video.htm"><font size="5">video</font></a></td>
    </tr>
  </table>
</body>
</html>

Alles anzeigen

Und hier mein CSS-File:

Code

body {
  background: #000000;
}
p {
  font-family: verdana, arial, sans-serif;
  font-size: 15px;
  color: #999999;
}
a:link {
  color: #FFFFFF;
  text-decoration: none;
}
a:visited {
  color: #FFFFFF;
  text-decoration: none;
}
a:active {
  color: #FFFFFF;
  text-decoration: none;
}
a:hover {
  color: #FFFFFF;
  text-decoration: none;
}
.menuelink:link {
  color: #FFFFFF;
  background: #000000;
  display: block;
  width: 93%;
}
.menuelink:visited {
  color: #FFFFFF;
  background: #000000;
  display: block;
  width: 93%;
}
.menuelink:active {
  color: #FFFFFF;
  background: #262626;
  display: block;
  width: 93%;
}
.menuelink:hover {
  color: #FFFFFF;
  background: #1A1A1A;
  display: block;
  width: 93%;
}
.menuelink {
  text-decoration: none;
}
#linkaktiv {
  color: #FFFFFF;
  background: #262626;
  display: block;
  width: 93%;
}
#linkaktiv:hover {
  color: #FFFFFF;
  background: #1A1A1A;
  display: block;
  width: 93%;
}
#hauptdiv {
  background-image: url(gfx_frame.jpg);
  background-repeat: no-repeat;
  background-position: 50% 0%;
}
#menue {
  position:absolute;
  left: 0px;
  bottom: 0px;

Alles anzeigen

Falls mehr Infos benötigt, einfach sagen.

Attaq

Oha, verschoben ... Dann liegt das Problem also weder bei CSS noch html, wie ich angenommen habe? Hmmm ...

synaptic

in der highslide.css is nen highslide UL LI wo du height und width auf 5px hast.. diese werte solltest du ändern...
hatte es verschoben weil ich im titel highslide.js las, daher.. ich schiebs wieder zurück, weils ja doch "nur" ein css-prob war

Attaq

Sensationell!! Danke, Synaptic!!
Hätt' ich vielleicht auch selber rausfinden können, aber manchmal steht man sich selber bisschen im Weg.

Jetzt sieht's schon VIEL besser aus!!

Einen Schönheitsfehler hat die Sache aber noch:
Die grauen Rahmen um die Thumbnails werden nicht richtig dargestellt. Sie erscheinen nur an der Unterkante der Thumbs und sind irgendwie auch dünner als sie sein sollten.

Hat da noch jemand eine Idee?

synaptic

besorg dir mal für den firefox des addon "firebug" und für den ie gibt es ab ie8 die "entwicklertools" evtl auch schon ab ie7, kein plan..
auf jeden fall kannst damit die entsprechenden styles ausfindig machen und damit experimentieren

Attaq

Ok, ich mach' mich da mal schlau. Thanx!

Tags