Warum reagiert FF nicht auf width?

Hier können allgemeine Fragen zu HTML und CSS gestellt und diskutiert werden.
Antworten
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Warum reagiert FF nicht auf width?

Beitrag von MarkusR »

Da ich mich ja gerne belehren lasse, wie toll es sein muß endlich ohne Tabellen und dann auch noch mit Firefox zu arbeiten, stehe ich jetzt mal wieder vor dem Problem, daß ganz simple Sachen im FF eben nicht funktionieren.

Ausgangslage

Code: Alles auswählen

<style>
.ansprechpartner  {
	display: inline;
	width:200px;
}
.belegung  {
	display: inline;
}
</style>

<div>
<div class="ansprechpartner"><a href="" >Nicolai v. Tsurikov</a></div>
<div class="belegung">60 Termine frei (0% belegt)</div>
</div>
<div>
<div class="ansprechpartner"><a href="" >Vaclav Modelsky</a></div>
<div class="belegung">60 Termine frei (0% belegt)</div>
</div>
Dabei soll eine zweispaltige Liste entstehen, was vom IE auch korrekt dargestellt wird. FF kümmert sich einen Dreck darum.

Was habe ich an der Funktion von "width" falsch verstanden?
Dateianhänge
Aber FF kümmert sich nicht drum...
Aber FF kümmert sich nicht drum...
div_ff.gif (1.08 KiB) 10454 mal betrachtet
So stellt es der IE wie per CSS definiert dar.
So stellt es der IE wie per CSS definiert dar.
div_ie.gif (1.11 KiB) 10454 mal betrachtet
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von MarkusR »

Leider funzt es nur so:

Code: Alles auswählen

<style> 
.ansprechpartner  { 
   float: left; 
   width:200px; 
} 
.belegung  { 
   float: left; 
} 
</style> 

<div> 
<div class="ansprechpartner"><a href="" >Nicolai v. Tsurikov</a></div> 
<div class="belegung">60 Termine frei (0% belegt)</div> 
<br clear="all">
</div> 
<div> 
<div class="ansprechpartner"><a href="" >Vaclav Modelsky</a></div> 
<div class="belegung">60 Termine frei (0% belegt)</div> 
<br clear="all">
</div>
Dabei stört mich das gewaltsame Aufbrechen mittels
<br clear="all">
ohne das die DIVs aus ihrem umgebenden Container DIV herauslaufen... :?
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Benutzeravatar
Matthias V
Modul-Entwickler
Beiträge: 1251
Registriert: 01.01.1970 01:00
Wohnort: Sondershausen
Hat sich bedankt: 54 Mal
Danksagung erhalten: 147 Mal
Kontaktdaten:

Beitrag von Matthias V »

Hallo Markus,

Inline-Elemente haben nun mal keine breite. FF verhält sich so wie sich das gehört, nur der IE macht wieder was falsch:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display hat geschrieben:inline = Erzwingt die Anzeige im Text - das Element wird im laufenden Textfluss angezeigt.
inline-block = Erzeugt äußerlich einen Block, für den Breite, Höhe und Außenabstand angegeben werden kann, belässt das Element jedoch im laufenden Textfluss - ähnlich einem "inline replaced element" wie img. Dieser Wert wird erst mit CSS 2.1 eingeführt.
Gruß Matthias V

P.S. ich mache so etwas immer mit float: left und margin-left beim rechts stehenden Element.
mod_Guestbook 4.1.0

Features:
- Einträge als ConPresso-Artikel
- benutzt Templates, Rubriken, ...
- Captcha
- BB-Code + Smilies + Zitieren
- Badwords
- Anonymisierung
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von MarkusR »

Wenn sich das so gehört, dann ist eben der Standard völliger Quatsch (und das Einführen von inline-block zeigt ja, daß aus einem Bug ein Feature gemacht werden soll).
Ich hätte auch wenig Probleme mit dieser Lösung, wenn ineinander verschachtelte DIVs auch ineinander verschachtelt angezeigt würden.

Hier mal das Problem in Text und Bild

Code: Alles auswählen

<style> 
.ansprechpartner  { 
   float: left; 
   width:200px; 
} 
.belegung  { 
   float: left; 
} 
.underline  {
	border-bottom: 1px solid red;
	padding: 2px;
	width: 400px;
	}
</style> 

<div class="underline"> 
	<div class="ansprechpartner"><a href="" >Nicolai v. Tsurikov</a></div> 
	<div class="belegung">60 Termine frei (0% belegt)</div> 
</div> 
<div class="underline"> 
	<div class="ansprechpartner"><a href="" >Vaclav Modelsky</a></div> 
	<div class="belegung">60 Termine frei (0% belegt)</div> 
</div>
<div class="underline"> 
	<div class="ansprechpartner"><a href="" >Nicolai v. Tsurikov</a></div> 
	<div class="belegung">60 Termine frei (0% belegt)</div> 
