weißer streifen unter einer grafik?!

[David]

hallo!

ich habe mit photoshop ein design für meine homepage entworfen, habe das bild in kleine bilder unterteilt die dann jeweils als hintergrund einer zelle in einer tabelle fungieren, so dass am ende quasi das komplette design erscheint, nur dass es eben untrteilt ist.
der code dazu sieht so aus:

...
<table border="0" cellpadding="0" cellspacing="0" style="width:945px;height:650px;padding:0px">
 <tr>
  <td colspan="3">
   <map name="navi">
    <area shape="rect" coords="45,133,107,158" href=" ">
    <area shape="rect" coords="119,108,229,133" href=" ">
    <area shape="rect" coords="241,120,304,143" href=" ">
    <area shape="rect" coords="321,140,403,165" href=" ">
    <area shape="rect" coords="422,161,496,187" href=" ">
    <area shape="rect" coords="515,164,578,187" href=" ">
   </map>
   <img src="design/design_01.jpg" usemap="#navi" border="0">
  </td>
 </tr>
 <tr>
  <td rowspan="2" style="background-image:url(design/design_02.jpg);width:34px;height:434px;"></td>
  <td style="background-image:url(design/design_03.jpg);width:800px;height:76px;"></td>
  <td rowspan="2" style="background-image:url(design/design_04.jpg);width:111px;height:434px;"></td>
 </tr>
 <tr>
  <td style="background-image:url(design/design_05.jpg);width:800px;height:358px;"></td>
 </tr>
</table>
...

und hier der link, wie's dann im browser aussieht: http://dtpweb.dt.funpic.de/stuff/geruest.html

bei firefox sieht alles so aus, wie's soll(bei mir zumindest).
guckt man sich das ganze mim i-explorer an, erscheint ein schmaler weißer störender streifen unter dem ersten bild(design_01.jpg) welches auch als imagemap fungiert.

die frage ist nun, warum kommt dieser streifen? ich bekomm den einfach nicht weg.
kann mir jemand helfen?

thx schon mal
daid

[Tom]

Hello,

nimm die Map aus der Tabellenzelle heraus, wenn es geht
und dann

<td><img src="..." alt="..."></td>

also keine Whitespaces mehr einbauen. _EIN_ Whitespace zwischen wezi Elementen wird im HTML-Text angezeigt. Frei nach diesem Motto wird hier interpretiert...

Harzliche Grüße vom Berg
esst mehr http://www.harte-harzer.de

Tom

[CarstenP]

Hallo Tom,

also keine Whitespaces mehr einbauen. _EIN_ Whitespace zwischen wezi Elementen wird im HTML-Text angezeigt.

Diese Regel hat nicht zu gelten, wenn das Whitespace in Form eines Zeilenumbruchs nach dem Starttag oder vor dem Endtag des übergeordneten Elementes eingefügt wird. Daß der IE hier eine Unterscheidung macht, ist ein Bug in diesem Browser. Ironischerweise führt dieser Bug aber dazu, daß sich der IE letztendlich in der Darstellung doch wieder korrekt verhält, da Bilder als Inline-Elemente standardmäßig auf der Basislinie ausgerichtet werden müssen. Hätte David einen Doctype verwendet, der in den meisten aktuellen Browsern den "Full Standards Mode" auslöst, hätte er diese Lücken auch in modernen Browsern gesehen.

Viele Grüße
Carsten

[afra]

Hallo David!

Wenn Du schon mit Verlaufsgrafiken im Hintergrund arbeiten möchtest, weshalb nimmst Du dann eine Layouttabelle, anstatt mit Blockelementen und Hintergrundgrafik darin zu arbeiten? Dann könntest Du diese absolut positionieren und hättest nicht das Problem der virtuellen Unterlängen von Text in Tabellenzellen, der zu diesem Effekt des weißen Streifens führt.

Schönen Gruß

Afra

[Detlef G.]

Hallo David

ich habe mit photoshop ein design für meine homepage entworfen, habe das bild in kleine bilder unterteilt die dann jeweils als hintergrund einer zelle in einer tabelle fungieren, so dass am ende quasi das komplette design erscheint, nur dass es eben untrteilt ist.

Eine Tabelle ist dafür nicht nötig, du hättest die unteren Grafiken auch
zusammen lassen können und entsprechend positioniert als Hintergrundbild
für die gesamte Seite einbinden können.

  

> ...  
>    <img src="design/design_01.jpg" usemap="#navi" border="0">  
>   </td>  

Hier sieht der IE Leerzeichen hinter der Grafik, was ihn dazu veranlasst,
die Unterlänge (z.B. für "g") der (nichtvorhandenen) Schrift frei zu lassen.
Entferne alle Leerzeichen, Tabs und Zeilenumbrüche zwischen <img ...> und
</td>, oder gib der Grafik display:block.

Auf Wiederlesen
Detlef