"Nervöse Bilder" im IE

Status
Nicht offen für weitere Antworten.

buddha

Erfahrenes Mitglied
Hallo,
Habe ein kleines Fotoalbum, dies funtioniert auch im FF & in IE, aber im IE flackern die Bilder man muß erstmal eine Position finden damit damit man sich die Bilder auch anschauen kann.

Code:
#fotoshow {
position: absolute; 
width:850px;
}
#foto {
width:240px; 
float:left;}
#foto a {
display:block; 
float:right; 
margin:0 0 5px 5px; 
width:100px; 
height:75px; 
border:1px solid #ffffff;
}
#foto a img {
width:100px; 
height:75px; 
border:0;}
#foto a:hover {
border-color: #003399;
}
#foto a:hover img {
position:absolute; 
width:auto; 
height:auto; 
left:260px; 
top:0; 
border:1px solid  #ffffff;
}

body {
background-color: #000000;
}
body,td,th {
color: #FFFFFF;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Saxonia Biker</title>
<link href="../../../CSS/fotoshow.css" rel="stylesheet" type="text/css" />
<link href="../../../CSS/navigationfoto.css" rel="stylesheet" type="text/css" />
<link href="../../../CSS/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="fotoshow"> <em id="foto"> <a href="1"><img src="fotosbig/P1020218.jpg" alt="" /></a> <a href="2"><img src="fotosbig/P1020221.jpg" alt="" /></a> <a href="3"><img src="fotosbig/P1020222.jpg" alt="" /></a> <a href="4"><img src="fotosbig/P1020223.jpg" alt="" /></a> <a href="5"><img src="fotosbig/P1020225.jpg" alt="" /></a> <a href="6"><img src="fotosbig/P1020226.jpg" alt="" /></a> <a href="7"><img src="fotosbig/P1020228.jpg" alt="" /></a> <a href="8"><img src="fotosbig/P1020229.jpg" alt="" /></a> <a href="9"><img src="fotosbig/P1020230.jpg" alt="" /></a> <a href="10"><img src="fotosbig/P1020232.jpg" alt="" /></a> <a href="11"><img src="fotosbig/P1020233.jpg" alt="" /></a> <a href="12"><img src="fotosbig/P1020234.jpg" alt="" /></a></em></div>
</div>
</div>
</body>
</html>
 
Hi,

ohne die eingebundenen Grafiken lässt sich da momentan nicht viel zu sagen. Ein Link zur Problemseite wäre da ganz hilfreich.

Und von welcher IE-Version sprichst du?
 
Hi,
Der IE ist v7, zu den Bildern muss ich sagen das ich die Fotos nicht verkleinert, sondern die Originalbilder "reingequetscht" habe. Wohlmöglich kommt der IE nicht damit klar :confused:
(Seite ist offline)
 
Zuletzt bearbeitet:
Wie gesagt, ein Link zu deiner Seite wäre da ganz hilfreich, denn hellsehen können wir hier nicht, was den IE7 nun konkret stört.
 
Hi,
Die Seite ist Online, habe da aber jetzt das Problem das die Originalfotos beim mouseover nicht angezeigt werden sondern nur die thumbs?
- http://www.lenkercrew.de -
PS.: die Seite wird immer noch überarbeitet
Code:
#fotoshow {
position: absolute; 
width:900px;
}
#foto {
width:250px;
float:left;}
#foto a {
display:block; 
float: left; 
margin:0 0 5px 5px; 
width:75px; 
height:50px; 
border:1px solid #ffffff;
}
#foto a img {
width:75px; 
height:50px; 
border:0;}
#foto a:hover {
border-color: #003399;
}
#foto a:hover img {
position:absolute; 
width:auto; 
height:auto; 
left:260px; 
top:0; 
border:1px solid  #ffffff;
}
.thumb { width:300px; height:75px;}
body {
background-color: #000000;
}
body,td,th {
color: #FFFFFF;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Saxonia Biker</title>
<link href="../../../CSS/fotoshow.css" rel="stylesheet" type="text/css" />
<link href="../../../CSS/navigationfoto.css" rel="stylesheet" type="text/css" />
<link href="../../../CSS/layout.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon"  href="../../../lenkercrew1.ico" type="image/x-icon" />
</head>
<body>
<div id="container">
  <h2>Saxonia Bikers</h2>
  <h3>&nbsp;</h3>
  <br />
  <div id="fotoshow"> <em id="foto"> <a href="fotosbig/P1020218.jpg"  class="thumb"><img src="thumbnails/P1020218.jpg" alt="" /></a> <a href="#"><img src="thumbnails/P1020221.jpg" alt="" /></a> <a href="#"><img src="thumbnails/P1020222.jpg" alt="" /></a> <a href="#"><img src="thumbnails/P1020223.jpg" alt="" /></a> <a href="#"><img src="thumbnails/P1020225.jpg" alt="" /></a> <a href="#"><img src="thumbnails/P1020226.jpg" alt="" /></a> <a href="#"><img src="thumbnails/P1020228.jpg" alt="" /></a> <a href="#"><img src="thumbnails/P1020229.jpg" alt="" /></a> <a href="#"><img src="thumbnails/P1020230.jpg" alt="" /></a> <a href="#"><img src="thumbnails/P1020232.jpg" alt="" /></a> <a href="#"><img src="thumbnails/P1020233.jpg" alt="" /></a> <a href="#"><img src="thumbnails/P1020234.jpg" alt="" /></a></em></div>
  <div class="navisaxonia">
    <ul id="navi">
      <li class="borderleft"><a href="../Treffen/RoadEagle/Album/index.htm">Road Eagle</a></li>
      <li><a href="../Treffen/Wittichenau2007/index.htm">Wittichenau</a></li>
      <li><a href="../Treffen/Zeitz2007/index.htm">Zeitz</a></li>
      <li><a href="../Treffen/Krumhermsdorf2007/index.htm">Krumhermsdorf</a></li>
      <li class="borderright"><a href="../../index.html">&Uuml;bersicht</a></li>
    </ul>
  </div>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Hi,

tausch mal für das DIV #fotoshow die absolute gegen eine relative Positionierung aus:

Code:
#fotoshow {
position: relative;
width:900px;
}
 
Status
Nicht offen für weitere Antworten.
Zurück