Hi,
ich habe da ein Problem mit der Positionierung einer Infografik. Diese wird aufgerufen, wenn man mit der Maus über die Zeichenkette "Beispiel" fährt. Die Grafik wird dann über dem Wort und rechts daneben dargestellt. Das funktioniert auch soweit einwandfrei. Wenn ich jedoch die Bildschirmauflösung z.B. auf 1024x768 ändere, wird die Infografik bei den meisten Browsern nun unterhalb des Wortes dargestellt.[Blockierte Grafik: http://xhtmlforum.de/images/smilies/icon_eek.gif]
Ich denke, das das an der Divinition von "body" und "inhalt" liegt. Aber diese Werte müssen unbedingt so bleiben. Bin leider Anfänger in Sachen CSS. Könnt Ihr mir helfen? Danke im voraus [Blockierte Grafik: http://xhtmlforum.de/images/smilies/icon_smile.gif]
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><style type="text/css">html, body {margin:0; padding:0; height:100%; overflow:hidden; }div.inhalt {margin-left:0px; padding-left:0px; height:93.8%; overflow:auto;}</style><html>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
a.infobox {
text-decoration: underline;
border-bottom: none;
}
a.infobox:hover {
cursor: pointer;
}
a.infobox span {
visibility: hidden;
position: absolute;
left: -99em;
text-decoration: none;
margin-top: -4.0em;
padding:-200px;
line-height: 0px;
text-align:left;
letter-spacing: 0.1px;
}
a.infobox:hover span {
visibility: visible;
left: auto;
}
.boxshadow {
display: inline-block;
line-height: 0px;
-moz-box-shadow: 3px 4px 6px #6e6e6e;
-webkit-box-shadow: 3px 4px 6px #888888;
-khtml-box-shadow: 3px 4px 6px #888888;
box-shadow: 3px 4px 6px #6e6e6e;
}
</style>
<!--[if IE]>
<style type="text/css">
.boxshadow {
line-height: 0px;
filter:DropShadow(color=#6e6e6e, offx=3, offy=3);
filter:progid:DXImageTransform.Microsoft.Shadow
(color=#888888, Direction=135, Strength=6); /* IE6-7 */
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow
(color=#888888, Direction=135, Strength=6)"; /* IE8 */
}
</style>
<![endif]-->
<body>
<div class="inhalt">
<div class="bild">
<table border="1" width="100" height="600">
<tr>
<p> </td>
</tr>
</table>
<div align="center"></div><p>
</p><p align='center'>Über diesem <a class='infobox' href='#'>Beispiel<span><span class='boxshadow'><img border='0' src='bild.png' width='282' height='101'></span></span></a>
soll die Grafik erscheinen.
</div></div>
