Hallo,
Ich bin gerade dabei meinen eigenen Blog zu erstellen und benutze einen Div wo sich Bilder drin befinden sollen die beim Mouseover switchen aber das ist jetzt eher unwichtig, mein eigentliches Problem ist ja, dass bei Firefox der Div sich auf dem richtigen Platz befindet beim Safari und Google Chrome jedoch verrutscht. Kann mir bitte jemand helfen? Ich bin echt ratlos.
Hier ist mein HTML Code:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test3</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body
style="background-image: url(http://www.bilder-hochladen.net/files/3a3j-8a-f90f.jpg);">
<table
style="text-align: left; position: absolute; left: 207px; width: 796px; height: 100%; top: 0pt;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="5" align="left"
background="http://www.bilder-hochladen.net/files/big/3a3j-8b-9c83.jpg"
height="280" valign="middle">
<div class="navi"><a href="#">
<br>
<br>
Home</a>
</div>
<div class="navi2"><a href="#"><br>
<br>
Stuff</a></div>
<div
style="position: absolute; left: 207px; width: 799px; top: 254px; height: 35px;"><span
class="nav"><a href="#">
Diary </a></span>
<span class="nav"><a
href="#">Sweets </a></span>
<span class="nav"><a href="#">Literary
Box </a></span>
<span class="nav"><a href="#">Fangasm </a></span>
<span class="nav"><a
href="#">Profile </a></span>
<span class="nav"><a href="#">Music? </a></span></div>
</td>
</tr>
<tr>
<td class="inhalt">At vero eos et accusam et justo
duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse
molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci <br>
<br>
ptua. At vero eos et accusam et justo duo dolores et ea
rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.<br>
<br>
<br>
At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci <br>
<br>
<br>
Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.<br>
<br>
<br>
At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci <br>
<br>
<br>
</td>
</tr>
<tr>
<td colspan="5" class="footer" align="left"
background="http://www.bilder-hochladen.net/files/3a3j-89-839a.jpg"
height="123" valign="middle">
</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>Und hier mein CSS-Code:
Code
tbody {
float: left;
color: #000000;
font-family: Georgia;
text-align:justify;
line-height: 12px;
font-size: 10px;
letter-spacing: 0px;
cursor: url(http://cur.cursors-4u.net/smilies/smi-2/smi166.cur), progress;
}
.inhalt {
padding: 20px;
padding-top: 10px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 15px;
}
.inhalt2 {
padding: 20px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 15px;
width: 150px;
}
.nav a:link, .navi a:visited
{ color:#e7e3e2;
text-decoration:none;
font-family: Corbel, sans-serif;
font-size: 14px;
text-align:center;
vertical-align:middle;
border-right: 2px solid #FFFFFF;
filter:alpha(opacity=30); /* IE */
opacity:0.3; /* allgemein */
-moz-opacity:0.3; /* Mozilla */
-khtml-opacity:0.3; /* KTHML */
-opera-opacity:0.3; /* Opera */
}
.nav a:hover
{color:#FFFFFF;
text-decoration:none;
font-family: Corbel, sans-serif;
font-size: 14px;
text-align:center;
vertical-align:middle;
border-right: 2px solid #b30026;
cursor: url(http://cur.cursors-4u.net/smilies/smi-2/smi166.cur), progress;
text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
-moz-text-shadow: 0 0 2px #000;
-webkit-text-shadow: 0 0 2px #000;
filter:alpha(opacity=100); /* IE */
opacity:1; /* allgemein */
-moz-opacity:1; /* Mozilla */
-khtml-opacity:1; /* KTHML */
-opera-opacity:1; /* Opera */
}
.navi a:link, .navi a:visited
{ color:#e7e3e2;
text-decoration:none;
font-family:vani;
font-size:11px;
background-image:url(http://www.bilder-hochladen.net/files/3a3j-8c-1700.jpg);
background-repeat:repeat-x;
display: inline-block;
width:320px;
height:135px;
position: absolute;
float: center;
left: 683px;
width: 320px;
padding-top: 0px;
top: 0px;
text-align:center;
vertical-align:middle;
}
.navi a:hover
{color:#FFFFFF;
text-decoration:italic;
font-family:Tw Cen MT Condensed Extra Bold;
font-size:28px;
background-image:url(http://www.bilder-hochladen.net/files/3a3j-8e-6883.jpg);
background-repeat:repeat-x;
display: inline-block;
width:320px;
height:135px;
height:135px;
position: absolute;
float: center;
left: 683px;
width: 320px;
padding-top: 0px;
top: 0px;
text-align:center;
vertical-align:middle;
cursor: url(http://cur.cursors-4u.net/smilies/smi-2/smi166.cur), progress;
text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
-moz-text-shadow: 0 0 2px #000;
-webkit-text-shadow: 0 0 2px #000;
}
.navi{
text-align:left;
margin:0 auto;
}
.navi2 a:link, .navi a:visited
{ color:#e7e3e2;
text-decoration:none;
font-family:vani;
font-size:12px;
background-image:url(http://www.bilder-hochladen.net/files/3a3j-8d-53c3.jpg);
background-repeat:repeat-x;
display:inline-block;
width:320px;
height:135px;
position: absolute;
left: 683px;
width: 320px;
top: 126px;
text-align:left;
vertical-align:middle;
}
.navi2 a:hover
{color:#FFFFFF;
text-decoration:italic;
font-family:Tw Cen MT Condensed Extra Bold;
font-size:28px;
background-image:url(http://www.bilder-hochladen.net/files/3a3j-8f-4918.jpg);
background-repeat:repeat-x;
display:inline-block;
width:320px;
height:135px;
position: absolute;
width: 320px;
top: 126px;
text-align:left;
vertical-align:middle;
cursor: url(http://cur.cursors-4u.net/smilies/smi-2/smi166.cur), progress;
text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
-moz-text-shadow: 0 0 2px #000;
-webkit-text-shadow: 0 0 2px #000;
}
.navi2{
text-align:left;
margin:0 auto;
}Hier hab ich auch noch ein Bild von dem verrutschten Div in Safari: