IE 5.x Mac Problem / float: left;

[Benjamin Keil]

Hallo zusammen,

ich habe ein Riesenproblem mit dem Navigationsmenü eines neuen Projektes, finde einfach keine Lösung:

http://www.bkeil.com/bbk/index.php

Da es sich um eine Navigation mit Sub-Navigation handelt,
habe ich eine verschachtelte Liste verwendet, damit es auch
im Textbrowser noch schön aussieht:

--------------------

<ul class="nav">
 <li><a href="#">haupt1</a></li>
 <li class="active"><a href="#">haupt2</a>

<ul class="subnav">
   <li class="active"><a href="#">unter2</a></li>
   <li><a href="#">unter1</a></li>
  </ul>

</li>
 <li><a href="#">haupt3</a></li>
</ul>

--------------------

Das ganze ist eine abgewandelte Version von http://www.alistapart.com/articles/slidingdoors/, das Tutorial
ist ja sehr nett, aber leider gibt's da keine Subnavigation.

Mein Problem ist die Darstellung in den 5.x IEs Mac.
Der zerhaut das alles total. Alle anderen "Browser"
machen mir keine Probleme.

Ich würde mich über jeden Tip freuen!!!

Hier einmal eine der Übersicht halber eine etwas gekürzte
Version des CSS, nur die wichtigsten Eigenschaften
(Farben und so rausgeworfen):

--------------------

ul.nav{
 padding: 3px 0 0 15px;
}

ul.subnav{
 position: absolute;
 top: 102px;
 left: 0;
}

ul.nav li{
 list-style-type: none;
 float: left;
 background:url("bilder/layout/nav_right.gif") no-repeat right top;
}
ul.nav li.active{
 background:url("bilder/layout/nav_right_on.gif") no-repeat right top;
}

ul.nav a{
 display: block;
    padding: 7px 15px 4px 15px;
 background:url("bilder/layout/nav_left.gif") no-repeat left top;
}

ul.nav li.active a{
 padding-bottom:5px;
 background:url("bilder/layout/nav_left_on.gif") no-repeat left top;
}

ul.nav ul.subnav li{
 background-image: none;
}

ul.nav ul.subnav a{
    padding: 5px 15px 5px 15px;
 background-image: none;
}

ul.nav ul.subnav li.active a,
ul.nav ul.subnav li.active a:hover{
 background-image: none;
}

--------------------

Das komplette Css liegt unter: http://www.bkeil.com/bbk/screen.css
Habe Xhtml und CSS durch den Validator gejagt, alles fehlerfrei!

Schöne Grüße aus Freiburg,

Ben

[Ingo Turski]

Hi,

nur mal ein Gedanke: ich vermisse Weitenangaben, die i.V. mit float wichtig sein könnten.

freundliche Grüße
Ingo

[Benjamin Keil]

nur mal ein Gedanke: ich vermisse Weitenangaben, die i.V. mit float wichtig sein könnten.

das stimmt schon, die gehören ja zu einem float,
allerdings kann ich die ja nicht machen, da die buttons
eine variable breite haben und vom text abhängen.

ich bin wieder einen kleinen schritt weiter, indem ich den
<a>s jetzt auch einen float gegeben habe stimmt schonmal
die hauptnavigation, aber die unternavigation springt bei einem
reload und mann kann sie quasi wegradieren...

so ein dämlicher browser!!

ben

[Ingo Turski]

Hi,

allerdings kann ich die ja nicht machen, da die buttons
eine variable breite haben und vom text abhängen.

warum nicht? Wenn die Beschriftung statisch ist, kannst Du die Schriftgröße in EM festlegen und damit die Breite ebenfalls - individuell angepaßt - in EM.

freundliche Grüße
Ingo

[Benjamin Keil]

warum nicht? Wenn die Beschriftung statisch ist, kannst Du die Schriftgröße in EM festlegen und damit die Breite ebenfalls - individuell angepaßt - in EM.

Naja, wenn ich jedem Button individuelle Eigenschaften geben
würde, dann könnte ich sie ja auch alle absolut positionieren
wo sie hingehören. Dann bräuchte ich ja auch den Aufwand
mit 2 verschachtelten hintergrundbildern nicht. Die Breite
soll schon flexibel sein. Außerdem ist die Laufweite der Schrift
auf dem Mac anscheinend eine andere als auf dem PC, bzw. er greift
auf eine andere Schrift zu -> wenn keine Verdana dann Helvetica.

Schöne Grüße,

Ben

[wahsaga]

hi,

nur mal ein Gedanke: ich vermisse Weitenangaben, die i.V. mit float wichtig sein könnten.

das stimmt schon, die gehören ja zu einem float,
allerdings kann ich die ja nicht machen, da die buttons
eine variable breite haben und vom text abhängen.

dazu hab ich mal eine allgemeine frage.

es heisst, dass man bei float auch immer eine breite angeben _muss_.

reicht hier formal width:auto aus, oder muss ich eine explizite längenangabe machen?

gruss,
wahsaga

[Ingo Turski]

Hi,

es heisst, dass man bei float auch immer eine breite angeben _muss_.

immer nicht. das zuletzt aufgeführte floatende Element sollte ohne Weitenangabe die restlichen zur Verfügung stehende Breite einnehmen. Und man kann ja auch Inline-Elemente wie Bilder floaten lassen.

reicht hier formal width:auto aus, oder muss ich eine explizite längenangabe machen?

Das wäre ja fast schon der Stein der Weisen;-)
Es wäre wirklich hilfreich, wenn man hier mit auto die Weite eines Blocklevel Elements nach seinem Inhalt bestimmen könnte.

freundliche Grüße
Ingo

[wahsaga]

hi,

es heisst, dass man bei float auch immer eine breite angeben _muss_.

immer nicht. das zuletzt aufgeführte floatende Element sollte ohne Weitenangabe die restlichen zur Verfügung stehende Breite einnehmen.

nun ja, ich frage deshalb, weil es beim W3C ausdrücklich heisst:

"A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements)."
http://www.w3.org/TR/CSS2/visuren.html#floats

Und man kann ja auch Inline-Elemente wie Bilder floaten lassen.

ja, dazu sagt das W3C ja auch, dass man dann keine explizite breite angeben muss, da das bild diese ja schon indirekt mitbringt.

reicht hier formal width:auto aus, oder muss ich eine explizite längenangabe machen?

Das wäre ja fast schon der Stein der Weisen;-)
Es wäre wirklich hilfreich, wenn man hier mit auto die Weite eines Blocklevel Elements nach seinem Inhalt bestimmen könnte.

nun, der grund warum ich frage ist folgender:

ich habe eine überschrift <h4> mit folgendem inhalt:

<h4>15:14:25 / 05.10.2003<br />[5 kommentare]</h4>

also durch den <br /> erzwinge ich zwei zeilen, in der oberen die datumsangabe, in der unteren die anzahl der kommentare (diese ist auch noch verlinkt, ist aber jetzt denke ich mal wurscht ...)

so, diese <h4>-überschrift formatiere ich jetzt mit einem einfachen float:right, und darunter folgt ein längerer absatz <p> mit text.

es "funktioniert" in allen browsern, in denen ich gestest habe, so wie ich es haben will, nämlich derart, dass die <h4> zweizeilig in der form
15:14:25 / 05.10.2003
       [5 kommentare]
(text nach rechts ausgerichtet)
angezeigt wird, nach rechts gefloatet und zwar in exakt der breite, die der text so auch benötigt.

ich habe also derzeit _gar keine_ angabe zur width gemacht.

deshalb würde ich jetzt gerne wissen, ob das _falsch_ ist laut CSS spezifikation, oder ob ich das so einsetzen kann und darf?

denn wie gesagt, obiges zitat aus der spezifikation spricht ja deutlich von einer "explicit width", die ich anzugeben hätte, sofern es sich nicht um ein replaced element handelt.

gruss,
wahsaga

[Ingo Turski]

Hi,

es "funktioniert" in allen browsern, in denen ich gestest habe, so wie ich es haben will, nämlich derart, dass die <h4> zweizeilig in der form
15:14:25 / 05.10.2003
       [5 kommentare]
(text nach rechts ausgerichtet)
angezeigt wird, nach rechts gefloatet und zwar in exakt der breite, die der text so auch benötigt.

ich habe also derzeit _gar keine_ angabe zur width gemacht.

hast Du denn Elemente links hiervon und wenn ja, diese mit Weitenangabe versehen und auch im Quelltext vor die Überschrift gesetzt? Dann würde sich für mich das Funktionieren erklären.

freundliche Grüße
Ingo

[wahsaga]

hi,

hast Du denn Elemente links hiervon und wenn ja, diese mit Weitenangabe versehen und auch im Quelltext vor die Überschrift gesetzt? Dann würde sich für mich das Funktionieren erklären.

