Variable Breite von div + overflow:auto

user-322

26.05.2007 18:13

Hi ich hätte da mal nen ernsthaftes Problem mit CSS... bzw viel mehr mit dem verfluchten Internet Explorer! Also als erstes mal mein HTML-Code:

<table width="604" cellpadding="0" cellspacing="0" border="0" class="tableBorder">

<!-- bla bla -->

    <td colspan="3">

<div class="codeHead">Code:</div>

<div class="codeBody"><code>... - Fett schreiben<br />

... - Kursiv schreiben<br />

... - Unterstrichen schreiben<br />

... - Durchgestrichen schreiben<br />

TEXT - Link auf &quot;URL&quot; mit Linktext &quot;TEXT&quot; (URL's werden auch automatisch umgewandelt)<br />

URL<br />

</code></div>

</td>

  </tr>

</table>

Das ist zwar nicht die ganze Tabelle aber der wichtigste Teil. Mein CSS sieht zu dem Teil so aus:

div.codeHead {

  background-color: #DDDDDD;

  color: #000000;

  margin-left: 10px;

  margin-right: 10px;

  padding-left: 1px;

  margin-top: 5px;

  border-left: 1px solid #000000;

  border-right: 1px solid #000000;

  border-top: 1px solid #000000;

}

div.codeBody {

  background-color: #FFFFFF;

  margin-left: 10px;

  margin-right: 10px;

  padding-left: 3px;

  margin-bottom: 1px;

  font-size: 11px;

  border: 1px solid #000000;

  overflow: auto;

  white-space: nowrap;

}

Also wie man schon deutlich erkennen kann, habe ich keine feste Breite zugewiesen (mit width: zwinkern

sondern nur den Abstand zum linken bzw rechten Rand der Tabelle (margin-left, margin-right). [edit: wenn ich eine feste Breite zuweise geht es aber da die Divs immer unterschiedlich breit sind funzt das nicht] Im Firefox (oben) sieht alles wunderbar aus:

aber im Internetexplorer verzieht sich die ganze Tabelle inklusive Div...

Weiss einer wie ich das Problem lösen könnte?

Danke schonmal im Vorraus

user-282

30.05.2007 16:20

Hi user-322,
wieso nutzt du keine feste breite? bzw. eine prozentuale?

Du könntest auch nur für den Internet Explorer eine feste Breite einstellen via Browserweiche.

Schließlich wissen wir ja alle, dass der Internet Explorer das Problemkind aller Leute ist *gg* Fettes Grinsen

Gruß, user-282 lächeln

Don't Panic! - Die Antwort lautet: 42

user-343

30.05.2007 17:46

Was spricht gegen ein "overflow: scroll"?
"auto" nimmt nämlich den Standard, und der ist meines Wissens nach bei IE "visible".

http://www.css4you.de/overflow.html

user-322

31.05.2007 07:29

Hi, danke für die Antworten erstmal!

Original von user-343
Was spricht gegen ein "overflow: scroll"?
"auto" nimmt nämlich den Standard, und der ist meines Wissens nach bei IE "visible".

http://www.css4you.de/overflow.html

Weil dann immer beide Scrollbars angezeigt werden! Ausser im IE natürlich...

@Pyth0n:
Ich kann keine feste Breite nehmen weil die Code-Felder immer an unterschiedlichen Stellen sind (zb sind die Div's bei News 600 Pixel breit, bei Foreneinträgen nur 500px.).
Mh das mit prozentualer Breite könnte ich mal schnell probieren, bin mir nicht 100%ig sicher, ob ich das schonmal versucht hab.

Danke soweit ^^

//edit:
Naja mit prozentualer Breite sieht es sogar im FX total zerhaun aus und im IE ist die Tabellenzeile immernoch so breit und die Div ist zwar schmaler und scrollbar aber das bringt mir ja nichts wenn die Tabelle trotzdem noch so breit ist wie vorher zwinkern

//edit2: Screens

div.codeHead {

  background-color: #DDDDDD;

  color: #000000;

  margin-top: 1px;

  margin-left: 5px;

  width: 95%;

  padding-left: 1px;

  margin-top: 5px;

  border-left: 1px solid #000000;

  border-right: 1px solid #000000;

  border-top: 1px solid #000000;

}

div.codeBody {

  background-color: #FFFFFF;

  width: 95%;

  padding-left: 3px;

  margin-left: 5px;

  morgen-bottom: 1px;

  font-size: 11px;

  border: 1px solid #000000;

  overflow: scroll;

  white-space: nowrap;

}

HTML-Code wie gehabt

user-282

31.05.2007 12:16

@Pyth0n:
Ich kann keine feste Breite nehmen weil die Code-Felder immer an unterschiedlichen Stellen sind (zb sind die Div's bei News 600 Pixel breit, bei Foreneinträgen nur 500px.).
Mh das mit prozentualer Breite könnte ich mal schnell probieren, bin mir nicht 100%ig sicher, ob ich das schonmal versucht hab.

Gut Gut, aber ich weiss zwar nicht ob deine News generiert werden etc, aber wieso machsat du nicht im code das einfach als CSS Anweisung für das Stückchen da und lässt die Breite bei den Definitionen in Stylesheet raus?
Also eine feste Sache drin im Code bei beiden Scripten.

Wenn es dir dann beim IE raus haut, solltst du dir überlegen die Sachen da in em anzugeben wo ich leider nicht weiss wie groß es ist, aber das kann Wunderhelfen. zwinkern

Gruß, user-282 lächeln

Don't Panic! - Die Antwort lautet: 42

user-322

31.05.2007 12:34

Das Problem ist ja, dass die Div's immer durch die gleiche Funktion durch das BB-Code-System generiert werden zwinkern

Aber es würde natürlich gehen, wenn ich den Tabellen, in denen die Div's sind unterschiedliche Klassen zuweise, und dann zb

td.tdNewsContent div.codeBody {}

verwende. user-158ke für den Denkanstoss ^^ Wenn es sonst keine Möglichkeit gibt werd ich das mal machen.

user-282

31.05.2007 12:43

Original von user-322
Das Problem ist ja, dass die Div's immer durch die gleiche Funktion durch das BB-Code-System generiert werden Aber es würde natürlich gehen, wenn ich den Tabellen, in denen die Div's sind unterschiedliche Klassen zuweise, und dann zb

td.tdNewsContent div.codeBody {}

verwende. user-158ke für den Denkanstoss ^^ Wenn es sonst keine Möglichkeit gibt werd ich das mal machen.

Naja, aber der BB-Code erstzt ja das eine nur gegen den Div und dort halt vielleicht als zusätzlichen Paramter eine 600 oder 500 einsetzen als style="width:meinebreite;" zwinkern

Gruß, user-282 lächeln

Don't Panic! - Die Antwort lautet: 42

user-322

31.05.2007 12:55

Joa klappt zwar theoretisch aber ich kann ja nich meine User jedes mal die Breite wählen lassen ^^ (oder wie meinst du das jetzt?)

user-282

31.05.2007 13:10

Können schon, aber ich denke, dass man es irgendwie noch mit CSS lösen kann. Ich weiss ja nicht wie die umliegende Struktur bei den News und in deinem Forum aussieht, aber sonst wären zwei BB-Code Regeln schön eine für den 500 und 600 und da ich denke, dass nur Admins und Reporter News screiben können, baust du denn 500 Button für die Foren User dann ein. Also das man ein Abfrag macht wer Recht hat so einen Code zu benutzen.

Klingt zwar gerade wirr für mich, aber naja Ende vom Lied ist eine Rechte vergabe, wer welchen Code nutzen darf. zwinkern

Gruß, user-282 lächeln

Don't Panic! - Die Antwort lautet: 42

user-322

31.05.2007 13:26

Mh ne das geht ja auch nicht, weil ich auch Zitate in eine Div tuhe, die auch verschachtelt werden können und die auch normale User benutzen können...

user-282

02.06.2007 07:04

Original von user-322
Mh ne das geht ja auch nicht, weil ich auch Zitate in eine Div tuhe, die auch verschachtelt werden können und die auch normale User benutzen können...

Gehen tut alles. Naja wenn du keine zwei Definitionen machst musst du halt eine CSS Lösung finden. Ich weiss zwar nicht wie groß dein Mutterelement ist, aber ich würde es echt mit Prozentangaben probieren. Denn 100% sind ja nicht überall gleich. zwinkern

Gruß, user-282 lächeln

Don't Panic! - Die Antwort lautet: 42

user-322

02.06.2007 10:36

Original von user-282

Original von user-322
Mh ne das geht ja auch nicht, weil ich auch Zitate in eine Div tuhe, die auch verschachtelt werden können und die auch normale User benutzen können...

Gehen tut alles. Naja wenn du keine zwei Definitionen machst musst du halt eine CSS Lösung finden. Ich weiss zwar nicht wie groß dein Mutterelement ist, aber ich würde es echt mit Prozentangaben probieren. Denn 100% sind ja nicht überall gleich.

Gruß, user-282

Ja, aber wie schon gesagt, ist das Problem bei den Prozentangaben, dass die Tabelle drum her um immernoch so breit bleibt, auch wenn es komplett unlogisch ist...

Haste vll noch eine andere Idee?