</div> 
<div class="underline"> 
	<div class="ansprechpartner"><a href="" >Vaclav Modelsky</a></div> 
	<div class="belegung">60 Termine frei (0% belegt)</div> 
</div>
<div class="underline"> 
	<div class="ansprechpartner"><a href="" >Nicolai v. Tsurikov</a></div> 
	<div class="belegung">60 Termine frei (0% belegt)</div> 
</div> 
<div class="underline"> 
	<div class="ansprechpartner"><a href="" >Vaclav Modelsky</a></div> 
	<div class="belegung">60 Termine frei (0% belegt)</div> 
</div>
Dateianhänge
div_ff2.gif
div_ff2.gif (3.08 KiB) 10128 mal betrachtet
div_ie2.gif
div_ie2.gif (3.04 KiB) 10125 mal betrachtet
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Benutzeravatar
Matthias V
Modul-Entwickler
Beiträge: 1251
Registriert: 01.01.1970 01:00
Wohnort: Sondershausen
Hat sich bedankt: 54 Mal
Danksagung erhalten: 147 Mal
Kontaktdaten:

Beitrag von Matthias V »

Ja auch dafür gibt es eine Erklärung.

Die div's floaten eben über alle Elemente hinweg. Das hat auch Vorteile, wenn man ein Bild über mehrere Absätze (p) floaten lassen möchte.

Du musst einfach noch ein

Code: Alles auswählen

<div style="clear: both;"></div>
bzw.

Code: Alles auswählen

<div style="clear: left;"></div>
nach dein div.belegung setzen, so dass es noch innerhalb div.underline ist.

Oder wie ich gerade nachgelesen habe ist es einfacher einfach in dein .underline noch ein clear: left; zu setzen, so dass du kein extra div brauchst: http://de.selfhtml.org/css/eigenschafte ... .htm#clear

P.S. Der IE arbeitet eben nicht sehr regelkonform, sondern versucht Fehler in der Programmierung eigenmächtig zu beheben. Aber gerade dadurch macht er auch besondere Probleme.
mod_Guestbook 4.1.0

Features:
- Einträge als ConPresso-Artikel
- benutzt Templates, Rubriken, ...
- Captcha
- BB-Code + Smilies + Zitieren
- Badwords
- Anonymisierung
Benutzeravatar
balu
ConPresso-Entwickler
Beiträge: 1748
Registriert: 01.01.1970 01:00
Hat sich bedankt: 81 Mal
Danksagung erhalten: 133 Mal

Beitrag von balu »

Hi Markus,

Matthias hat eigentlich alles gesagt, aber ich will doch noch eben was ergänzen: Wie sollte ein Browser die Breite eines Inline-Elementes anzeigen? Spätestens, wenn es z.B. einen Zeilenumbruch gibt, könnte ich mir das problematisch vorstellen.

Was hältst Du denn davon, dass ganze in einer Tabelle darzustellen? :-)

Im Ernst - das ist doch nichts anderes als eine Tabelle. Ich finde es albern auf Teufel komm raus, das <table>-Element zu vermeiden, nur weil es "nicht modern ist".

Denn genau das ist verkehrt finde ich. Tabellen sollen nicht mehr zum Layouten einer Seite missbraucht werden, aber genauso sollte man divs nicht für Tabellen missbrauchen ;).

Balu
Bartels.Schöne
ConPresso Support & Development
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von MarkusR »

balu hat geschrieben:Was hältst Du denn davon, dass ganze in einer Tabelle darzustellen? :-)

Im Ernst - das ist doch nichts anderes als eine Tabelle. Ich finde es albern auf Teufel komm raus, das <table>-Element zu vermeiden, nur weil es "nicht modern ist".

Denn genau das ist verkehrt finde ich. Tabellen sollen nicht mehr zum Layouten einer Seite missbraucht werden, aber genauso sollte man divs nicht für Tabellen missbrauchen ;).
Da ist leider ConPresso der Grund...

Jede Zeile ist ein Artikel.

Jetzt müsste entweder pro Artikel eine Tabelle her (was im Quelltext äußerst bescheiden aussieht und dann eben auch keine Tabelle sondern Layout ist) oder eben ein header- und footer-Artikel, was wiederum bei jedem Hinzufügen eines Artikels ein Umsortieren nötig macht und einen Kunden verwirren würde. Letzlich bliebe noch eine eigene Rubrik, was aber die Nutzung anderer Templates verbieten würde.
Matthias hat eigentlich alles gesagt, aber ich will doch noch eben was ergänzen: Wie sollte ein Browser die Breite eines Inline-Elementes anzeigen?
Eben wie beim kommenden "inline-block". Das mit dem Zeilenumbruch ist weniger das Problem und ist sogar recht nützlich (wie man bei mod_gallery sieht). Was mich bei float eben nervt ist daß das umgebende DIV einfach verlassen wird, was völlig unverständlich ist. Wenn das standardkonform sein sollte, dann ist mir da der nicht-standardkonforme IE lieber.
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Antworten