Tipografia per web, capolettera crossbrowser

Per fare un capolettera i CSS3 permettono l'utilizzo di selettori appositi, ma se vogliamo ottenere lo stesso effetto senza avere nessun problema di compatibilità, possiamo utilizzare una classe ed applicarla alla prima lettera del paragrafo attraverso lo span.

Ecco il codice di esempio del CSS (le parentesi quadre vanno sostituite con le angolari)

[style type="text/css"]

#wrapper {

    width: 500px;

    margin: 0 auto;

    background-color: #FFF;

    font-family: Arial; 

    color: #333;

    font-size: 14px;

    overflow: auto;

}

.capolettera { 

float: left; 

color: #900; 

font-size: 75px; 

line-height: 60px; 

padding-top: 4px; 

padding-right: 8px; 

padding-left: 3px; 

font-family: Arial; 

}

[/style]

Ed ecco il codice HTML di applicazione (le parentesi quadre vanno sostituite con le angolari)

[div id="wrapper"]
[p]
[span class="capolettera"]L[/span] orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
[/p]
[/div]