span class width wird von firefox nicht interpretiert
0 0 1 
Tim Tepaße
span class width wird von firefox nicht interpretiert
Hallo,
ich habe folgendes Problem: ich habe viele Elemente, die wie in einer Tabelle schön geordnet erscheinen sollen. Dazu weise ich jeden Element ein span class zu mit einer festen Breite. Im IE funktioniert das super, Mozilla/Firefox ignorieren dies aber geflissentlich. Wie löse ich das Problem?
Hier das HTML Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.breite{
width:150px;
background-color:#d0d0d0;
}
-->
</style>
</head>
<body>
<span class="breite">Eintrag 1</span>
<span class="breite">Eintrag 2</span>
<span class="breite">Eintrag 3</span>
<span class="breite">Eintrag 4</span>
</body>
</html>
Danke, Darth Werner
-
Hallo Darth!
> <style type="text/css"> > <!-- [code lang=css] > > .breite{ > width:150px; > background-color:#d0d0d0; > }-->
</style>[...]
<span class="breite">Eintrag 1</span>
<span class="breite">Eintrag 2</span>
<span class="breite">Eintrag 3</span>
<span class="breite">Eintrag 4</span>[/code]
Wie bitte soll auch ein Inline-SPAN-Element eine Breite zugewiesen
bekommen? Definiere es alsdisplay:block;.℆, ℒacℎgas
--
Bei der intendierten Realisierung der linguistischen Simplifizierung
des regionalen Idioms resultiert die Evidenz der Opportunität extrem
apparent, den elaborierten und quantitativ opulenten Usus nicht assi-
milierter Xenologien konsequent zu eliminieren!-
Wenn ich es als Display:block definiere, dann stehen die Elemente aber nichtmehr nebeneinander. Und wenn ich float benutze, dann rafft der Container, in dem sich das alles befindet, die Höhe nicht mehr, weil ja aus dem Textfluss herausgerissen.
Ratlos,
Darth Werner
-
-
Hallo Darth.
Im IE funktioniert das super,
Also falsch, wie immer.
Mozilla/Firefox ignorieren dies aber geflissentlich.
Was absolut korrekt ist.
Wie löse ich das Problem?
Das Element <span> ist ein Inlineelement. Entweder wandelst du <span> in ein Blockelement um und machst es damit empfänglich für Höhen- und Breitenangaben, oder verwendest gleich ein an der erforderlichen Stelle passendes Blockelement.
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
30 Days to becoming an Opera8 Lover -- Day 19: Notes
Meine Browser: Opera 8.01 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software]-
Ashura, kannst Du uns ein Beispiel geben, wie der Code aussehen müsste? Mich interessiert das auch. Problem ist hier auch wohl, dass die Elemente horizontal stehen, oder?
Klaus
-
Hallo Klaus.
Ashura, kannst Du uns ein Beispiel geben, wie der Code aussehen müsste?
Wer seid „ihr“?
Mich interessiert das auch. Problem ist hier auch wohl, dass die Elemente horizontal stehen, oder?
Zumindest Darth's Problem lässt sich leichter lösen:
ich habe viele Elemente, die wie in einer Tabelle schön geordnet erscheinen sollen.
Wenn es tabellarische Daten sind, dann verwende auch eine Tabelle dafür.
Laut Darth's Quellcodebeispiel sollen die einzelnen Punkte untereinander stehen. Da Blockelemente umbrechen, kann man, sofern man sie nebeneinander haben möchte, float anwenden. Damit werden die Elemente aber aus dem Dokumentenfluss genommen, d. h. sie können ihre Elternelemente nicht mehr beeinflussen.
Zudem sollte auf einem darauffolgenden Element clear angewendet werden, um den Dokumentenfluss wiederherzustellen.Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
30 Days to becoming an Opera8 Lover -- Day 19: Notes
Meine Browser: Opera 8.01 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software]
-
-
-
Hallo,
ich habe folgendes Problem: ich habe viele Elemente, die wie in einer Tabelle schön geordnet erscheinen sollen. Dazu weise ich jeden Element ein span class zu mit einer festen Breite. Im IE funktioniert das super, Mozilla/Firefox ignorieren dies aber geflissentlich.
span (in der Default HTML-Darstellung) ist im CSS-speak ein sogenanntes „non-replaced inline element“. Diese Inline-Elemente sind Textstücke, die ihrer Natur nach keine feste Breite haben. Und auch wenn man ihnen eine feste Breite zuweist, nehmen sie diese nicht an, da das nicht zu ihrer Natur gehört. Außerdem ist das so im CSS-Standard festgeschrieben.
Wie löse ich das Problem?
Du solltest den spans sagen, dass sie keine Inline-Elemente mehr sein sollen, sondern Blockelement. Dazu nutzt Du display:block. Blockelementen kann man eine feste Breite zuweisen.
Dummerweise hast Du dann ein neues Problem - Blockelemente erzeugen einen Absatz, den Du sicherlich nicht willst und erstrecken sich über die gesamte Breite. Es gibt zwei mögliche Lösungen.
a) Du nutzt nicht display:block, sondern display:table-cell, da Du ja einen tabellenähnlichen Effekt erreichen möchtest. Allerdings macht das in einigen unmodernen Browsern einige Probleme, ist also derzeit nicht wirklich praktikabel. Traurig ist die Realität.
b) Du nutzt doch display:block, lässt die Elemente aber floaten. Alle Elemente auf float:left; mit gleichen Breiten sollte ein ansprechendes Ergebnis liefern.
Zur zweiten Lösung zwei Hinweise auf ähnliche Lösungsstrategien. Ich vermute, Du willst irgendeine horizontale Navigationsleiste basteln. Diese sind in den letzten beiden Jahren recht hip geworden, insbesondere, wenn man sie semantisch überkorrekt als Liste auszeichnet und mittels CSS in eine horizontale Leiste umwandelt. Sozusagen einer der vorvorletzten Akt der CSS-Coolness. Inzwischen wird das Thema auch in SELFHTML behandelt:
http://de.selfhtml.org/css/layouts/navigationsleisten.htm#horizontal
(Zum generellen Verständnis sollte man die ganze Seite lesen)Das ganze hat ursprünglich sich von einem Artikel bei A List Apart aus verbreitet, wenn Du dagegen Lust auf englischen Text hast:
http://www.alistapart.com/articles/taminglists/Tim