nicht angemeldet
Opera: overflow: hidden; legt Links lahm
Ich möchte über Vorschaubilder die vergrößerten Zielbilder ansteuern.
Die Zielbilder liegen in einem verschachtelten div:
Der äußere div (.inhalt_aussen) definiert Lage und Größe des sichtbaren Bereichs. Die inneren divs (.inhalt) werden über die Ids angesteuert. (Anker)
Stellt man für den äußeren div „overflow:hidden;“ ein, um die Scrollbalken zu unterdrücken, funktionieren im Opera die Links nicht mehr.
Im IE6 und FF gibt es keine Probleme.
Woran liegt das? Wie repariert man das?
Ob wohl jemand den Nerv hat, sich das mal anzusehen? (sh. auch http://www.gagaris.de/Op_test/op_test.html)
Den Quellcode habe ich leicht vereinfacht unten angeführt.
(um den unvermeidlichen Hinweisen auf die Schändlichkeit meines Tuns (Scrollbalken unterdrücken!) zuvorzukommen:
Wenn die Links (Anker) funktionieren, ist der Scrollbalken überflüssig!)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>pic-test</title>
<!--<script language="javascript" type="text/javascript" src="op_test.js"> </script>-->
<style type="text/css">
<!--
.picbox_aussen{
position: absolute;
left: 100px;
top: 155px;
height: 60px;
width: 600px;
border: thin solid #66FF00;
overflow: hidden;
}
.picbox_innen{ /*Diese Box soll später mittels JS in der äusseren Box bewegt werden; die äussere Box begrenzt den sichtbaren Bereich.*/
position: relative;
border: thin solid #66FF00;
}
.inhalt_aussen{
position: absolute;
left: 100px;
top: 255px;
height: 275px;
width: 680px;
border: thin solid #66FF00;
/*overflow: hidden; */
overflow: auto;
}
.inhalt {
position: relative;
width: 650px;
height: 275px;
border: thin solid #FF9900;
padding-bottom: 10px;
margin-bottom: 10px;
color: #ECE9D8;
}
-->
</style>
</head>
<body >
<div class="picbox_aussen">
<div class="picbox_innen" id="thumbs" >
<a href="#tb1"><img src="S_Drawings01.jpg"/></a>
<a href="#tb2"><img src="S_Drawings02.jpg"/></a>
<a href="#tb3"><img src="S_Drawings03.jpg"/></a>
<a href="#tb4"><img src="S_Drawings05.jpg"/></a>
</div>
</div>
<div class="inhalt_aussen">
<!--1--><div id="tb1" class="inhalt">
<img src="XL_Drawings01.jpg" width="367" height="275" />
</div>
<!--2--><div id="tb2" class="inhalt">
<img src="XL_Drawings02.jpg" width="367" height="275" />
</div>
<!--3--><div id="tb3" class="inhalt">
<img src="XL_Drawings03.jpg" width="367" height="275" />
</div>
<!--4--><div id="tb4" class="inhalt">
<img src="XL_Drawings05.jpg" width="367" height="275" />
</div>
</div><!--Ende inhalt_aussen -->
</body>
</html>