Unterschied "font-weight:bold" und "<b>"

[Ralf Kaiser]

Halli Hallo,

bei einem Webprojekt bin ich gerade dabei möglichst alle direkten Formatierungen in CSS Formatierungen umzuwandeln.

An einigen Stellen waren Texte mit dem "<b>" Tag als Fettschrift formatiert. Diese Stellen habe ich jetzt mit einer CSS-Klasse die "font-weight:bold;" enthält formatiert. Die Zeichengrösse dieser Texte ist die selbe wie der Rest des Textes.

Wenn ich mir diese Seite im Browser ansehe so sieht es so aus, als wenn die Textteile die mit der CSS-Klasse formatiert sind garnicht als Fettschrift dargestellt werden (sie sehen normal aus). Erst wenn ich diese Änderung testweise rückgängig mache, also wieder mit "<b>" formatiere dann sieht der Text deutlich fetter aus.

Erstellt wird die Seite mit VisualStudio (es ist ASP.NET), allerdings kommt ja hinterher reines HTML raus.

Ich habe mit der Firefox-WebDeveloper Toolbar das CSS und die Seite untersucht und die Klasse steht korrekt im CSS und wurde den entsprechenden Textstellen auch wirklich zugewiesen.

Weiss jemand warum ich ein Darstellungsunterschied zwischen direkter Formatierung und des CSS Formatierung ergeben kann??

Danke im vorraus,
Ralf

[Gunther]

Hallo Ralf,

Weiss jemand warum ich ein Darstellungsunterschied zwischen direkter Formatierung und des CSS Formatierung ergeben kann?

ich kann das mit meinem FF 2.0.0.4 nicht nachvollziehen.
Könntest du bitte mal die relevanten Teile deines HTML- und CSS-Codes posten?

Gruß Gunther

[Ralf Kaiser]

ich kann das mit meinem FF 2.0.0.4 nicht nachvollziehen.
Könntest du bitte mal die relevanten Teile deines HTML- und CSS-Codes posten?

OK, hier aus der CSS:

.intromessage
{
 font-size: 16pt;
 font-family: Serif, 'Times New Roman' , Times
}
.intromessagebold
{
 font-size: 16pt;
 font-family: Serif, 'Times New Roman' , Times
 font-weight: bolder;
}

In der Seite steht dann irgendwo:

<asp:Label ID="Label4" runat="server" CssClass="intromessage" Font-Bold="False" Text="Ich bin normal"></asp:Label>
<asp:Label ID="Label5" runat="server" CssClass="intromessagebold" Font-Bold="False" Text="Ich bin bold"></asp:Label>

Diese Labels werden in der generierten HTML-Seite (also das was "im Browser ankommt") in SPAN-Tags umgesetzt denen die entsprechenden Klassen zugewiesen wurden und sehen aber vollkommen gleich aus. Eigentlich sollte das zweite Label ja fett sein.

Formatiere ich das zweite Label direkt als fett dann wird dies wieder in einen SPAN umgesetzt, der dann aber zusätzlich noch ein STYLE-Tag mit der Angabe "font-weight:bold" enthält (ich dachte zuerst ASP.NET würde das mit <B> machen). In dem Fall wird das Label korrekt als fett dargestellt.

Ich kann mir das im Moment nicht erklären.

Irgend eine Idee??

Danke im vorraus,
Ralf

[Ralf Kaiser]

Noch eine Korrektur:

<asp:Label ID="Label4" runat="server" CssClass="intromessage" Font-Bold="False" Text="Ich bin normal"></asp:Label>
<asp:Label ID="Label5" runat="server" CssClass="intromessagebold" Font-Bold="False" Text="Ich bin bold"></asp:Label>

Dieses Font-Bold="False" war irrtümlich in dem Text meines letzten Postings enthalten (ich hatte mit den Fonteinstellungen herumexperimentiert und vergessen es zu löschen bevor ich es hier rein kopierte). Es muss lauten:

<asp:Label ID="Label4" runat="server" CssClass="intromessage" Text="Ich bin normal"></asp:Label>
<asp:Label ID="Label5" runat="server" CssClass="intromessagebold" Text="Ich bin bold"></asp:Label></td>

Ralf

[Mathias Brodala]

Hallo Ralf.

<asp:Label ID="Label4" runat="server" CssClass="intromessage" Text="Ich bin normal"></asp:Label>
<asp:Label ID="Label5" runat="server" CssClass="intromessagebold" Text="Ich bin bold"></asp:Label></td>

Dieser Codes ist irrelevant. Wie sieht der Code aus, der beim Client ankommt?

