nicht angemeldet
Hallo,
der inhalt eines div wird per overflow:hidden abgeschnitten. unterhalb dieses divs befinden sich einige links. also die links befinden sich auf der z-achse betrachetet über den nicht sichtbaren bereich des div.
im safari wird beim klick auf einer der links der nicht sichtbare inhalt des div fokusiert anstatt den link aufzurufen. also die links sind förmlich tot, für die maus nicht vorhanden. die maus zeigt auch keinen pointer an obwohl href in den links definiert ist.
werden diese links außerhalb des nicht sichtbaren bereichs des divs positioniert funktionieren sie wieder.
hier code:
<!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></title>
<script language="JavaScript" type="text/javascript" src="../js/scroll.js"></script>
<script language="JavaScript" type="text/javascript" ></script>
<style type="text/css">
<!--
@import url("../styles/styles.css");
-->
</style>
</head>
<body onload="initScrollPane();">
<div id="container">
<div id="headInfo">
<h1 class="blank"><a href="../">Anja Weber Fotografie.</a></h1>
</div>
<div id="topNav">
<ul>
<li><a href="../portfolio" id="tn1"><img src="../img/navi/portfolio.gif" alt="Portfolio" width="56" height="23" border="0" /></a></li>
<li><a href="../projekte" id="tn2"><img src="../img/navi/projekte.gif" alt="Projekte" width="52" height="23" border="0" /></a></li>
<li><a href="../referenzen" id="tn3"><img src="../img/navi/referenzen.gif" alt="Referenzen" width="70" height="23" border="0" /></a></li>
<li><a href="../information" id="tn4"><img src="../img/navi/info.gif" alt="Information" width="75" height="23" border="0" /></a></li>
<li><a href="../kontakt" id="tn5"><img src="../img/navi/kontakt.gif" alt="Kontakt" width="51" height="23" border="0" /></a></li>
</ul>
</div>
<div id="main">
<div id="titel">
<h2>Projekte</h2>
</div>
<div style="clear:left"></div>
<div id="look">
<div id="projectList" style="position: relative; height: 500px; overflow:hidden;">
<div id="frame" style="position: relative; top: 0px;" >
<div class="projectListItem" id="a1" style="z-index:1;"><!-- -->
<a href="#"><img src="../img/dummy.jpg" alt="Bildtitel" width="120" height="80" border="0" align="right" /></a>
<h3><a href="#">Projektheadline</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<a href="#">Go to project</a></p>
<div style="clear:left"></div>
</div><!-- -->
<div class="projectListItem" id="a2"><!-- -->
<img src="../img/dummy.jpg" alt="Bildtitel" width="120" height="80" border="0" align="right" />
<h3><a href="#">Projektheadline</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<a href="#">Go to project</a></p>
<div style="clear:left"></div>
</div><!-- -->
<div class="projectListItem" id="a3"><!-- -->
<img src="../img/dummy.jpg" alt="Bildtitel" width="120" height="80" border="0" align="right" />
<h3><a href="#">Projektheadline</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<a href="#">Go to project</a></p>
<div style="clear:left"></div>
</div><!-- -->
<div class="projectListItem" id="a4"><!-- -->
<img src="../img/dummy.jpg" alt="Bildtitel" width="120" height="80" border="0" align="right" />
<h3><a href="#">Projektheadline</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<a href="#">Go to project</a></p>
<div style="clear:left"></div>
</div><!-- -->
<div class="projectListItem" id="a5"><!-- -->
<img src="../img/dummy.jpg" alt="Bildtitel" width="120" height="80" border="0" align="right" />
<h3><a href="#">Projektheadline</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<a href="#">Go to project</a></p>
<div style="clear:left"></div>
</div><!-- -->
<div class="projectListItem" id="a6"><!-- -->
<img src="../img/dummy.jpg" alt="Bildtitel" width="120" height="80" border="0" align="right" />
<h3><a href="#">Projektheadline</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<a href="#">Go to project</a></p>
<div style="clear:left"></div>
</div><!-- -->
<div class="projectListItem" id="a7"><!-- -->
<img src="../img/dummy.jpg" alt="Bildtitel" width="120" height="80" border="0" align="right" />
<h3><a href="#">Projektheadline</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<a href="#">Go to project</a></p>
<div style="clear:left"></div>
</div><!-- -->
<div class="projectListItem" id="a8"><!-- -->
<img src="../img/dummy.jpg" alt="Bildtitel" width="120" height="80" border="0" align="right" />
<h3><a href="#">Projektheadline</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<a href="#">Go to project</a></p>
<div style="clear:left"></div>
</div><!-- -->
</div>
</div>
<div id="scroll"><a onmouseup="scrollDown(document.getElementById('frame'));" id="down" href="javascript:void(null);">runterscrollen</a> | <a onmouseup="scrollUp(document.getElementById('frame'));" id="up" href="javascript:void(null);">raufscrollen</a>
</div>
</div>
<!-- -->
<div id="rightCol">Rechte Spalte </div>
<!-- -->
<div id="out"></div>
<div style="clear:left"></div>
</div>
</div>
<div id="footer">
<ul>
<li>© 2007 Anja Weber</li>
<li><a href="#" id="impressum">Impressum</a></li>
</ul>
<div style="clear:left"></div>
</div>
</body>
</html>