liege ich oder der bowser falsch ?

[sysop]

gelöst liege ich oder der bowser falsch ?

bevor ich hier code poste, eine frage, ob der ie7 b.z.w der firefox 3 ein problem mit divs in der darstellung hat. um mein problem zu verdeutlichen, ein screenshot im anhang, oben korrekt, unten falsch):

ich habe ein kleines cms aus bestehenden scripten bebastelt, das sowohl tabellarische daten als auch texte ausgeben soll. da das template für beides zuständig ist, wird (je nach inhalt) eine tabelle mit variabler spaltenanzahl generiert, ist es ein text oder wie im screenshot ein codeschnipsel ist es entsprechend eine einspaltige tabelle (keine diskussion bitte warum tabellen blöd sind, es ist so )

der codeschnipsel wird durch eine bbcode-funktion gejagt und syntaktisch gehighlightet. damit lange codezeilen den kompletten aufbau nicht zerhacken, habe ich den code in einen divcontainer gepackt, der mit einem automatischen overflow versehen ist.
css-code

.containoflow
{
/*     BACKGROUND-COLOR:#D1D4D4; */
    background-image: url(silver_main.gif);
    border:gray 1px solid;
    overflow:auto;
    width:100%;
    height:98%;
     text-align:justify;  /* blocksatz */
     font-size:14px;
     padding:5;
/*     white-space:nowrap; */
}

die tabelle (wie gesagt einspaltig) definiere ich in 98% width also je nach fenstergrösse angepasst.
in der spalte wird der divcontainer mit <div class="containoflow"> um den codeschnipsel gelegt.

firefox (iceweasel) stellt mir auch alles richtig dar, allerdings zerhackt mir der ie und der firefox 3 das bild, da der overflow alles ausseinander dehnt (siehe screenshot)

was passiert da, ich blicke nicht wirklich mehr durch.
bestimmt der div container die breite der spalte oder umgekehrt. wo ist der unterschied zw firefox 2.x und 3 b.z.w. ie 7. muss ich eventuell im css noch was angeben.

feste breite will ich nicht, genauso wenig gedenke ich da mit style-switches herum zu murksen,

ps.
;ugl ahhhhrgh mache ich es ganz und komplett falsch und werfe eine tabelle um den div, klappts.

 

[neuroleptika]

Spricht .containoflow das Elternelement der Tabelle (<div>) oder <table> an an?
Vielleicht magst du mal ein Beispiel hochladen.

 

[sysop]

mal ein auszug aus dem html-code, um den es geht

<table class="tbl2">
<tr>
   <td class="td4oflow">
     <div class="containoflow">

         hier der code, je nach datenbank

     </div>
   </td>
</tr>
</table>

im cms kann man einstellen, ob dynamisch oder feste höhe, breite etc verwendet werden soll. dafür sind die einträge td4oflow und containflow. tbl2 definiert die tabelle an sich:

.tbl2
{
    background-color:#D1D4D4;
    margin-top:10px;
    width:95%;
}

.td4oflow
{
    height:500;
    vertical-align:top;
    font-family:verdana;
    font-size:9px;
    padding:4px;
}

.containoflow
{
/*     BACKGROUND-COLOR:#D1D4D4; */
    background-image: url(silver_main.gif);
    border:gray 1px solid;
    overflow:auto;
    width:100%;
    height:98%;
    text-align:justify;  /* blocksatz */
    font-size:14px;
    padding:5;
/*     white-space:nowrap; */
}

nun frage ich mich, ob die tabelle den ton angibt oder der div-container.

anmerkung:
ich dachte immer, die tabelle wird festgelegt (95% des browser fensters) und der div-container nimmt einfach den platz, den ihm die spalte lässt. so funktioniert es auch im ff 2 (iceweasel) b.z.w allen meinen gecko browsern bis auf den ff3.

ps.

uuups vergessen:
da die code-auszüge eventuelle divs enthalten können (durch die preg_replace() je nach bbcode), könnte ein weiter div im div entstehen. der sollte aber meine definition nicht beeinträchtigen denke ich.

 

