Layout-Probleme mit IE

von **vivi** am 10.11.2007, 17:35

Hallo, ich arbeite im moment an einer seite, und habe das layout mithilfe ImageReady gemacht. Ich benutze iframes und imagemap als navigation.
Das Problem nun ist, dass das Layout zwar okay aussieht in Firefox oder Netscape, aber total bescheuert in Internet Explorer. Der Internet Explorer bekommt irgendwie Probleme sobald ich dieses Imagemap reinbaue, und quetscht so einen weißen Raum zwischen das Bild, das das ImgMap benutzt, und den rest, der drunter kommt. Es gibt, sozusagen eine Unterbrechung.
Hier ist der Link:

http://totto.beautiful-beast.net/illogical/

Mein Code ist folgender:

Code: Alles auswählen: <HTML> <HEAD> <TITLE>I L L O G I C A L /// Narita Hatsumi x Ryoki Tachibana Fanlisting</TITLE> </HEAD> <BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>  <div align="center"> <TABLE WIDTH=600 height=514 BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR> <TD COLSPAN=3> <IMG SRC="Bilder/index_01.gif" WIDTH=600 HEIGHT=40 ALT=""></TD> <TD> <IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=40 ALT=""></TD> </TR> <TR> <TD COLSPAN=3> <IMG SRC="Bilder/index_02.gif" WIDTH=600 HEIGHT=38 border=0 usemap="#Navigation"> </TD> <TD> <IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=38 ALT=""></TD> </TR> <TR> <TD ROWSPAN=7> <IMG SRC="Bilder/index_03.gif" WIDTH=25 HEIGHT=436 ALT=""></TD> <TD ROWSPAN=6 width=229px height=414px> <iframe src="index.php" width="229px" name="iframe" height="414px" noresize="NORESIZE" resizable="no" frameborder="0"> </iframe> </TD> <TD> <IMG SRC="Bilder/index_05.gif" WIDTH=346 HEIGHT=73 ALT=""></TD> <TD> <IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=73 ALT=""></TD> </TR> <TR> <TD> <IMG SRC="Bilder/index_06.gif" WIDTH=346 HEIGHT=72 ALT=""></TD> <TD> <IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=72 ALT=""></TD> </TR> <TR> <TD> <IMG SRC="Bilder/index_07.gif" WIDTH=346 HEIGHT=73 ALT=""></TD> <TD> <IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=73 ALT=""></TD> </TR> <TR> <TD> <IMG SRC="Bilder/index_08.gif" WIDTH=346 HEIGHT=73 ALT=""></TD> <TD> <IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=73 ALT=""></TD> </TR> <TR> <TD> <IMG SRC="Bilder/index_09.gif" WIDTH=346 HEIGHT=72 ALT=""></TD> <TD> <IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=72 ALT=""></TD> </TR> <TR> <TD ROWSPAN=2> <IMG SRC="Bilder/index_10.gif" WIDTH=346 HEIGHT=73 ALT=""></TD> <TD> <IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=51 ALT=""></TD> </TR> <TR> <TD> <IMG SRC="Bilder/index_11.gif" WIDTH=229 HEIGHT=22 ALT=""></TD> <TD> <IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=22 ALT=""></TD> </TR> </TABLE> </div> <map name="Navigation"> <area shape="rect" coords="14,8,53,23" href="about.php" target="iframe" alt="About"> <area shape="rect" coords="60,8,97,23" href="rules.php" target="iframe" alt="Rules"> <area shape="rect" coords="101,8,139,23" href="join.php" target="iframe" alt="Join"> <area shape="rect" coords="143,8,174,23" href="list.php" target="iframe" alt="Fans"> <area shape="rect" coords="183,8,220,23" href="codes.php" target="iframe" alt="Codes"> <area shape="rect" coords="230,8,260,23" href="index.php" target="iframe" alt="Index"> </map>  </BODY> </HTML>

Kann mir jemand helfen?
Vielen Dank! =D

von **BlueScreen-Bertrand** am 10.11.2007, 19:23

Hallo,

du könntest doch den unteren Bereich der Grafik als Hintergrundbild einblenden, dann würde sie gar nicht verschoben.

Eine andere Möglichkeit wäre, die gesamte Grafik zusammenzufassen und als Hintergrundbild zu nehmen. Dann erstellst du eine transparente Grafik, die die Beschriftungen (Titel und Links) enthält und blendest sie auf oberster Ebene ein. Diese Lösung ist sogar eleganter.

von **vivi** am 10.11.2007, 21:02

Wie erstellt man sich denn eine transparente Grafik? Ich glaube, ich habe den Part nicht so ganz verstanden. ^^;

von **BlueScreen-Bertrand** am 11.11.2007, 01:04

Transparente Grafiken können PNGs sein. Beim Erstellen musst du nur die Hintergrundfarbe auf transparent schalten. Der Hintergrund osllte dabei einfacrib sein, am besten weiß, damit du genau sehen kannst, was zum Vordergrund werden soll (also die Schrift).

von **dragonl** am 11.11.2007, 01:24

Transparente Grafiken können PNGs sein.

Ähm... irre ich mich oder gibt es nicht auch zwischen dem IE und transparenten PNGs probleme, mir war so als ob !?

~Dragonl

von **FireFoxFan** am 11.11.2007, 11:08

dragonl hat geschrieben:
Transparente Grafiken können PNGs sein.

Ähm... irre ich mich oder gibt es nicht auch zwischen dem IE und transparenten PNGs probleme, mir war so als ob !?

~Dragonl

Ja, das ist richtig !
Zumindest konnte der IE6 transparente PNGs nicht richtig darstellen.
Ich meine, der IE7 kann das mittlerweile. Sicher bin ich mir da aber auch nicht.

von **BlueScreen-Bertrand** am 11.11.2007, 11:30

Der IE 7 kann es jetzt.

Entweder nötigt man die Besucher zum Update oder findet noch eine andere Lösung. Dann wäre vielleicht doch der Vorschlag mit dem geteilten Hintergrundbild sinnvoll.

DIE IE6-Benutzer sollten aber auch nicht mehr zu viele sein. Hoffe ich.

von **noli_me_Tangere** am 13.11.2007, 19:51

es gibt verschiedene möglichkeiten:
1. alles in eine zeile schreiben:
aus
<TD COLSPAN=3>
<IMG SRC="Bilder/index_02.gif" WIDTH=600 HEIGHT=38 border=0 usemap="#Navigation">
</TD>

wird
<TD COLSPAN=3><IMG SRC="Bilder/index_02.gif" WIDTH=600 HEIGHT=38 border=0 usemap="#Navigation"></TD>

2. ins img-tag ein style='float: left' einfügen

3. ins td-tag ein style='font-size: 0' einfügen

wenn ich es richtig verstanden habe, dann liegt der fehler an einem bug im ie: er fügt hinter bildern in tabellen einen zeilenumbruch ein, die neue zeile führt zum weißen streifen. das kann man unterbinden, indem man die schriftgröße auf null setzt oder den umbruch unterdrückt. warum variante 1 funktioniert weiß ich auch nicht, aber sie funktioniert scheinbar.

ich hoffe, die lösungen helfen dir auch bei deinem problem.

von **BlueScreen-Bertrand** am 13.11.2007, 19:56

Ich bin noch auf etwas gestoßen, bin mir aber nicht sicher, ob das auch in deinem Fall hilfreich wäre:

style="line-height:0px;"

In Tabellen und Paragraphen funktioniert es zumindest.

von **dragonl** am 13.11.2007, 20:22

Die erste Lösung in der alles in eine Zeile geschrieben wird funktioniert weil hinter dem IMG-Tag KEIN Leerzeichen ist !
Folgendes sollte also auch funktionieren:

Code: Alles auswählen: <TD COLSPAN=3 ><IMG SRC="Bilder/index_02.gif" WIDTH=600 HEIGHT=38 border=0 usemap="#Navigation" ></TD>

~Dragonl

Layout-Probleme mit IE

Layout-Probleme mit IE

Ähnliche Themen

Wer ist online?