ich habe nicht ein element "links davon", sondern einen absatz, der um diese überschrift herumfliesst, und darunter dann weiter geht.

in etwa so:

############# xxxxxx
############# xxxxxx
#############
####################
####################

die x sind meine überschrift, # der text des absatzes.

beide befinden sich in einem übergeordneten dic-container, dieser gibt die breite vor.
der absatz und die überschrift selbst haben gar keine breitenangabe, die überschrift steht im html-code direkt vor dem absatz, und ist mit float:right formatiert.

gruss,
wahsaga

[Ingo Turski]

Hi,

der absatz und die überschrift selbst haben gar keine breitenangabe, die überschrift steht im html-code direkt vor dem absatz, und ist mit float:right formatiert.

wirklich erstaunlich, aber es klappt. Sogar wenn ich für h4 einen Rahmen ziehe, geht dieser nur um die engen Grenzen des Textes. Allerdings klappt das floaten des Textes im Mozilla nicht - der hält (bei mir, 1.4b) den festen Abstand zur Überschrift.

freundliche Grüße
Ingo

[wahsaga]

hi,

der absatz und die überschrift selbst haben gar keine breitenangabe, die überschrift steht im html-code direkt vor dem absatz, und ist mit float:right formatiert.

wirklich erstaunlich, aber es klappt. Sogar wenn ich für h4 einen Rahmen ziehe, geht dieser nur um die engen Grenzen des Textes. Allerdings klappt das floaten des Textes im Mozilla nicht - der hält (bei mir, 1.4b) den festen Abstand zur Überschrift.

na ja, ein bisschen mehr an formatierung habe ich natürlich schon drin.
aber das wesentliche ist halt, dass ich float ohne width-angabe für die <h4>-überschrift verwende, und in IE 5/6, opera 7 und firebird 0.7 ein annähernd iedentisches verhalten bekomme.

beispielseite: http://www.isis.de/~wazgnuks/float.htm

ein hellgrauer div als container, darin eine <h3> als überschrift für den absatz, und darunter die nach rechts gefloatete <h4>-überschrift mit der angabe zum datum/anzahl kommentare (dunkelgrauer hintergrund, und 2px weisser rahmen links), und darum herum fliessend der <p>-absatz.

nur der opera 6 verhält sich hier abweichend von den oben genannten, und zieht die gefloatete <h4>-überschrift über die hälfte der gesamtbreite des divs - der scheint also bei fehlender width-angabe anders zu rechnen, und nimmt einfach mal die hälfte des zur verfügung stehenden platzes.

gruss,
wahsaga

p.s.: mit dem safari auf dem mac habe ich auch gerade mal "testen lassen", der verhält sich wie IE, opera 7 und firebird 0.7 - siehe http://www.isis.de/~wazgnuks/pics/float_safari.png (ca. 114KB).

[wahsaga]

hi,

beispielseite: http://www.isis.de/~wazgnuks/float.htm

der css-validator verweigert bei dieser seite zwar die arbeit(*), aber per c&p über's textfeld eingegeben, validiert das CSS.

gruss,
wahsaga

der css-validator meldet mir beim versuch, über den URI zu validieren:
"I/O Error: Invalid byte 1 of 1-byte UTF-8 sequence."
ist mir aber im moment schleierhaft, was er damit sagen will(?)

p.p.s.: werde in den nächsten ein bis zwei wochen wahrscheinlich nicht dazu kommen, hier ins forum zu schauen, deshalb kann ich diese diskussion hier leider vorerst nicht weiter führen.

[at]

Hallo.

deshalb würde ich jetzt gerne wissen, ob das _falsch_ ist laut CSS spezifikation, oder ob ich das so einsetzen kann und darf?

Hat sich der Validator nicht geäußert?
MfG, at

[wahsaga]

hi,

Hat sich der Validator nicht geäußert?

nein, der meckert selbst dann nicht, wenn du nur
#element { float:left; }
per textfeld-eingabe prüfen lässt. aber ich denke mal, für solche _logischen_ zusammenhänge ist der css-validator auch nicht geeignet.

gruss,
wahsaga

[at]

Hallo.

nein, der meckert selbst dann nicht, wenn du nur
#element { float:left; }
per textfeld-eingabe prüfen lässt. aber ich denke mal, für solche _logischen_ zusammenhänge ist der css-validator auch nicht geeignet.

Wenn das stimmt, frage ich mich, wozu ich mein CSS überhaupt validiere. -- Ich bin entsetzt.
MfG, at