Problem mit Overflow (need Workaround)
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absolute display
auszug
bild
blocken
browser
element
entnehmen
folgendes problem
http
leute
obere bild
ordentliche beschreibung
position
problem
quellcode
sichtbar beitrag
span
tag
url
zeitdruck
-
Hi!
tag/folgendes problem">Folgendes Problem: Aufgrund von Browserkompatibilität benütze ich folgendes CSS-Script zum überblenden einer Homepage mit Bildern:
span.event img.event_big { display: none; }
span.event:hover img.event_big { position: absolute; display: block; top: 10px; left: 10px }
Das ganze sitzt in einem DIV element, welches mit folgendem CSS Script dargestellt wird:
div#body {
width: 900px;
height: 440px;
overflow: auto;
text-align: left;
}
Das Problem ist, dass das overflow Tag bewirkt im IE aber, dass die absolute position der Bilder am DIV element und nicht am Browserrand gemessen wird.
Gibts hierfür irgend eine möglichkeit, das ganze zu umgehen (abgesehen davon das ganze mit JS zu machen)???
Wäre über lösungen sehr erfreut, bin unter zeitdruck... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Leute ist das denn so schwer? Wenn ihr Hilfe braucht, dann müsst ihr doch auch das Problem anständig beschreiben, für mich ist das Problem unklar.
\"Aufgrund von Browserkompatibilität benütze ich folgendes CSS-Script zum überblenden einer Homepage mit Bildern\" - ?????? Was soll man hier verstehen. Da die Browser kompatibel sind, benutzt du CSS umd eine Homepage mit Bildern zu überblenden???????
Wenn schon keine URL dann wenigstens den HTML Auszug und eine ordentliche Beschreibung des Problems, so viel Zeit kann man sich nehmen wenn man ein Problem hat!
-
Also, hier ist mein Problem: http://theuntouchables.lima-city.de/test.html
Quellcode:
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">
<html>
<head>
<style type=\"text/css\">
<!--
div#body {
width: 300px;
height: 220px;
left: 200px;
top: 200px;
overflow: auto;
}
div#body2 {
width: 300px;
height: 220px;
left: 200px;
top: 200px;
}
a.comp_link
{
font-family: \'Arial\', \'Verdana\', \'Tahoma\';
font-size: 18;
font-weight: bold;
color: #FFFCC7;
text-decoration: none;
}
span.event img.event_big { position: absolute; display: none; }
span.event:hover img.event_big { position: absolute; display: block; top: 10px; left: 10px }
body { behavior:url(csshover2.htc); }
//-->
</style>
</head>
<body>
<div id=\"body\">
<span class=\"event\"><img src=\"2132.JPG\" border=\"\" height=\"167\" width=\"255\" /><img src=\"2132.JPG\" border=\"\" class=\"event_big\"/></span><br>
<br>
<br>
<br>
<br>
</div>
</body>
<body>
<div id=\"body2\">
<span class=\"event\"><img src=\"2132.JPG\" border=\"\" height=\"167\" width=\"255\" /><img src=\"2132.JPG\" border=\"\" class=\"event_big\"/></span><br>
<br>
<br>
<br>
<br>
</div>
</body>
</html>
Was ich will: Das obere Bild soll wie das untere dargestellt werden, also nicht innerhalb des Overflowbereich sondern darüber. Wie man dem Quellcode entnehmen kann ist das Overflow tag für das problem verantwortlich.
An der Struktur soll nichts geändert werden, also bitte keine anderen Lösungen mit JS.
Was ich mit Browserkompatibilität meine, ist, dass es so von (fast) jedem Browser dargestellt wird, unabhängig davon ob JS aktiviert ist oder nicht...
PS: Das Problem ist nur mit dem IE (Version 6 sicher, 7 weiß ich nicht) sichtbar.
Beitrag geändert: 27.1.2008 22:04:23 von theuntouchables -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage