Detlef G.: first-letter rückgängig machen

Beitrag lesen

Hallo Micha

ich habe auf meiner Seite mittels first-letter den ersten Buchstaben (das erste Zeichen) in einem Absatz formatiert. Nun möchte ich aber, wenn dieser Absatz (Quell)code enthält, dass diese Formatierung nicht greift.
<p><code>window.alert("Hallo Welt!");</code></p>

Wie macht man Pseudoelemte rückgängig? Meine gescheiteren Versuche:

/* Formatiert erstes Zeichen im Absatz */
div#content p:first-letter {
}


>   
  
~~~css
div#content p code {  
 /* alle gesetzten Eigenschaften mit !important wieder auf die gewünschten Werte zurücksetzen */  
 eigenschaft:wert !important;  
}

Das funktioniert allerdings wohl nur im IE.

Da bleibt dir nur übrig, dafür zu sorgen, dass das erste Zeichen eines Absatzes kein code ist.

Entweder du lässt den Absatz um den code-Teil weg oder verwendest (nur wenn nötig) dafür ein anderes Blockelement.

Anstatt

</p>  
<p><code>window.alert("Hallo Welt!");</code></p>

könntest du schreiben

<code>window.alert("Hallo Welt!");</code></p>

mit

div#content p code {  
 display:block;  
}

Oder

</p>  
<div><code>window.alert("Hallo Welt!");</code></div>

Eine andere Möglichkeit bestände darin, dafür zu sorgen, dass das erste Zeichen des code-Elements nicht angezeigt wird.
<p><code><span>&nbsp;</span>window.alert("Hallo Welt!");</code></p>

CSS dazu:

div#content p code {  
 /* für IE alle gesetzten Eigenschaften mit !important wieder auf die gewünschten Werte zurücksetzen */  
 eigenschaft:wert !important;}  
div#content p code span {  
 /* für alle Browser dafür sorgen, dass das Leerzeichen keinen Platz beansprucht */  
 font-size:0;  
}  

Ob dies in allen Browsern funktioniert, habe ich allerdings nicht getestet.

Auf Wiederlesen
Detlef

--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!