box problem unter firebird (Abstand oben)

[David Gerlich]

hallo

ich hab ein css-problem mit firefox (bin nicht der erfahrenste user darin)

ich bin grad dabei eine simple wiederverwendbare box mit einem hintergrundbild zu entwickeln. Dabei bekomme ich so eine Art Zeilenumbruch bevor das Bild oben anfängt. Beim IE wir es korrekt angezeigt d.h. die box fängt richtigerweise oben links an.

das ist der code:

<table cellspacing="0" cellpadding="0" border="1">
  <tr>
    <td valign="top" width="400" height="400" style="vertical-align:top;">
      <div class="box" style="clear:both;float:both;">
        <div style="vertical-align:top;">
   <h4>Test-Titel</h4></span>
 </div>
      </div>
    </td>
  </tr>
</table>

.box {
    align-vertical:top;
    background: transparent url('images/struktur/miditeaser_left.gif') no-repeat;
    width:176px;
    height:290px !important;
    font-size: 11px;
    font-family:Verdana, Arial;
}

Bin dankbar für jede Hilfe, hab auch schon mit clear und float rumexperementiert, hat leider nix geholfen.

danke
david

[Andreas Dölling]

Hallo,

ich bin grad dabei eine simple wiederverwendbare box mit einem hintergrundbild zu entwickeln.

was meinst Du denn damit? Eine Box mit einem Bild wäre für mich so etwas:
<div><img src="..." alt="..." /></div>

Oder irgendein anderes Block-Element, das ein IMG-Element enthält (oder ein Hintergrundbild hat).

Ich verstehe nicht so richtig, was Du genau erreichen möchtest (und warum Du so ein umständliches HTML-Markup benutzt).

Ciao,
Andreas

[David]

Hallo,

ich bin grad dabei eine simple wiederverwendbare box mit einem hintergrundbild zu entwickeln.

was meinst Du denn damit? Eine Box mit einem Bild wäre für mich so etwas:
<div><img src="..." alt="..." /></div>

Oder irgendein anderes Block-Element, das ein IMG-Element enthält (oder ein Hintergrundbild hat).

Ich verstehe nicht so richtig, was Du genau erreichen möchtest (und warum Du so ein umständliches HTML-Markup benutzt).

Ciao,
Andreas

hier ist ein screenshot von dem Problem
http://xcrusty.no-ip.info/box_problem.jpg

meine idee war halt beim ersten div-element als background das bild zu nehmen und in die inneren div's den content. jetzt ist halt oben so ein abstand der bei IE nicht vorkommt. Ist das genereel ein falscher Ansatz ?

mfg

david

[Andreas Dölling]

Hallo,

also, Du möchtest eine Box, die in einer anderen Box links oben sitzt, richtig?

Dafür würde dies reichen:
<div id="container">
  <div id="infoBox"><img src="" alt="" /></div>
  <h1>Überschrift</h1>
  <p>Text...</p>
</div>

Das Div #infoBox hätte die Style-Eigenschaft "float:left;".

Die Hinweise von Auge zu margin- und padding-Einstellungen solltest Du auch beachten.
Zum Thema "float" empfehle ich Dir http://css.maxdesign.com.au/floatutorial/!

Ciao,
Andreas

[Auge]

Hallo

<table cellspacing="0" cellpadding="0" border="1">
  <tr>
    <td valign="top" width="400" height="400" style="vertical-align:top;">
      <div class="box" style="clear:both;float:both;">
        <div style="vertical-align:top;">
   <h4>Test-Titel</h4></span>
</div>
      </div>
    </td>
  </tr>
</table>

Von den Umständlichkeiten wurde ja schon gesprochen. Zusatz: Es gibt kein float:both;.

.box {
    align-vertical:top;
    background: transparent url('images/struktur/miditeaser_left.gif') no-repeat;
    width:176px;
    height:290px !important;
    font-size: 11px;
    font-family:Verdana, Arial;
}

Wie wäre es mit der Vergabe eindeutiger Werte für margin und padding? Da hat nämlich jeder Browser seine eigenen Standardangaben.

Tschö, Auge