CSS und die üblichen Verdächtigen ...

[Xardas der Dunkle]

Es geht mal wieder um die Darstellung von einer CSS formatierten Liste im Browser, unter anderem mal wieder mein Lieblingsbrowser IE http://forum.rpg2000.4players.de/phpBB3/images/smilies/love1.gif.

Ich bin momentan dabei für mein CMS/(Forum) einen Quellcode-Highlighter zu schreiben. Ich möchte nun das das ganze mit Zeilennummern versehen im Browser ausgegeben wird.
Dazu habe ich nun Zeile für Zeile in eine sortierte Liste gepackt.
Das funktioniert auch so weit, wenn nicht die ganzen Browser alle ihre Macke hätten.

Fangen wir mal an:
Internet Explorer 7 und 6
Zeigen die Listennummern nicht an -.-.
Meinen zudem das ganze mit einer verticalen-Scrollleiste ausstatten zu müssen :P.

Firefox, Opera, Safari und IE
Ziehen den Rahmen der Überschrift nicht bis nach hinten durch =(

Hat irgendwer ne Idee wie man das beheben kann?^^

Stört euch nicht an dem Code^^, der ist erstens von PHP erzeugt. Zudem ist es am einfachsten die Leerzeichen über ein geschütztes Leerzeichen auszugeben:

<div class="code">
<dl>
<dt>HTML - Quellcode</dt>
<dd>
<ol>

<li class="html"><span class="xml"><span class="keyword3">&lt;?xml&nbsp;version=<span class="strings">&quot;1.0&quot;</span>&nbsp;encoding=<span class="strings">&quot;UTF-8&quot;</span>&nbsp;?&gt;</span></span></li>
<li class="html"><span class="doctype">&lt;!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;&quot;-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Strict//EN&quot;&nbsp;&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;</span></li>

<li class="html"><span class="keyword1">&lt;html&nbsp;xmlns=<span class="strings">&quot;http://www.w3.org/1999/xhtml&quot;</span>&nbsp;xml:lang=<span class="strings">&quot;de&quot;</span>&nbsp;lang=<span class="strings">&quot;de&quot;</span>&gt;</span></li>
<li class="html">&nbsp;<span class="keyword1">&lt;head&gt;</span></li>
<li class="html">&nbsp;&nbsp;<span class="keyword1">&lt;title&gt;</span>.::&nbsp;Hallo&nbsp;Welt&nbsp;::.<span class="keyword1">&lt;/title&gt;</span></li>

<li class="html">&nbsp;&nbsp;<span class="keyword1">&lt;script&nbsp;type=<span class="strings">&quot;text/javascript&quot;</span>&gt;</span><span class="js">&nbsp;</span></li>
<li class="html"><span class="js"><span class="comments">/*&nbsp;&lt;![CDATA[&nbsp;*/</span></span></li>
<li class="html"><span class="js"><span class="keyword3">function</span>&nbsp;hallo()&nbsp;{</span></li>
<li class="html"><span class="js">&nbsp;&nbsp;&nbsp;alert(<span class="strings">&quot;Hallo&quot;</span>);</span></li>

<li class="html"><span class="js">}</span></li>
<li class="html"><span class="js"><span class="comments">/*&nbsp;]]&gt;&nbsp;*/</span></span></li>
<li class="html"><span class="js">&nbsp;&nbsp;</span><span class="keyword1">&lt;/script&gt;</span></li>
<li class="html">&nbsp;<span class="keyword1">&lt;/head&gt;</span></li>
<li class="html">&nbsp;<span class="keyword1">&lt;body&nbsp;onload=<span class="strings">&quot;hallo();&quot;</span>&gt;</span></li>

<li class="html">&nbsp;&nbsp;<span class="keyword1">&lt;h1&gt;</span>Hallo<span class="keyword1">&lt;/h1&gt;</span></li>
<li class="html">&nbsp;</li>
<li class="html">&nbsp;<span class="keyword1">&lt;/body&gt;</span></li>
<li class="html"><span class="keyword1">&lt;/html&gt;</span></li>
</ol>
</dd>

</dl>
</div>


/**
* Code-Block
*/
div.code {
border:1px solid #A1A1A1;
padding:5px;
background-color:#FEFEFE;
color:#000000;
font-size:10pt;
text-align:left;
width:550px !important;
margin:2px;
padding:0px;
overflow:auto !important;
}

div.code dl {
padding:0px;
margin:0px;
display:block;
}

div.code dl dt {
border:0px;
font-size:11pt !important;
font-weight:bold !important;;
text-decoration:none;
font-style:italic;
color:#000;
padding:0px;
padding-left:4px;
margin:0px;
background:#fff;
border-bottom:1px solid #ddd;
display:block;
}

div.code dl dd {
font-family:'Courier New', Courier, monospace !important;
font-size:10pt !important;
padding:0px;
padding-left:4px;
margin:0px;
background-color:#eee;
border:0px !important;
display:block;
}

div.code dl dd ol {
margin:0px;
margin-bottom:1px;
list-style-type:decimal;
display:block;
}

div.code dl dd ol li {
background:#fff;
border-left:1px solid #ddd;
padding-left: 10px;
line-height: 14px;
white-space:nowrap;
}

/**
* Syntax Highliting
*/
div.code dl span.keyword1 {
font-weight:bold;
color:#2A8000;
}

div.code dl span.keyword2 {
font-weight:bold;
color:#55D500;
}

div.code dl span.keyword3 {
font-weight:bold;
color:#2A7FFF;
}

div.code dl span.keyword4 {
font-weight:bold;
color:#002AFF;
}

div.code dl span.keyword5 {
font-weight:bold;
color:#000080;
}

div.code dl span.operator {
color:#00AA55;
}

div.code dl span.comments {
color:#FFAA2A;
font-style:italic;
}

div.code dl span.strings {
color:#FF0000;
}

div.code dl span.hexnum {
color:#557FFF;
}

div.code dl span.deznum {
color:#000;
}

div.code dl span.oktnum {
color:#8000D5;
}

/**
* Farben für HTML-Syntax-Highliting
*/
div.code dl .xml span.keyword1, div.code dl .html span.keyword1 {
color:#002AFF;
font-weight:normal;
}

div.code dl .xml span.keyword2, div.code dl .html span.keyword2 {
color:#2A7FFF;
font-weight:normal;
}

div.code dl .xml span.keyword3, div.code dl .html span.keyword3 {
color:#3FBF3F;
font-weight:normal;
}

div.code dl .xml span.keyword4, div.code dl .html span.keyword4 {
color:#4BA020;
font-weight:normal;
}

div.code dl .xml span.comments, div.code dl .html span.comments {
color:#FFAA2A;
font-style:italic;
}

div.code dl .xml span.strings, div.code dl .html span.strings {
color:#55AA00;
}

div.code dl .xml span.doctype, div.code dl .html span.doctype {
color:#2A7FFF;
font-style:italic;
}

/**
* Farben für PHP-Syntax-Highliting
*/
div.code dl .php span.keyword1 {
color:#0000BB;
font-weight:normal;
}

div.code dl .php span.keyword2 {
color:#007700;
font-weight:normal;
}

div.code dl .php span.comments {
color:#FF8000;
font-style:italic;
font-weight:normal;
}

div.code dl .php span.strings {
color:#DD0000;
font-weight:normal;
}

Hier noch ein paar Screens:
Internet Explorer 7 (im 6er siehts fast genau so aus ...):
http://img216.imageshack.us/img216/4639/internetexplorer7sv3.jpg (http://img216.imageshack.us/my.php?image=internetexplorer7sv3.jpg)

http://img291.imageshack.us/img291/6185/internetexplorer72yk9.jpg (http://img291.imageshack.us/my.php?image=internetexplorer72yk9.jpg)

Firefox (im Safari und Opera sieht es auch ähnlich aus ...):
http://img180.imageshack.us/img180/3697/firefox1mt8.jpg (http://img180.imageshack.us/my.php?image=firefox1mt8.jpg)

http://img329.imageshack.us/img329/6084/firefox2fg8.jpg (http://img329.imageshack.us/my.php?image=firefox2fg8.jpg)

/EDIT: Argh hatte den Beitrag so aussem Quatier rüber kopiert, ... und vergessen folgendes zu ändern:

/**
* Internet Explorer bis einschließlich Version 6
*/
* html div.code dl dd ol li {
margin-left:40px;
}

/**
* Internet Explorer 7
*/
*:first-child+html div.code dl dd ol li {
margin-left:40px;
}

damit werden nun zumindest die Zeilennummern angezeigt. Bleibt, aber noch folgendes Problem. Im IE 6 werden die Codezeilen nicht bis hinten hin weiß unterlegt.
http://img185.imageshack.us/img185/445/fooel5.jpg (http://img185.imageshack.us/my.php?image=fooel5.jpg)

Ich werde morgen mal die aktuelle Version aufen Server laden ...

[Manni]

Du könntest versuchen, der Liste den weißen Hintergrund zu geben.
Für die Überschrift kannst du zum Beispiel nur die Liste in ein scrollendes <div> reinpacken oder du gibst der Liste oben einen Rahmen. Das hat aber den Nachteil, dass es nicht funktioniert, wenn die Liste kürzer als die Überschrift ist...

[Xardas der Dunkle]

Ich habe das ganze mal auf meinen Server geladen: http://xcms.projects.x-scripter.com/articles/quellcode.html

Das mit den geänderten Farben ändert im IE auch nix =(, weil der die <li>'s nicht bis ans Ende durchzieht!

[Manni]

Dann versuch es halt mit dem scrollenden <div>.

[Xardas der Dunkle]

o_Ô. Was hat die scrollende <div> damit zu tun, das die <li>'s im IE nicht komplett bis nach hinten durchgezogen werden?

Ich könnte höchtens versuchen in jedes <li> nochmal ein <div> reinzupacken, bezweifle, aber das das viel bringen wird.

/edit: <div>'s in den <li>'s bringen auch keine Änderung. Zwar, bringen die zumindest den IE7 dazu, alles weiß darzustellen, aber nicht den IE 6. Zudem werden dadurch im FF scrollbars dargestellt, wo eig. keine gebraucht werden^^.

[mitaki]

o_Ô. Was hat die scrollende <div> damit zu tun, das die <li>'s im IE nicht komplett bis nach hinten durchgezogen werden?

/edit: <div>'s in den <li>'s bringen auch keine Änderung. Zwar, bringen die zumindest den IE7 dazu, alles weiß darzustellen, aber nicht den IE 6. Zudem werden dadurch im FF scrollbars dargestellt, wo eig. keine gebraucht werden^^.
overflow kann - zumindest im IE 7 - ein nicht-standardkonformes Konzept namens hasLayout auslösen. Dies bewirkt, dass CSS-Eigenschaften sich anders auf die Darstellung auswirken.

Du kannst versuchen, dem scrollbaren div position: relative; und/oder zoom:1; zu geben, damit das Element 'Layout' erhält, eventuell hilft das.

Mehr Informationen zu hasLayout (http://onhavinglayout.fwpf-webdesign.de/). Im Internet Explorer 8 wird das hasLayout-Konzept verschwinden und eine CSS-konforme Darstellung möglich werden.

[Xardas der Dunkle]

Bringt leider auch nix =(.
IE 6 zeigt plötzlich nur noch grau o_Ô und der 7ner rührt sich gar nicht.

Ich glaube ich werde im IE den grauen Rahmen rausnehmen, das ist das einfachste ...

[Manni]

o_Ô. Was hat die scrollende <div> damit zu tun, das die <li>'s im IE nicht komplett bis nach hinten durchgezogen werden?

Ich könnte höchtens versuchen in jedes <li> nochmal ein <div> reinzupacken, bezweifle, aber das das viel bringen wird.

/edit: <div>'s in den <li>'s bringen auch keine Änderung. Zwar, bringen die zumindest den IE7 dazu, alles weiß darzustellen, aber nicht den IE 6. Zudem werden dadurch im FF scrollbars dargestellt, wo eig. keine gebraucht werden^^.

Wenn du das <div>, das die gesamt Liste umgibt, nimmst und ihm eine Hintergrundfarbe verpasst, sollte es die Breite der Liste annehmen und damit der ganzen Liste den entsprechenden Hintergrund geben. Eigentlich sollte das auch funktionieren, wenn du der Liste die entsprechende Farbe gibst (also dem <ol> Element)

[Xardas der Dunkle]

Ja, die war uhrsprünglich grau gefärbt, damit der die Zeilennummern grau unterlegen dargstellt werden.
Die <li>'s sind hingen weiß unterlegt, damit der code auf weißen Grund erscheint. In allen Browsern in den ich es getestet habe werden die <li>'s auch bis nach hinten durchgezogen, so das der Code auf weißen Grund steht, außer im IE!.
Und das ist das Problem.
Ich habe mir jetzt damit beholfen, das der graue Rahmen im IE nicht existiert sieht zumindest vernünftiger aus, als wenn der Code pklötzlich mitten drin auf grauen Hintergrund steht =(.