Problem mit Internet Explorer...

[snooze7]

Hallo zusammen,

ich hätte eine Frage bzw. habe ein Problem.

Nachdem ich nun endlich das Problem mit den absoluten Positionen gelöst habe, zeigt mir der Internet Explorer die Seite nicht so an wie es sein sollte.


Wen ich Seite maximiere bzw. das Browserfenster kleiner ziehe, werden divs nicht mitverschoben. Erst durch "aktualisieren" der Seite passen sich die fehlerhaften divs wieder richtig an. Ist das "normal"?! Wie kann ich das Problem umgehen?

Außerdem ist es so das die Hintergrundfarbe (hier: weiß) nicht nur dort angezeigt wird, wo es sein sollte. Im IE ist die Hintergrundfarbe viel Größer (wahrscheinlich die komplette "Content" Div wo meine 3 Divs drin sind. Im Mozilla klappt alles wunderbar.

Kann mir bei dem Problem weiterhelfen? Wäre echt klasse.

Mfg Snooze7

 

[neuroleptika]

Entferne mal position: relative; aus div#hauptnavigation ul li a
Deine Image-Replacement-Technik ist falsch angewendet.
Das width in span.hidden ist wirkungslos. Height und width gibt nicht für inline-Elemente.

Die derzeit verbreiteste Methode ist die Gilder-/Levin-Methode
Übersicht: Image-Replacement-Techniken – Artikel von Jens Meiert

Für die rechte Navigation gilt vermutlich das gleiche (die habe ich mir nicht angesehen).

 

[snooze7]

Inwiefern ist das falsch angewendet? Ich glaube deine Methode hattest du in einem meiner Threads schon mal angesprochen und ich dachte ich hätte es mit diesem versuch auch umgesetzt (es klappt ja auch in Mozilla; nur nicht im IE).

Dein Vorschlag mit der position bei der angesprochenen Div bringt leider keine Änderung. Es scheint, dass der IE immer nur vom aktuellen Rand ausgeht und durch laden das wieder neu anpasst.

Die Navigation auf der linken Seite ist auch noch nicht ganz fertig, daher sollte man diese außer acht lassen. Daher der Link ohne diese Navigation

Versicherungsstelle Veronika Cramer

Ich hatte deinen Vorschlag mit dieser Methode so verstanden, dass ein allgemeines <a> definiert wird (als eine Art container) und die Bilder hinein importiert werden (durch <a class="...")... oder nicht? Klappen tut es offensicht im Mozilla.

Wie würdest du in meinem konkreten Fall die Hauptnavigation aufbauen?
Ich verwende nicht das Span Element als "on" Zustand... da kann es doch kein unterschied geben... . Irgendwie verstehe ich das Ganze nicht.. sry ich steh einfach auf dem Schlauch (vielleicht ist es auch ein ganzes Rohr; aber ich versteh das nicht. Ich war so glückklich, dass es endlich im Mozilla läuft:-().


Anmerkung zum letzten Thread: Du hattest ja auch bei meinem damaligen Vorschlag bemängelt, wenn jemand die "Bilder ausstellt"... Also ich hab das getestet, auch wie Google die Seite ausliest --> passt doch; somit wäre auch die barrierefreiheit bewahrt.

 

[neuroleptika]

Inwiefern ist das falsch angewendet? Ich glaube deine Methode hattest du in einem meiner Threads schon mal angesprochen und ich dachte ich hätte es mit diesem versuch auch umgesetzt (es klappt ja auch in Mozilla; nur nicht im IE).

Das war ich glaube ich nicht. koslowski schlägt diese Methote auch manchmal vor.
Das Prinziep ist dem <span> die Hintergundgrafik zu geben und mit position:absolute; über den Text im a-Tag zu schieben.
Du hast den Text ins <span> geschrieben und versuchst ihn mit display:visibilty und width:0; zu verstecken.

Ich würde es ganz anders aufbauen. Die Navigation würde ich nicht in so enge px-Breiten zwängen. Dann bräuchte man auch keine Grafiken für den Linktext (das kann man sich aber nicht immer aussuchen). Bei nicht so verbreiteten Schriften geht es ohne Grafiken nicht anders.

Dein Vorschlag mit der position bei der angesprochenen Div bringt leider keine Änderung. Es scheint, dass der IE immer nur vom aktuellen Rand ausgeht und durch laden das wieder neu anpasst.

Die Navigation auf der linken Seite ist auch noch nicht ganz fertig, daher sollte man diese außer acht lassen. Daher der Link ohne diese Navigation

Versicherungsstelle Veronika Cramer

Ich hatte deinen Vorschlag mit dieser Methode so verstanden, dass ein allgemeines <a> definiert wird (als eine Art container) und die Bilder hinein importiert werden (durch <a class="...")... oder nicht? Klappen tut es offensicht im Mozilla.

Wie würdest du in meinem konkreten Fall die Hauptnavigation aufbauen?
Ich verwende nicht das Span Element als "on" Zustand... da kann es doch kein unterschied geben... . Irgendwie verstehe ich das Ganze nicht.. sry ich steh einfach auf dem Schlauch (vielleicht ist es auch ein ganzes Rohr; aber ich versteh das nicht. Ich war so glückklich, dass es endlich im Mozilla läuft:-().

Ich meinte das Position aus div#hauptnavigation ul li a
Das ist kein <div> sondern das a-tag darin. ich habe es in der IE(7) Developer Toolbar ausprobiert. Die Navigation hat sich nicht mehr verschoben.

Anmerkung zum letzten Thread: Du hattest ja auch bei meinem damaligen Vorschlag bemängelt, wenn jemand die "Bilder ausstellt"... Also ich hab das getestet, auch wie Google die Seite ausliest --> passt doch; somit wäre auch die barrierefreiheit bewahrt.

Ich glaube das war ich auch nicht. Aber mit visibility: hidden können echte Besucher den Link (ohne Bilder) auch nicht sehen.
Entferne mal alle position: relative; und Lade die Seite neu hoch.
Das Image-Replacement kannst auch einbauen wenn der Rest funktioniert.
In diesem Jahr kann ich mir das dann aber nicht mehr ansehen.
(Am 1.1 liege ich bestimmt krank im Bett)

 

[snooze7]

wieso können echte Besucher den Link nicht sehen? Wenn ich per Developer Tool die CSS ausschalte, dann steht da der Schrifttext...

edit: ohh shit... du hast recht. Ich hatte immer die ganze css ausgeblendet und nicht nur die Bilder... verdammt. Jetzt muss ich sowieso nochmal ran.

Seite habe ich neu hochgeladen (ohne diesen Imagereplacer... den probier ich aber noch aus - wenn ich das richtig verstanden habe *kratz)

edit: ich habs verstanden. Ist diese Methode weit verbreitet? Ich hab diese noch nie gesehen? Gibt es unter Umständen Probleme dabei? Nimmst du/ ihr immer diese Technik für grafische Menüs?

Dann mal gute Besserung und vielen Dank.

 

[neuroleptika]

...
edit: ich habs verstanden. Ist diese Methode weit verbreitet? Ich hab diese noch nie gesehen? Gibt es unter Umständen Probleme dabei? Nimmst du/ ihr immer diese Technik für grafische Menüs?

Dann mal gute Besserung und vielen Dank.

Die relativen Positionierungen sind noch drinn.
Mir ist eingefallen, daß du die später für die absoluten Positionierungen der spans auch brauchst.

Dann gebe body auch position:relative;

body { position: relative;}

Dann passt es erstmal im IE7. Die weißen Flächen stimmen jetzt auch.

Das Phänomen kannte ich bisher nur beim Zoomen im IE7 . Warum sich der Bug hier auch ohne Seitenzoom bemerkbar macht weiß ich nicht.

Ich verwende die Gilder-/Levin-Methode gerne für Logos z.B in Überschriften.
In Navigationen ist die Methode aber auch verbreitet.

Einige Probleme gibt es schon:

Wenn ein Besucher den Text extrem vergrößert guckt er hinter den Grafiken hervor.
Deshalb verwenden viele (auch ich) overflow: hidden;. Wenn ein Besucher ohne Grafiken den Text extrem vergrößert ist der Text damit abgeschnitten.

Ein anderes Problem könnte auftreten wenn die Grafiken eine Schrift enthalten die auch im Fließtext verwendet wird. Wenn diese Schrift nicht installiert ist weicht sie von den Grafiken ab (könnte komisch aussehen).

Mac und PC verwenden unterschiedliche Schriftglättungen (oder unter xp, je nach Einstellung und Browser, überhaupt keine) Welche Schriftglättung soll man nun in den Grafiken verwenden?

Wenn die Schrift sich ohnehin deutlich vom Fließtext abhebt sind letztere Einschränkungen Egal.

guten Rutsch.

 

[snooze7]

hey klasse. Hat geklappt, vielen Dank.

Nur das Weiß des Hintergrunds stimmt - noch - nicht so ganz. Eigentlich wollte ich es so machen, dass ich 3 Spalten habe und jede Spalte ihre eigene Größe und daher auch verschiedene Hintergrund-Größen. Jetzt ist es aber so, dass sich die 3 Spalten alle immer an der größten Spalte (hier die Mitte) orientieren. Aber eigentlich wollte ich es, dass die 3 Spalten unabhängig von einander sind; zumindest was die Hintergrundfarbe angeht. In Mozilla klappt das auch.


Nochmal zu diesem Imagereplacer: Das klappt aber nur, wenn die Breite der Bilder gleich bleibt oder? Ansonsten müsste ich zusätzlich noch für jedes li eine eigene Klasse vergeben oder? Dadurch wird der Quelltext aber ziemlich gestreckt... Das mit dem overflow: hidden ist schon nicht schlecht, aber wenn jemand die Bilder "ausstellt" sind die Texte darunter ja abgeschnitten oder? Insofern hat man dadurch auch fast nichts erreicht (was die Barrierefreiheit angeht). Dann wird der User - soweit er das durchschaut - einfach die Stylesheets deaktivieren --> dann komm ich mir meiner Variante zum selben Ergebnis. Ich meine die Sache mit diesem Imagereplacer ist schon eine feine Sache, nur bei komplizierten Dingen klappt es auch nicht mehr so gut.

Daher koommt man fast nicht herum sowohl eine grafische als auch eine textbasierte Seite zu haben. Wobei ich immer denke, dass eine gute "Druckansicht" diesen textbasierten Bereich mehr als abdeckt.

Ich kann die Programmierer schon verstehen wenn sie meinen, es sei vom Aussehen egal ob Grafik oder Code-Text. Technisch gesehen ist Code-Text immer besser. Aber meiner Meinung macht es schon einen großen Unterschied, mal abgesehen davon, dass der User nicht alle Schriftarten zur Verfüfung hat. Ich hab mir schon meine Gedanken zu Barrierefreiheit gemacht. Ich werde bei meiner Seite noch Zusatzfunktionen einbauen: Ich dachte da an einen multiplen Styleswitcher: Unabhängig Text und Aussehen zu verändern. Auch diese Menüs die bei drücken der Tab-Taste erscheinen finde ich ganz nett.


Wie schon gesagt, ich komm aus der grafischen Schiene und habe mir so meine Gedanken zu Programmierung gemacht bzw. habe mir das alles selbst erarbeitet (ein Noob halt), aber DIE ideale Lösung scheint es wohl nicht zu geben; gerade auch was die Gratwanderung zwischen Optik/ Aussehen und Zugänglichkeit angeht. Ich finde das auch ansich ein echt spannendes Thema (Barrierefreies Webdesign: Einfach für Alle - eine Initiative der Aktion Mensch). Also Komments oder Meinungen sind gerne erwünscht.


BIG EDIT: Ich habs geschafft. Ich hab einfach die Ebenen (content_right, content_middle und content_right) aus der Hauptebene (content) herausgenommen. Jetzt passt alles (Hintergrund und Links). Vielen Dank für eure Mühen.

Gibt es eigentlich schon einen Thread/ Abstimmung über Barrierefreiheit und Zugänglichkeit?!

Dir auch einen guten Rutsch.

 

[neuroleptika]

...
Nochmal zu diesem Imagereplacer: Das klappt aber nur, wenn die Breite der Bilder gleich bleibt oder? Ansonsten müsste ich zusätzlich noch für jedes li eine eigene Klasse vergeben oder?

Warum sollten die Bilder denn nicht alle gleich Breit sein?

... Das mit dem overflow: hidden ist schon nicht schlecht, aber wenn jemand die Bilder "ausstellt" sind die Texte darunter ja abgeschnitten oder? Insofern hat man dadurch auch fast nichts erreicht (was die Barrierefreiheit angeht). Dann wird der User - soweit er das durchschaut - einfach die Stylesheets deaktivieren --> dann komm ich mir meiner Variante zum selben Ergebnis. Ich meine die Sache mit diesem Imagereplacer ist schon eine feine Sache, nur bei komplizierten Dingen klappt es auch nicht mehr so gut.
...

Der Platz sollte für die Texte sollte schon ausreichend bemessen sein. Das overflow: hidden; sollte erst bei extremer Schriftvergrößerung greifen.
Ab einer gewissen Schriftvergrößerung wird auch die efa-Seite teilweise unlesbar.
Image Replacement halte ich nicht geeignet um Texte zu ersetzten für die ansonsten nicht genügen Platz zu Verfügung stünde.
Sind die Boxen ausreichend bemessen wird der Text erst bei extremen Einstellungen abgeschnitten. Image Replacement funktioniert ja auch ohne overflow: hidden.

Wenn es dir nur darum geht, daß die Links auf jeden Fall in die Box passen könntest du der Box eine width in em geben. Die Box würde mit der Schriftgröße wachsen.

<div id="alles">

<div id="spalten">
<div id="nav1">
Navigation 1
</div>
<div id="nav2">
Navigation 2
</div>
<div id="hauptinhalt">
Hauptinhalt
</div>
<div class="clearer"><!-- --></div>
</div>

</div>

Der Mittlere (ungefloatete Bereich) bekommt Links und rechts das passende margin um den flankierenden Spalten von der Pelle zu rücken.

 body {
margin: 0;
padding: 0;
font-size: 100%;
}

#alles {
width: 900px;
margin: 0 auto;
}

  #nav1 {
float: left;
background-color: #8F1D12;
width: 15em;
}

#hauptinhalt {
background-color: #CFCFCF;
margin-right: 20em;
margin-left: 15em;
}

  #nav2 {
float: right;
width: 20em;
background-color: #808080;
}

#fuss {
background-color: #325774;
}

.clearer {
clear: both;
}

Der mittlere Bereich würde die übrige Breite einnehmen.

Gibt es eigentlich schon einen Thread/ Abstimmung über Barrierefreiheit und Zugänglichkeit?!

Die Moderatoren schließen Threads meißtens, wenn nach längerer Zeit geantwortet wird.
Ich weiß deshalb nicht ob das hier Sinn macht.