Einen schönen Donnerstag noch.

Gruß, Mathias

[Ralf Kaiser]

Hallo Ralf.

<asp:Label ID="Label4" runat="server" CssClass="intromessage" Text="Ich bin normal"></asp:Label>
<asp:Label ID="Label5" runat="server" CssClass="intromessagebold" Text="Ich bin bold"></asp:Label></td>

Dieser Codes ist irrelevant. Wie sieht der Code aus, der beim Client ankommt?

Einen schönen Donnerstag noch.

Gruß, Mathias

Wie ich schon sagte es werden SPAN-Tags mit den entsprechenden Klassen erzeugt:

<span id="ctl00_ContentPlaceHolder1_Label4" class="intromessage">Ich bin normal</span>
<span id="ctl00_ContentPlaceHolder1_Label5" class="intromessagebold">Ich bin bold</span>

Kommt direkt aus dem Browser und die beiden SPANs sehen sowohl in FF als auch im IE optisch genau gleich aus.

Ralf

[Gunther]

Hi!

ich kann das mit meinem FF 2.0.0.4 nicht nachvollziehen.
Könntest du bitte mal die relevanten Teile deines HTML- und CSS-Codes posten?

OK, hier aus der CSS:

.intromessage
{
font-size: 16pt;
font-family: Serif, 'Times New Roman' , Times
}
.intromessagebold
{
font-size: 16pt;
font-family: Serif, 'Times New Roman' , Times
font-weight: bolder;
}

nur mal als Hinweis:

• 'bolder' ist etwas anderes als 'bold' - siehe font-weight

• Bei der Angabe für font-family [Zitat]Es empfiehlt sich, solche generische Schriftarten als letzte Angabe einer Wertzuweisung an font-family zu notieren - wie im ersten der obigen Beispiele. Damit bieten Sie dem Browser die Chance, eine Schriftart auszuwählen, die zumindest vom Typ her der gewünschten entspricht, falls diese auf dem System nicht vorhanden ist.[/Zitat]

• 'pt' ist keine gute Wahl für die Schriftgröße (außer für die Druckausgabe)

In der Seite steht dann irgendwo:

<asp:Label ID="Label4" runat="server" CssClass="intromessage" Font-Bold="False" Text="Ich bin normal"></asp:Label>
<asp:Label ID="Label5" runat="server" CssClass="intromessagebold" Font-Bold="False" Text="Ich bin bold"></asp:Label>

Irgend eine Idee??

Ich kenne mich zwar mit deiner Software nicht aus, aber 'Font-Bold="False"' würde mich stutzig machen.

Besser wäre natürlich, wenn du den generierten Quelltext posten würdest.

Gruß Gunther

[Gunther]

Hi!

ich kann das mit meinem FF 2.0.0.4 nicht nachvollziehen.
Könntest du bitte mal die relevanten Teile deines HTML- und CSS-Codes posten?

OK, hier aus der CSS:

.intromessage
{
font-size: 16pt;
font-family: Serif, 'Times New Roman' , Times
}
.intromessagebold
{
font-size: 16pt;
font-family: Serif, 'Times New Roman' , Times
font-weight: bolder;
}

da habe ich den Wald vor läuter Bäumen nicht gesehen ;).
Hinter deiner Font-family Anweisung _fehlt_ das ';', weshalb die font-weight Anweisung nicht erkannt wird.

Gruß Gunther

[Ralf Kaiser]

da habe ich den Wald vor läuter Bäumen nicht gesehen ;).
Hinter deiner Font-family Anweisung _fehlt_ das ';', weshalb die font-weight Anweisung nicht erkannt wird.

Autsch! Das tut weh!  :-)

Vielen Dank, dass du die Tomaten auf meinen Augen entfernt hast!!!!

Ciao,
Ralf

[Gunnar Bittersmann]

Hello out there!

bei einem Webprojekt bin ich gerade dabei möglichst alle direkten Formatierungen in CSS Formatierungen umzuwandeln.

Wozu? Was soll das? Was sollen haufenweise nichtssagende 'span'-Elemente im Markup?

'<span class="intromessagebold">Lorem ipsum</span>'ist kein besseres Markup als '<b>Lorem ipsum</b>'.

Besser wäre '<strong>Lorem ipsum</strong>'.

Ersetze '<b>' durch '<strong>' und '</b>' durch '</strong>', außerdem '<i>' durch '<em>' und '</i>' durch '</em>'.

Wenn’s sein muss, kannst du den 'strong'- und 'em'-Elementen auch 'class'-Attribute geben.

See ya up the road,
Gunnar