zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden [CSS] ::first-line im Firefox = Problem?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.02.2020, 18:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.02.2020
Beiträge: 2
Frokuss befindet sich auf einem aufstrebenden Ast
Standard [CSS] ::first-line im Firefox = Problem?

Hallo Leute,

bin neu hier im Forum und sage mal so, habe länger nichts mehr mit Webdesign gemach...

Und zwar bin ich auf ein Problem gestoßen, welches im Edge richtig angezeigt wird, bei mir aber im Firefox nicht. Dort wird bei mir die mytitle-Box übergroß dargestellt - sprich die Box ist breiter als der Text in ihr.
Code:
<!doctype html>
<html lang="de">
	<head>
		<title>Bla bla bla und noch mehr bla..</title>
	</head>
	<style>
html{
	font-size:16px;
}

mytitle{
	display:inline-block;
	position:absolute;
	top:22%;
	left:50px;
	color:#ffffff;
	font-size:150%;
	background-color:rgba(100, 195, 44, 0.4);
	font-style:italic;
}

mytitle:first-line{
	font-size:240%;
	font-style:normal;
}
		</style>
	</head>
	<body>
		<mytitle>
Irgendein Titel<br />
langweiliger Untertitle...
		</mytitle>
	</body>
</html>
Das Problem tritt alerdings nur auf, wenn ich mit der Pseudo-Klasse (":first-line") arbeite. Daher wollte ich mich mal erkundigen, ob auch bei anderen das Problem auftritt, oder nur bei mir... Arbeite mit Firefox 72.0.2 (64-Bit)

Gruß Frokuss
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.02.2020, 09:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.069
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Und im Chrome sieht es wieder anders aus.

Ein Element mytitle gibt es in HTML nicht.

"display: inline-block" und "position: absolute" sind für die von dir gewünschte Darstellung weder gedacht noch geeignet.

Für das br-Element sehe ich auch keinen Sinn.

Die Browser können nur korrekt arbeiten, wenn der Quelltext von HTML und CSS sich an die vorgegebenen Regeln hält und sinnvoll angewandt wird.

"display: inline-block", "position: absolute", "br" und ähnliche Angaben haben heutzutage eigentlich nur noch Erinnerungswert. In der Praxis sind sie bis auf sehr wenige Ausnahmen (die ich bei dir nicht sehe) überflüssig oder für responsive Designs sogar störend.

Beschäftige dich mal mit Flexbox (display: flex) und CSS-Grid (display: grid).

Geändert von MrMurphy (14.02.2020 um 09:50 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.02.2020, 16:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.02.2020
Beiträge: 2
Frokuss befindet sich auf einem aufstrebenden Ast
Standard

Danke MrMurphy. Das waren in der Tat gute Ratschläge Bzw. gute Dinge, die ich nicht kannte. Meine CSS-Kenntnisse sind sehr eingerostet! Muss mir dummerweise auch noch mal HTML5 bzw XHTML angucken...

Was ich leider nicht dazu gesagt hatte (da ich das als unnötig erachtet habe) ist, dass der Container über einem Bild liegt. Daher kann ich weder mit dem Grid noch mit dem flex arbeiten. Wobei beides echt cool ist und ich mich da für andere Inhalte (im Content) mal dran setzen werde.

In der Tat war das mit dem br obsolet Danke

Was ich aber trotzdem bis jetzt nicht lösen konnte ist, dass im Firefox die Box viel zu groß ist, daher es würden noch mehr Worte in die Zeile passen... Dies kann ich leider nur mit der Width-Angabe lösen Habe da gefühlt alles auspobiert...

Gruß Frokuss
Mit Zitat antworten
  #4 (permalink)  
Alt 02.03.2020, 09:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.039
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Wie soll es am Ende denn überhaupt aussehen? Gibt es ein Bild vom gewünschten Design?
Mit Zitat antworten
  #5 (permalink)  
Alt 03.03.2020, 09:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.069
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Zitat:
Muss mir dummerweise auch noch mal HTML5 bzw XHTML angucken...
XHTML? Unter gar keinen Umständen. XHTML wurde bereits 2008 ganz offiziell begraben und jede Weiterentwicklung eingestellt.

dummerweise? Eindeutig nein. Auch die Entwicklung der Hardware ist mit der Verbreitung von Tablets und Smartphones deutlich vorangeschritten. Um mit möglichst wenig Aufwand Webseiten an alle Endgeräte anzupassen sind die Neuerungen nicht nur sinnvoll sondern sogar erforderlich. Dazu grade auch Flexbox und CSS-Grid.

Dazu gehört auch die eindeutige Trennung von HTML und CSS. So muss der HTML-Quelltext, der ja die entscheidenden Informationen jeder Webseite enthält, für alle Endgeräte nur einmal erstellt werden. Das Erstellen und vor allem Pflegen unterschiedlicher Quelltexte hat sich auch schon lange als Sackgasse erwiesen. Durch HTML5 und CSS3 gibt es dafür auch sachlich keinen Grund mehr.

Zitat:
Was ich leider nicht dazu gesagt hatte (da ich das als unnötig erachtet habe) ist, dass der Container über einem Bild liegt.
Das spielt bei einem korrekten HTML-Quelltext keine Rolle.

Zitat:
Daher kann ich weder mit dem Grid noch mit dem flex arbeiten.
Meine Erfahrung: Solche Aussagen stimmen nicht. Zeig mal einen Link zu der Seite oder ersatzweise den kompletten HTML- und CSS-Quelltext. Dazu dann auch die Größe der Bilder.

Zitat:
Was ich aber trotzdem bis jetzt nicht lösen konnte ist, dass im Firefox die Box viel zu groß ist, daher es würden noch mehr Worte in die Zeile passen... Dies kann ich leider nur mit der Width-Angabe lösen Habe da gefühlt alles auspobiert...
Bei dem Problem können wir dir wie bereits geschrieben ohne die notwendigen Hintergrundinformationen nicht weiterhelfen. Es muss ja auch geklärt werden, ob deine Vorstellungen überhaupt mit HTML und CSS gelöst werden können.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
error_reporting(E_ALL); paracelsus Serveradministration und serverseitige Scripte 37 05.06.2008 08:36
Liste im IE StarSt0rm CSS 3 22.08.2007 21:04
Div im IE zu hoch RancoR CSS 10 10.07.2007 00:11
Overflow Problem Firefox / IE SURE612 CSS 11 14.07.2006 15:40
Problem mit Background-Color im FireFox to.ni CSS 2 31.08.2004 12:13


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:09 Uhr.