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 .

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:

1. Internet Explorer 7 und 6
   Zeigen die Listennummern nicht an -.-.
   Meinen zudem das ganze mit einer verticalen-Scrollleiste ausstatten zu müssen :P.
   
2. 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:

Code:

    <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:

/**
* 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 ...):




Firefox (im Safari und Opera sieht es auch ähnlich aus ...):

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

Code:

/**
* 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.

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