(IE) Positionierungsproblem

[MudGuard]

Hi,

ich bastel gerade an einer Seite - funktioniert auch in meinen Browsern (Firefox und Opera) so, wie ich will.
Aber wenn ich das im IE angucke, paßt's nicht so wirklich.

Ich wollte mal ausprobieren, die Navigation im Quelltext nach dem Inhalt unterzubringen.

Hier erstmal die Seite: http://temp.andreas-waechter.de/blablubbs.html

In Firefox und Opera sitzt die Haupt-Navigation ("Startseite" ... "Galerie" - die Links funktionieren nicht!) links vom Inhalt wie gewünscht und fängt in etwa auf gleicher Höhe an wie der Inhalt (fine-tuning kommt noch)

IE setzt die Navigation zwar auch an den linken Rand, aber läßt sie erst unterhalb des Inhalts beginnen.

Das einzige, was mir jetzt noch einfällt, wäre, nur für den IE das Ding absolut zu positionieren - aber das macht andere Probleme, siehe unten.
Gibt es eine andere Lösung, ohne die Reihenfolge im Quellcode zu verändern und ohne zusätzliche Elemente?

A propos absolut positionieren: ohne das position:absolute in

#Hauptnavigation  
{  
  width:10em;  
  float:left;  
  position:absolute;  
  height:20em;  
}

springt die Navigation im Firefox bei bestimmten Fenster-/Schrift-Größen-Kombinationen ebenfalls nach unten.
Auf dieses position:absolute reagiert der IE aber damit, daß beide Navigationslisten verschwinden ...

cu,
Andreas

[Detlef G.]

Hallo Andreas,

ich werde dmal ein wenig durcheinander zitieren.

Auf dieses position:absolute reagiert der IE aber damit, daß beide Navigationslisten verschwinden ...

Naja, der IE hat oft sehr andere Vorstellungen als andere Browser, wo ein
absolut positioniertes Element angezeigt werden sollte, wenn keine Angaben
zu left oder right und zu top oder bottom gemacht werden. Vielleicht
verschluckt er sich dabei auch völlig, so dass dein zweites Menü dabei auch
im Nirvana landet.
Außerdem lässt er gern Inhalte in der Nähe von gefloateten Elementen weg.

ich bastel gerade an einer Seite - funktioniert auch in meinen Browsern (Firefox und Opera) so, wie ich will.

Wobei ich nicht wirklich verstehe, warum das in diesen Browsern klappt.

In Firefox und Opera sitzt die Haupt-Navigation ("Startseite" ... "Galerie" - die Links funktionieren nicht!) links vom Inhalt wie gewünscht und fängt in etwa auf gleicher Höhe an wie der Inhalt (fine-tuning kommt noch)

Die Hauptnavigation befindet sich hinter dem Content im Quelltext und ist
mit position:absolute versehen, ohne Angaben zur Position selbst. Warum
diese nun genau an der von dir gewünschten Stelle positioniert wird,
verstehe ich nicht wirklich, ich hätte eher top:0 left:0 angenommen.

IE setzt die Navigation zwar auch an den linken Rand, aber läßt sie erst unterhalb des Inhalts beginnen.

Wo sollte sie mit position:static auch sonst erscheinen, der Platz darüber
wird doch durch margin-left: 12em; von #content blockiert.

Wozu dient eigentlich float: right; von #content ohne Angabe zu width?
Es dürfte nichts nützen, ohne width und ohne margin-right nimmt es die
ganze Breite. Mit width ist es nicht flexibel, width: 100%-12em; gibt es
nicht und mit margin-left wird der Platz daneben trotzdem blockiert.

Das einzige, was mir jetzt noch einfällt, wäre, nur für den IE das Ding absolut zu positionieren - aber das macht andere Probleme, siehe unten.

Wieso nur für den IE?
Nur für den IE ist position extra wieder auf static gesetzt.

Gibt es eine andere Lösung, ohne die Reihenfolge im Quellcode zu verändern und ohne zusätzliche Elemente?

Meines Wissens nicht wirklich.
Es wäre bei fester Breite für #content möglich.
Oder, wenn h1 nicht umbrechen kann, also eine feste Höhe hat.

Du kanns z.B. die Floats rausnehmen, position:static für IE ebenfalls, und
die Definition für die Hauptnavigation folgendermaßen:

#Hauptnavigation  
{  
  width:10em;  
  position:absolute;  
  height:20em;  
  left:60px;  
  top:8em;  
}  

Oder, du schließt #content erst hinter der Hauptnavigation, auch die Floats
raus, wie auch position:static, dann bekommt #content position:relative und:

#Hauptnavigation  
{  
  width:10em;  
  position:absolute;  
  height:20em;  
  left:-12em;  
  top:0;  
}  

Ich habe das alles allerdings nicht umfassend getestet.

Auf Wiederlesen
Detlef

[Ingo Turski]

Hi,

wie Detlef schon gesagt hat: Du machst den Browsern riesen Probleme mit

• float ohne width bei Fließtext
• position:absolute ohne Positionsangaben.

Die Standardumsetzung eines solchen Layouts bei der gewünschten Anordnung im Quelltext wäre position:absolute mit Positionsangaben für die Navigation und position:static mit margin für den Inhalt.

Übigens fehlt mir im IE der Scrollbalken und im Firefox geht die rechte Grafik nur unschön über 100%. Und bei Arial Unicode MS fehlt doch was..;-)

freundliche Grüße
Ingo

[Detlef G.]

Hallo Ingo

Übigens fehlt mir im IE der Scrollbalken ...

Das liegt an overflow:visible; für html.

... und im Firefox geht die rechte Grafik nur unschön über 100%.

und das am float für #content ohne clear.

Auf Wiederlesen
Detlef

[MudGuard]

Hi,

hab das Problem jetzt gelöst - war gestern etwas verwirrt (Rotwein, Hitze und ich vertragen sich nicht gut).
Ich danke Euch für Eure Bemühungen.

Neues Problem mit IE:

Ich versuche, javscript-unabhängig folgendes zu realisieren:
Im Text befindet sich ein kleines Vorschaubild - bei :hover soll an dieser Stelle dann absolut positioniert das große Bild erscheinen.

Ok, IE kann :hover nur bei a-Elementen, also pack ich die beiden Bilder in ein a-Element (irgendein Element, das beide Bilder enthält, brauch ich sowieso).
Das große Bild wird erstmal auf display:none gestellt, nur wenn der Mauszeiger über dem a-Element ist, wird hier display:block eingesetzt.

Funktioniert mit folgendem Code wunderbar in Browsern:

im HTML:

  
<p>  
<a href="/bilder/vorbereitung/pickel.jpg" class="preview"><img src="/bilder/vorbereitung/pre/pickel.jpg" alt="Ei mit Kalkpickeln" /><img src="/bilder/vorbereitung/pickel.jpg" alt="Ei mit Kalkpickeln" title="Ei mit Kalkpickeln" class="fullview"/></a>  
Es war einmal ein Mann. ...  
</p>  

im CSS:

  
a.preview:link, a.preview:visited  
{  
 float:right;  
 position:relative;  
 border:none;  
 padding-left:10px;  
}  
  
a.preview:hover /* to trigger IE :hover for img */  
{  
 border-width:0px;  
}  
  
a.preview:link img.fullview, a.preview:visited img.fullview  
{  
 display:none;  
 position:absolute;  
 right:0px;  
 top:0px;  
 width:300px;  
 height:300px;  
 border:10px solid white;  
 z-index:0;  
}  
  
a.preview:hover img.fullview  
{  
 display:block;  
 z-index:10;  
}  

Ok, IE braucht noch die Änderung der border für's a-Element, damit der :hover-Effekt für das darin befindliche Bild wirkt.

Bei Mausüber erscheint auch im IE das große Bild.
Aber mein IE 6 denkt gar nicht daran, das Bild wieder wegzunehmen, wenn die Maus wieder weg ist.

Was kann man da tun (außer den IE nicht zu verwenden)?

Testseite hier: http://temp.andreas-waechter.de/test.html

Am float:right fürs a liegt's nicht, das Problem tritt auch ohne float auf.

cu,
Andreas

[Ingo Turski]

Hi,

Das große Bild wird erstmal auf display:none gestellt, nur wenn der Mauszeiger über dem a-Element ist, wird hier display:block eingesetzt.

das eben solltest Du (außer für den IE 5) vermeiden.
Da das Element ohnehin aus dem Fluß genommen ist, kannst Du dessen Anzeige über visibility steuern.

freundliche Grüße
Ingo

[MudGuard]

Hi,

Das große Bild wird erstmal auf display:none gestellt, nur wenn der Mauszeiger über dem a-Element ist, wird hier display:block eingesetzt.
das eben solltest Du (außer für den IE 5) vermeiden.
Da das Element ohnehin aus dem Fluß genommen ist, kannst Du dessen Anzeige über visibility steuern.

Argh. Warum kann der IE nicht einfach nur funktionieren wie Browser es tun?

Mit visibility funktioniert es.
Fast.

Wenn ich zwei Bildchen rechts floaten lasse, klappt es mit dem linke, das rechte wird (natürlich nur im IE) trotz z-index unter das erste Vorschau-Bildchen gelegt.

cu,
Andreas

[Ingo Turski]

Hi,

Wenn ich zwei Bildchen rechts floaten lasse, klappt es mit dem linke, das rechte wird (natürlich nur im IE) trotz z-index unter das erste Vorschau-Bildchen gelegt.

da kommst Du mit z-index auch nicht weiter.

Was funktioniert: setze die beiden Links in ein <div> und gebe diesem die id "pickel" des Links.
Das CSS dazu wäre:

div#pickel {  
  float:right;  
  position:relative;  
}  
  
div#pickel a {  
  margin-left:10px;  
}  
  
a.preview:hover {  
  border-width:0;  
}  
  
a.preview img.fullview {  
  visibility:hidden;  
  position:absolute; right:90px; top:0px;  
  width:300px; height:300px;  
  border:10px solid white;  
}  
  
a.preview + a.preview img.fullview {  
  right:0;  
}  
  
a.preview:hover img.fullview {  
  visibility:visible;  
}  
  
a img {  
  border:none;  
}

Du müßtest für den IE natürlich dem zweiten Vollbild noch eine ID verpassen, wenn Du es anders positionieren willst.

freundliche Grüße
Ingo