CirTap: @ROWI: deine Frage im Chat

Beitrag lesen

Moin rowi,

hättest du noch ein paar Minuten ausgehalten ... :-)

Der relevante Block (Umfrage) muss so aussehen:

...
<th class="menue"><a href="http://de.yahoo.com/">Impressum</a></th></tr>
</tbody></table>

<!-- UMFRAGE-BOX START -->
<div style="background-image:url(menue_02.jpg); background-repeat:repeat-y; width:175px; padding:0px;">
<img src="menue_01.jpg" width="175" height="16" alt="" />
<div style="padding:5px 10px;">
Hier soll später eine Umfrage rein ! Dies ist nur ein Test-Text welcher später durch
eine beliebige Umfrage ersetzt werden kann. Um einen genauen Eindruck zu vermitteln
zu können, hier ein längerer Text, da sich die Boxen dynamisch der länge hin anpassen.
</div><img src="menue_04.jpg" width="175" height="5" alt="" /></div>
<!-- ENDE UMFRAGE-BOX -->

<p>Wilkommen auf ....</p>
...

Getestet in Opera 6, 7, 8, MSIE 6, Firefox 1.07 unter WinXP, MSIE 5 Win98 -- passt.

Wie schon im Chat bemerkt, steht dein ganzer Inhalt fast ausschliesslich im BODY Element anstatt "ordentlich" in <P>s oder <DIV>s, weshalb dein CSS auch nicht (richtig) greift und somit irgendwelche Browserinternen Voreinstellungen für BODY aktiv werden.

Das äussere DIV kapselt beide IMG und den Umfragetext, der selbst in einem DIV steht zwecks flexibler Abstandhalterei.
WICHTIG: zwischen dem zweiten IMG ("menue_04.jpg) und dem äusseren, schliessenden DIV KEIN Leerzeichen oder Zeilenumbruch sonst hast du wieder das Loch im IE.

Was Tidy angeht: die Datei war zwar HTML-syntaktisch ok (abzgl. einiger fehlender Attribute, z.B. bei den Bildern), aber "semantisch" daneben, ergo: das CSS war praktisch für die Füße.

Ich tät dem Ding natürlich später eine id oder Klasse verpassen und es in die CSS-Datei nehmen. ID wenn es nur eine Box gibt, eine CSS-Klasse wenn's mehrere solcher Boxen geben sollte:

div.umfrage-box {
  background-image:url(menue_02.jpg);
  background-repeat:repeat-y;
  width:175px;
  padding:0px;
}
div.umfrage-box div {
  margin:0px;
  padding:5px 10px;
  font: normal 10px/normal Arial,Helvetica,sans-serif;
  color:rgb(255,255,255);
}

dann:
<!-- UMFRAGE-BOX START -->
<div class="umfrage-box"><img src="menue_01.jpg" width="175" height="16" alt="" />
<div>
....

Viel Spaß,
CirTap