Weder MSIE noch Opera kommen mit float klar?
Konrad L. M. Rudolph
- css
Hallo Forum,
ich habe folgenden Code, der im Mozilla (in etwa) so aussieht, wie ich mir das vorstelle.
Im MSIE/Opera hingegend sind die Renderergebnisse vollkommen anders, in beiden Fällen aber katastrophal.
Mein Fehler oder Bugs? -- Wie läßt sich das (ohne Tabellen) umschiffen?
\\ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>--Catalyst--</title>
<style type="text/css">
dl {
margin: 0 0 0.5em 1em;
}
/**{ border: 1px solid; }/**/
dt {
clear: left;
float: left;
margin: 0;
text-transform: uppercase;
}
dd {
float: left;
margin: 0 0 0.5em 0.5em;
padding: 0;
}
#picture { float: left; }
#content { float: left; }
.clearer { clear: both; }
</style>
</head>
<body>
<div id="picture">
<img src="img/pic_eddy.jpg" width="200" height="250" />
</div>
<div id="content">
<dl>
<dt>Full Name:</dt>
<dd>Eduardo Pagnozzi de Siqueira</dd>
<dt>Nick:</dt>
<dd>Eddie</dd>
<dt>Birthplace:</dt>
<dd>Curitiba, Brazil</dd>
<dt>Equipment:</dt>
<dd>
<dl>
<dt>Bass:</dt>
<dd>Aria Pro II STB Series</dd>
<dt>Amp:</dt>
<dd>60 Watt Hartke B600</dd>
<dt>Pedal:</dt>
<dd>BOSS MT-2 Metal Distorsion</dd>
</dl>
</dd>
</dl>
</div>
<div id="clearer"></div>
</body>
</html>
///
Ich hatte mal ein ähnliches Problem und habe es dann irgendwann entnervt und zugunsten einer Tabelle aufgegeben, aber eigentlich muß es doch auch ohne gehen ...
(PS: ich weiß, eine Tabelle wäre hier von der Logik garnicht mal falsch, trotzdem ...)
Gruß,
KonRad -
Hallo,
Ich kann mir ungefaehr vorstellen, was Du erreichen willst,
aber eine Online-Seite waere trotzdem sehr hilfreich,
auch um die Bugs nachzuvollziehen.
Mein Fehler oder Bugs? -- Wie läßt sich das (ohne Tabellen) umschiffen?
float und margin sind heikel, egal, was die Leute behaupten...
Und das nette Beispiel zur DL-Formatierung aus der CSS-Spec.
http://www.w3.org/TR/REC-CSS2/visuren.html#compact
funktioniert ja - wenn ueberhaupt - erst in wenigen Browsern.
Ich erinnere mich vage an eine Diskussion hier im Forum,
wo wir versuchten, etwas aehnliches in verschiedenen
Browsern zum Funktionieren zu bringen. Erfolglos.
Den Thread habe ich gefunden: </archiv/2003/11/64718/>
Eventuell koennte man mit verschiedenen
display-Eigenschaften rumspielen, z.B.
display:block; display:inline-block; u.s.w.,
aber eben, wahrscheinlich bringt das mit
den aktuellen Browsern nicht viel...
Ich hatte mal ein ähnliches Problem und habe es dann irgendwann entnervt und zugunsten einer Tabelle aufgegeben, aber eigentlich muß es doch auch ohne gehen ...
Na dann, viel Spass - aber entnerve Dich nicht schon wieder.
Es bringt nichts. ;-)
(PS: ich weiß, eine Tabelle wäre hier von der Logik garnicht mal falsch, trotzdem ...)
Ja, man koennte es geradesogut mit einer Tabelle machen,
auch logisch/semantisch.
<th> statt <dt>
<td> statt <dd>
Gruesse,
Thomas
Ich kann mir ungefaehr vorstellen, was Du erreichen willst,
aber eine Online-Seite waere trotzdem sehr hilfreich,
ups, sorry, ich dachte es würde reichen das hier zu posten -- hatte noch nichts hochgeladen.
Und das nette Beispiel zur DL-Formatierung aus der CSS-Spec.
http://www.w3.org/TR/REC-CSS2/visuren.html#compact
funktioniert ja - wenn ueberhaupt - erst in wenigen Browsern.
Ah, nett, das. Aber die Site soll MSIE-kompatibel sein ;-)
Ja, man koennte es geradesogut mit einer Tabelle machen,
auch logisch/semantisch.
<th> statt <dt>
<td> statt <dd>
... und genau das mache ich jetzt einfach.
Danke trotzdem.
Gruß,
KonRad -
Hallo.
(PS: ich weiß, eine Tabelle wäre hier von der Logik garnicht mal falsch, trotzdem ...)
Ja, man koennte es geradesogut mit einer Tabelle machen,
auch logisch/semantisch.
<th> statt <dt>
<td> statt <dd>
Das sehe ich anders, aber vielleicht hattest du die entsprechenden Diskussionen ja verfolgt.
MfG, at
Hi,
da sind einige Fehler drin:
1. margin: 0px 0px 0.5em 1em statt margin: 0 0 0.5em 1em;
Nach jedem Wert muß eine Einheit angegeben werden
2. /* und */ statt /** **/
Keine Ahnung, ob das problematisch ist
3. float
ist nicht valide ohne Breitenangabe!
Hallo,
- margin: 0px 0px 0.5em 1em statt margin: 0 0 0.5em 1em;
Nach jedem Wert muß eine Einheit angegeben werden
Quatsch. Bei Null nicht.
http://www.w3.org/TR/REC-CSS2/syndata.html#length-units
"After the '0' length, the unit identifier is optional."
Gruesse,
Thomas
Sorry, werde ich mir merken.
Aber das ist dann für mich trotzdem eine potentielle Fehlerquelle, wenn man 0 da stehen hat und später z.B. auf 1 ändert und dabei das Setzen der Einheit vergisst... Also dann lieber gleich alle Werte mit Einheit.
Hi,
Aber das ist dann für mich trotzdem eine potentielle Fehlerquelle, wenn man 0 da stehen hat und später z.B. auf 1 ändert und dabei das Setzen der Einheit vergisst...
für mich (und jeden, für den Einheiten hier selbstverständlich sind) nicht. Ich finde '0' ist nicht nur kürzer, sondern auch prägnanter und wenn ich irgendwo den Wert 0 eintrage, weiß ich ja noch nicht unbedingt, welche Einheit ich vielleicht bei einer späteren Änderung verwenden werde...
freundliche Grüße
Ingo
Hallo Ingo,
Mhmmm...
...ich gebe meistens z.B. 0px 0px 10px 10px an und finde das, für mich persönlich, sinnvoll. Gerade während der Layout-Phase ändere ich die Werte mehrfach und bin, wenn es wirklich durchgehend eine Einheit ist, damit etwas schneller beim tippen ;)
Freundlichen Gruß aus Kassel
Danny
- float
ist nicht valide ohne Breitenangabe!
Im Ernst? Wieso das denn? Ich will ja eben gerade eine dynamisch Breite, also eine, die sich dem Content anpaßt.
Gruß,
KonRad -
- float
ist nicht valide ohne Breitenangabe!Im Ernst? Wieso das denn? Ich will ja eben gerade eine dynamisch Breite, also eine, die sich dem Content anpaßt.
Finde ich übrigens auch nicht in den Specs und die Beispiele des W3C sind auch ohne Breitenangabe bei float: http://www.w3.org/TR/REC-CSS2/visuren.html#floats
Gruß,
KonRad -
Hallo,
- float
ist nicht valide ohne Breitenangabe!
Im Ernst?
Ja, leider.
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float
"Wenn Sie für ein Element eine Angabe zu float notieren,
müssen Sie auch eine Angabe zu width definieren."
Glaubst Du nicht? OK, hier die Spec.:
http://www.w3.org/TR/REC-CSS2/visuren.html#floats
"A floated box must have an explicit width
(assigned via the 'width' property, or its
intrinsic width in the case of replaced elements)."
Gruesse,
Thomas
Glaubst Du nicht? OK, hier die Spec.:
http://www.w3.org/TR/REC-CSS2/visuren.html#floats
Hehe, bin ich blind, den gleichen Link habe ich ja weiter unten als Gegenbeweis gepostet. Hmm. Ist aber irritierend, daß deren eigene Beispiele nicht konform sind ...
Gruß,
KonRad -
Hi,
Ist aber irritierend, daß deren eigene Beispiele nicht konform sind ...
Vielleicht liegt's daran, dass dort Bilder gefloatet werden und bei denen ist die Breite ja quasi im Bild selbst deiniert, auch wenn man sie im HTML angeben kann (soll?). Trotzdem schreiben die ja, dass die Breite gefloateter Elemente immer imm CSS angegeben werden muss, wirklich komisch :D...
MfG,
Max.
Hi,
http://www.w3.org/TR/REC-CSS2/visuren.html#floats
Hehe, bin ich blind, den gleichen Link habe ich ja weiter unten als Gegenbeweis gepostet. Hmm. Ist aber irritierend, daß deren eigene Beispiele nicht konform sind ...
Wieso nicht konform? Ein Bild ist ein replaced Element und hat eine "intrinsic width".
cu,
Andreas
hi,
Im Ernst? Wieso das denn? Ich will ja eben gerade eine dynamisch Breite, also eine, die sich dem Content anpaßt.
dazu habe ich vor nicht allzu langer zeit hier auch mal einen thread gehabt, http://forum.de.selfhtml.org/archiv/2003/11/64871/#m369390.
bei mir hat es in allen aktuellen browsern, in denen ich getestet habe, auch ohne angabe zur breite so "funktioniert", wie es gedacht war (lediglich opera 6 zeigte ein leicht abweichendes verhalten).
gruss,
wahsaga