[neuroleptika]

Hier fehlt die Einheit:

.td4oflow
{
    height:500[B][COLOR=DarkRed]px[/COLOR][/B];
    vertical-align:top;
    font-family:verdana;
    font-size:9px;
    padding:4px;
}

ich dachte immer, die tabelle wird festgelegt (95% des browser fensters).

Du hast die Breite der von <td> angegeben also 95% von <table>.
Die Breite von <table> wird duch den Inhalt bestimmt. Es sei denn sie hat selber eine Breitenangabe.
Width in Tabellenzellen werden als min-width interpretiert. Das kannst du mit table-layout:fixed; verhindern.

da die code-auszüge eventuelle divs enthalten können (durch die preg_replace() je nach bbcode), könnte ein weiter div im div entstehen. der sollte aber meine definition nicht beeinträchtigen denke ich.

Ein weiteres <div> im <div> macht deine Höhenangaben in % zu nichte.
Das innerste <div> sollte die höhe bestimmen. Die anderen werden entsprechend aufgespannt.

Ich würde height für .td4oflow weglassen und das height: 500px; für .containoflow verwenden.

Ich habe ein <div> mit width:wert%; um die Tabelle gelegt und der Tabelle dieses css gegeben.

table-layout:fixed;
width: 100%;

Damit habe ich keinen Fehler erkennen können.

Am besten du zeigst den ausgegebenen html-code.

 

[sysop]

danke,
table-layout:fixed; das war's, jetzt klappt alles :)
der kleine angabefehler 500px ist im pfusch mitgegangen.

kleine anmerkung:
für das .tdoflow mit der höhenangabe (500px) habe ich mich deshalb entschieden, weil mir ein eingestelltes padding oder spacing dann zum div addiert wurde, stelle ich aber td auf eine feste höhe ein, wird der container entsprechend den paddings/spacings verkleinert. im ersten fall habe mir verschiedene browser bei maximaler grösse in px trotzdem einen scrollbalken erstellt, bei der jetzigen variante passt die anzeige aber (bisher) immer.

ein bisschen verwirrt bin ich aber ob des aufbaus immernoch.

definiere ich eine tabelle mit width 80%, lege ich dann in eine spalte ein div mit 100%, sollte der container doch 100% des zugewiesenen platzes der spalte verwenden und den rahmen nicht sprengen.

interssanter weise werden mir sehr lange texte richtig angezeigt, der div-container dehnt mir aber die spalte aus (zumal ich dem container extra ein auto overflow mitgegeben habe). das innere element ignoriert mir also das äussere.

gibt es da eine hack-ordnung, von der ich nichts mitbekommen habe (also div übersteuert table weil höherwertig)

 

[neuroleptika]

interssanter weise werden mir sehr lange texte richtig angezeigt, der div-container dehnt mir aber die spalte aus (zumal ich dem container extra ein auto overflow mitgegeben habe). das innere element ignoriert mir also das äussere.

gibt es da eine hack-ordnung, von der ich nichts mitbekommen habe (also div übersteuert table weil höherwertig)

Width in % wirkt auf <td> etwas anders als auf Blockelemente.
Die Zellen nehmen insgesamt immer 100% von <tr> bzw <table> ein.
Wenn nur eine <td> in <tr> steht, nutzt sie ( trotz width: 30%; ) die gesamte Breite. Erst wenn eine zweite <td> hinzukommt, erstreckt sich die erste auf 30%. Die zweite <td> füllt den Rest aus.

Der Overflow wirkt erst wenn die Zelle an ihre Grenzen kommt (Z.B. längerer Text). Denn da geht es auch für das <div> nicht weiter.

Wenn dich das stört, könntest du eine leere <td> hinzufügen.

 

[sysop]

noch eine kleine anmerkung zum ie.
der scheint die breite der spalte erst übermittelt zu bekommen, wenn man das browserfenster in der grösse anpasst (sprich um wenigestens 3px vergrössert oder verkleinert) dann korrigiert er den div so wie er sein soll. lustige sache das.....;ugl