Text steht über

[frederikring]

Hallo!

Ich habe einen normal über CSS formatierten Text in einem (inline)-DIV das sich von der Hintergrundfarbe abhebt. Jetzt steht aber (zumindest in Firefox und Chrome) der Text ein kleines bisschen über den Rand des DIVs. Im Internetexplorer ist der Rand hingegen ein wenig zu breit. Ist das ein nichtzubehebendes Browser-Problem oder gibt es eine Formatierung hierfür, die ich noch nicht kenne?

Das DIV ist folgendermassen formatiert:

  
.title {  
display:inline;  
background-color:#B8B8B8;  
}  

Der Text so (es steht ein grosser Titel und eine kleine Beschreibung drin):

  
.big {  
font-family:"Century Gothic";  
font-weight: bold;  
font-size: 24px;  
text-transform: uppercase;  
letter-spacing: -2px;  
}  
.small {  
font-family:"Century Gothic";  
font-weight: bold;  
font-size: 12px;  
}  

Und im HTML steht es dann folgendermaßen:

  
<div class="title">  
<span class="big">HEADLINE</span>  
<span class="small">&nbsp;</span>  
<span class="small">subline</span>  
</div>  

Vielen Dank!

[ChrisB]

Hi,

Und im HTML steht es dann folgendermaßen:

<div class="title">
<span class="big">HEADLINE</span>
<span class="small">&nbsp;</span>
<span class="small">subline</span>
</div>

  
Das solltest du erst mal verbessern.  
  
Fuer Ueberschriften gibt es h1 bis h6, und Klassenbezeichner sollten die inhaltiche Bedeutung ausdruecken, und sich nicht auf die \*derzeit\* gewuenschte Darstellung beziehen.  
Und Abstaende realisiert man sinnvoll ueber margin und padding, und nicht mittels geschuetzter Leerzeichen.  
  
MfG ChrisB  
  

-- 
„This is the author's opinion, not necessarily that of Starbucks.“

[frederikring]

Hallo & danke für die Antwort!

Der Tip das Leerzeichen rasuzuschmeissen und das mit margin zu lösen ist prima! Leider macht es aber keinen Unterschied wenn ich den Text als h1 und h2 formatiere, er steht immer noch oben über den Rand des DIVs?

Vielen Dank schon wieder!

Das CSS sieht jetzt mit headlines im übrigen so aus:

  
h1 {  
font-family:"Century Gothic";  
font-weight: bold;  
font-size: 24px;  
text-transform: uppercase;  
letter-spacing: -2px;  
display: inline;  
margin: 0px 4px 0px 0px;  
}  
h2 {  
font-family:"Century Gothic";  
font-weight: bold;  
font-size: 12px;  
display: inline;  
}