✔ Problem mit Darstellung im IE

Status
Nicht offen für weitere Antworten.
P

Peetz

Mitglied
Hallo Ihr,
bin gerade wieder dabei eine Seite zu machen. Hab dafür das design in Photoshop gemacht und auch gesliced. Das Problem ist, dass ich Buttons mit mouseover-effekt machen will. In Opera zeigt der mit das auch alles richtig an nur im IE nicht. Da verschieben sich die einzelnen Bilder (aus denen die Seite ja besteht) etwas unschön.

Hier der Teil wo der Button ist:


HTML: 
<td>
<a href="www.google.de"

onmouseover="austausch1.src='Bilder/saxgirls-sliced_05_b.jpg';"
onmouseout="austausch1.src='Bilder/saxgirls-sliced_05.jpg';">

<img src="Bilder/saxgirls-sliced_05.jpg"
border="0" width="86" height="66"
name="austausch1" alt="austausch1">
</a>
</td>



Und hier nochmal der ganze Code:


HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Saxgirls</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script
language="JavaScript" type="text/javascript">
<!--
button1= new Image();
button1.src = "Bilder/saxgirls-sliced_05.jpg"
button2= new Image();
button2.src = "Bilder/saxgirls-sliced_05_b.jpg"
//-->
</script>

</head>

<body bgcolor="#ECECEC">
<!-- ImageReady Slices (saxgirls-sliced.psd) -->
<br><br>
<table id="Tabelle_01" align="center" width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="14">
<img src="Bilder/saxgirls-sliced_01.jpg" width="800" height="28" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="Bilder/saxgirls-sliced_02.jpg" width="41" height="169" alt=""></td>
<td colspan="9">
<img src="Bilder/saxgirls-sliced_03.jpg" width="382" height="84" alt=""></td>
<td colspan="4">
<img src="Bilder/saxgirls-sliced_04.jpg" width="377" height="84" alt=""></td>
</tr>
<tr>
<td>
<a href="www.google.de"

onmouseover="austausch1.src='Bilder/saxgirls-sliced_05_b.jpg';"
onmouseout="austausch1.src='Bilder/saxgirls-sliced_05.jpg';">

<img src="Bilder/saxgirls-sliced_05.jpg"
border="0" width="86" height="66"
name="austausch1" alt="austausch1">
</a>
</td>
<td>
<img src="Bilder/saxgirls-sliced_06.jpg" width="8" height="66" alt=""></td>
<td>
<img src="Bilder/saxgirls-sliced_07.jpg" width="86" height="66" alt=""></td>
<td>
<img src="Bilder/saxgirls-sliced_08.jpg" width="8" height="66" alt=""></td>
<td>
<img src="Bilder/saxgirls-sliced_09.jpg" width="86" height="66" alt=""></td>
<td>
<img src="Bilder/saxgirls-sliced_10.jpg" width="7" height="66" alt=""></td>
<td>
<img src="Bilder/saxgirls-sliced_11.jpg" width="86" height="66" alt=""></td>
<td>
<img src="Bilder/saxgirls-sliced_12.jpg" width="7" height="66" alt=""></td>
<td colspan="2">
<img src="Bilder/saxgirls-sliced_13.jpg" width="86" height="66" alt=""></td>
<td>
<img src="Bilder/saxgirls-sliced_14.jpg" width="60" height="66" alt=""></td>
<td>
<img src="Bilder/saxgirls-sliced_15.jpg" width="197" height="66" alt=""></td>
<td rowspan="2">
<img src="Bilder/saxgirls-sliced_16.jpg" width="42" height="85" alt=""></td>
</tr>
<tr>
<td colspan="12">
<img src="Bilder/saxgirls-sliced_17.jpg" width="717" height="19" alt=""></td>
</tr>
<tr>
<td colspan="14" background="Bilder/saxgirls-sliced_18.jpg" width="800" height="323">

<table border='0' align="center" cellpadding='0' cellspacing='0' width='90%' id='AutoNumber1'>
<tr>
<td width='20' height='367' align='left' valign='top'>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
dfsfsf<br>

</td>
</tr>
</table> 

</td>
</tr>
<tr>
<td colspan="14">
<img src="Bilder/saxgirls-sliced_19.jpg" width="800" height="50" alt=""></td>
</tr>
<tr>
<td>
<img src="Bilder/Abstandhalter.gif" width="41" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="86" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="8" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="86" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="8" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="86" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="7" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="86" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="7" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="8" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="78" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="60" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="197" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="42" height="1" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
 
Vermutlich liegt es an den Leerzeichen / Zeilenumbrüchen (= whitespaces) im HTML-Quelltext vor/nach den jeweiligen img-Elementen, die der IE zu gerne mit Verschiebungen im Layout quittiert.

Dies lässt sich mit folgender CSS-Regel beheben:

HTML: 
<style type="text/css">
img {
display: block;
}
</style>
 
Boah ich dank dir wie verrückt.......aber das der IE so ein Scheiss baut hätte ich nicht gedacht. Wäre ich nie drauf gekommen.
 
Gern geschehen.

Und bitte markiere das "gelöste" Thema noch als erledigt, vielen Dank.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück