Hintergrundbild ganz oben, Text etwas weiter unten....

[Akira]

Hi Leute

Die Seite wird im Firefox korrekt dargestellt, im IE8 natürlich nicht.

Ich habe ein <div> in dem ein Hintergrundbild dargestellt wird. CSS:

.div_background
{
position:static;
background-image: url(../../images/background.gif);
background-repeat:no-repeat;
}

In diesem container befindet sich eine Tabelle:

<div class="div_background">
 <table class="tabledata">
    <tr>
      <td colspan="2"><span class="text_bold">$time</span><br /><span class="text_big_bold">$title</span></td>
      </tr>
    <tr>
      <td colspan="2">$description</td>
      </tr>
    <tr>
      <td><a href="tripdetail.php?id=$key">» Weitere Informationen</a>$confirmlink</td>
      <td align="right">$additionlink</td>
    </tr>
  </table>
</div>

das Tabledata sieht so aus:

.tabledata
{
width: 98%;
border: none;
margin-top: 7px;
margin-left: 15px;
font-family: Arial, Verdana,Helvetica, sans-serif;
font-size: 15px;
}

Im Firefox bleibt der Hintergrund oben, der Text (also die ganze Tabelle) wird um 7 Pixel nach unten und 15 Pixel nach rechts geschoben. Perfekt.

Im IE8 wird die Tabelle 15 Pixel nach rechts geschoben, das Hintergrundbild bleibt rechts. Leider wird aber der Text mit samt dem Hintergrund 7 Pixel nach unten befördert, was absolut nicht gewünscht ist.

Wie kann ich dieses Problem beheben bzw. wieso tritt es überhaupt auf?

[wildmieze]

Hmm .. schonmal versucht, dem div ein padding statt der Tabelle ein margin zu geben ..?

[Akira]

Es funktioniert. Ich habe schon ein weiteres DIV innerhalb des "div_background" hinzugefügt mit dem padding, das hat geklappt. aber da ich nicht alle Templates ändern wollte habe ich hier nachgefragt. Auf die Idee das padding direkt im "div_background" einzufügen bin ich nicht gekommen.
Heute ist nicht mein Tag.

Danke dir.

[Akira]

Ich habe noch eine Frage an euch:

Folgender Schnipsel:

<div style="position:static; width:609px; height:50px; z-index:1;">
<div style="float:left;width:100px;">Vorname:*</div>
<div style="float:left;width:230px;"><input name="vorname" type="text" value="$vorname" size="26"$inputerror[vorname]/></div>
<div style="float:left;width:60px;">Name:*</div>
<div style="float:right; width:210px;"><input name="name" type="text" value="$name" size="26"$inputerror[name]/></div>
</div>

Wenn ich die Breite der vier inneren DIV zusammenzähle erhalte ich 600 Pixel, wenn ich das äußere DIV auf eine breite von 600 Pixel setze wird es im Firefox korrekt dargestellt. Im IE8 allerdings nicht, hier scheint es so als ob das äußere DIV einfach zu klein ist, ab einer Breite von 609 Pixel wird es korrekt dargestellt.

Warum ist das so?

[threadi]

Hast Du noch paddings gesetzt? Ist die Seite valide?

[fiu]

css reset probieren oder sonst banal ein overflow visible oder hidden .. je nach layout