Pre-Bereich im Internet Explorer mit display:table;

Mithrandir

Hallo,

auch, wenn das hier nicht das Spezialforum für solche Fragen ist - ich wage es einfach mal.

Ich habe folgende Testseite, bei der der IE versagt (Pre geht trotz display:table; immer über die ganze Breite). Nun möchte ich nicht mit width arbeiten, sondern hoffe auf einen Trick, der den IE 6.0 überzeugt, nur den nötigen Bereich einzufärben (wie er es bei einer Tabelle machen würde):

HTML

<?xml version='1.0' encoding='ISO-8859-1'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>
   Pre-Testseite
  </title>
<style type="text/css">
/*<![CDATA[*/
  pre.t {
  background-color: #f2f2f2;
  border: 2px dotted #a4a4a4;
  color: #000000;
  display: table;
  font-family: "Courier New", Courier, Fixedsys, monospace;
  margin: 0px;
  padding: 2px 6px;
  }
  pre {
  background-color: #f2f2f2;
  border: 2px dotted #a4a4a4;
  color: #000000;
  font-family: "Courier New", Courier, Fixedsys, monospace;
  margin: 0px;
  padding: 2px 6px;
  }
/*]]>*/
</style>
 </head>
 <body>
  <p>
   So soll es im Internet Explorer und im Firefox aussehen. Der Firefox schafft's, IE nat&uuml;rlich nicht:
  </p>
<pre class="t">
=Abs(Summe(Feld="1"))
</pre>
  <p>
   So sieht's im Internet Explorer aus (also kein Unterschied):
  </p>
<pre>
=Abs(Summe(Feld="1"))
</pre>
 </body>
</html>

Alles anzeigen

Vielen Dank für eure Antworten!

Viele Grüße,
Arne

bugcatcher

HTML

<?xml version='1.0' encoding='ISO-8859-1'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>
   Pre-Testseite
  </title>
<style type="text/css">
/*<![CDATA[*/
  pre {
  background-color: #f2f2f2;
  border: 2px dotted #a4a4a4;
  color: #000000;
  display: table;
  font-family: "Courier New", Courier, Fixedsys, monospace;
  margin: 0px;
  padding: 2px 6px;
  }
/*]]>*/
</style>
<!--[if IE]><style type="text/css">pre {width:0px;}</style><![endif]-->
 </head>
 <body>
<pre>
=Abs(Summe(Feld="1"))
</pre>
 </body>
</html>

Alles anzeigen

Dr. Evil

Was spricht gegen display: inline?

sonst könntest du noch ausnutzen, dass der IE alles wie Tabellenzellen behandelt und über die im Stylesheet angegebene Breite/Höhe vergrößert:

Code

* html pre.t {
  width: 1px;
} /* (ja, ich weiß, dass dieser Hack im IE 7, wenn er im Standards Compliance Mode ist, nicht mehr funktioniert, ich weiß aber eben nicht, ob er bis dahin auch width und display kann... (ich glaub's ja nicht))*/

bugcatcher

hier würde ein inline-block gut sein... aber inline alleine? ausserdem taugt der hack nicht für IE7.

Mithrandir

Hallo bugcatcher,

super! Vielen Dank für die schnelle Antwort und den funktionierenden Trick (also doch width - aber in der Form kann ich damit leben ;)). Da ich sowieso ein Extra-Stylesheet für den IE einsetze, ist das ja ziemlich easy umzusetzen.

Dr. Evil

bugcatcher: lass mir doch Zeit zum Editieren

bugcatcher

Sei froh, dass ich dir zeit für das Addressieren deines letzten Postings gelassen habe. ; )

Mithrandir

Uff - seid ihr schnell.

Dr. Evil:
Bei

Code

pre.t {
  background-color: #f2f2f2;
  border: 2px dotted #a4a4a4;
  color: #000000;
  display: inline;
  font-family: "Courier New", Courier, Fixedsys, monospace;
  margin: 0px;
  padding: 2px 6px;
  }

fehlt komischerweise der rechte Rand. Aber trotzdem danke für die Alternative, die jetzt ja wieder ziemlich ähnlich aussieht.

Und nun habe ich entgegen meiner Anforderung auch noch einmal Opera gestartet - da sieht's mit display:inline ziemlich merkwürdig aus. Solange es funktioniert, bleibe ich erst einmal bei width:0px;

Dr. Evil

bin ich
(konnte ja beim Schreiben meines Beitrags noch nicht ahnen, dass Mithrandir noch vor mir was schreibt...)

edit: ja, das ist wieder an bugcatcher gerichtet. Geht hier wirklich viel zu schnell!

noch ein an Mithrandir gerichtetes edit: liegt wohl an den Beschränkungen, die für Inline-Elemente gelten. Keine vorgegebene Breite usw. Aber die andere Lösung funktioniert ja sowieso

bugcatcher

Memmen. Naja. Speedposting ist halt nichts für Anfänger.

Dr. Evil

*heul*

Mithrandir

Komm in mein Stammforum - da wirst du zur Memme.

Ich hatte hier nur das Problem, den Vorschlag zu testen, Feedback zu geben und dann weitere Alternativen vorzufinden.

Aber genug gejammert.

bugcatcher

Wenn wir so weiter machen verwandeln wir das Forum in eine Chat-Application. ; )

Dr. Evil

lieber nicht... phpBB mag ich schon als Forum nicht besonders

bugcatcher

Stimmt allerdings. Manchmal ist weniger mehr.

Dr. Evil

Stimmt. Bei (Tab-)Extensions zum Beispiel

bugcatcher

Yeah. Wir verstehen uns