nicht angemeldet
Problem mit IE 6.0 - Fehler in meinem CSS oder IE-Fehler?
Hallo,
es geht um diese Seite: http://www.mediengestalten.com/neu/news.html.
Wenn ich mit der Maus über einen inaktiven Link fahre, springt die ganze Seite um einige Pixel nach oben. Aber nur im IE.
Opera und Mozilla machen keine Probleme.
Wer weiß woran das liegen könnte?
Vielen Dank schonmal
gruß
Corinna
-
Wer weiß woran das liegen könnte?
Ich konnte es gerade leider nicht im IE testen. ich vermute aber, dass es daran liegt, dass Du eine andere Schriftdicke/-größe verwendest. Dadurch ist die Schrifthöhe anders und die Seite wird neu gerendert.
Heiner
-
Dann müsste ich es ja beheben können, indem ich eine fixe line-height angebe.
Klappt leider nicht.Trotzdem Danke.
Gruß
Corinna
-
-
Wenn ich mit der Maus über einen inaktiven Link fahre, springt die ganze Seite um einige Pixel nach oben. Aber nur im IE.
Opera und Mozilla machen keine Probleme.Kann ich mit meinen IE 6 hier nicht nachvollziehen.
Wer weiß woran das liegen könnte?
Wenn Du jetzt noch gesagt hättest, daß Du den IE 5 benutzt, dann hätte ich blindlings auf den altbekannten IE-Fehler bei der Summierung der Elementgrößen, -abstände und -ränder getippt. Allerdings ist das bei Deinem CSS-Code nicht wirklich eindeutig nachzuvollziehen, auch wenn Du einige margin- und padding-Angaben drin hast. Falls sich nichts anderes findet, wäre das aber eine nähere Untersuchung wert.
Davon mal abgesehen solltest Du vielleicht ein wenig Ordnung schaffen und die doppelten ID- und Klassennamen entfernen. Ich will nicht behaupten, daß das ein Fehler sei, aber sonderlich glücklich ist es auch nicht.
Weiterhin wäre eine sinnvollere HTML-Nutzung sehr angebracht: Du kannst <img> direkt formatieren, der <div>-Block drumherum ist vollkommen sinnlos.
Ebenso ein faux-pas ist die Benutzung von <br><br> zum Erzeugen eines Absatzes, das wird auch nicht besser, wenn Du XHTML drüber schreibst und <br /><br /> einsetzt. Für einen Absatz ist <p> da, nichts anderes.
Über das Menü und wiederum den Einsatz von <br>, diesmal zur Erzeugung einer Liste, kann man sich streiten, denn <li> ist manchmal nicht ganz so einfach zu bändigen - aber es ist möglich.
Die Konstruktion <div><p>news</p></div> sollte man Dir aber definitiv um die Ohren klatschen. Warum um alles in der Welt benutzt Du für eine Überschrift nicht <h1>? Die <hx>-Elemente sind genauso Blockelemente wie <div>, haben dafür aber eine inhaltliche Aussage.
Ähnlich ist es mit <div id="logo"> - warum benutzt Du für eine Grafik nicht <img>?Last but not least: Überlasse es doch dem Benutzer, welche Schriftgröße er am besten sehen kann.
Gruß,
soenk.e-
Danke für die ausführliche Antwort.
Ich werde mir das später alles noch in Ruhe zu Gemüte führen. Und dann ordentlich drauf antworten.Bei dir im IE verschiebt sich nicht alles um einige Pixel nach oben?
Komisch.Gruß
Corinna -
Hallo,
ich habe mal auf dieser Seite http://www.mediengestalten.com/neu/kompetenzen_design.html noch kleinere Änderungen vorgenommen, die du vorgeschlagen hast.
<img> direkt formatiert. stimmt, macht <div> völlig überflüssig.
was es mir bringt, wenn ich auf <br> verzichte und stattdessen überall <p> verwende, kann ich nicht so ganz nachvollziehen.
hast du da eine erklärung für mich?dass es für eine überschrift sinnvoller ist <hx> zu verwenden, kann ich dagegen verstehen.
für das logo verwende ich <div>. so muss ich es nciht in jeder datei einzeln austauschen, wenn sich etwas ändert.
ich muss dazu sagen, dass dies meine erste seite ist, die ich ganz ohne tabellen baue.
ich bin daher für alle tipps dankbar.das springen der seite habe ich aber leider immer noch nciht wegbekommen.
gruß
corinna-
was es mir bringt, wenn ich auf <br> verzichte und stattdessen überall <p> verwende, kann ich nicht so ganz nachvollziehen.
hast du da eine erklärung für mich?Das ist ein prinzipielles Problem. Natürlich kannst Du dasselbe Aussehen auch mit soundsoviel <br> erreichen. Aber genauso gut könntest Du diese Seite ziemlich exakt gleich mit althergebrachtem Tabellenlayout hinbekommen, also warum benutzt Du CSS und <div>? Im Grunde könnte man auch fast alles mit nur einem Element machen: <font>.
Der Punkt ist, daß HTML keine optische Aussage hat, sondern eine inhaltliche - zum Beispiel ist <h1> kein "großer, kursiver Text", sondern die Hauptüberschrift.
Dementsprechend ist der Gebrauch von <br><br> hier logisch gesehen falsch, denn für einen Absatz gibt es <p></p>. <br> ist für eine einfache Zeilenschaltung gedacht, nichts anderes.dass es für eine überschrift sinnvoller ist <hx> zu verwenden, kann ich dagegen verstehen.
Du kannst das <div> um die Überschrift auch wegglassen; <h1> ist genauso ein Blockelement wie <div>. Es ist also wiederum die Situation, die Du schon bei der Grafik hattest.
Und verwende bitte <h1> für die Hauptüberschrift der Seite, nicht <h5> (siehe oben, es macht inhaltlich keinen Sinn).für das logo verwende ich <div>. so muss ich es nciht in jeder datei einzeln austauschen, wenn sich etwas ändert.
Falscher Platz. Tausche die Logografik (lies: Grafikdatei) aus, wenn Du das Logo austauschen willst, oder verwende Server Side Includes.
Noch eine Ergänzung zu Deiner Menüliste, da Du jetzt eh schon dran gebastelt und es damit IMHO nur noch verschlimmbessert hast: Benutze <li> und formatiere die Elemente mit
li { list-style-type:none; margin:0; padding:0; }
ul { margin:0; padding:0; }Dann hast Du eine Liste, die aussieht, wie Deine <div>- oder <br>-Liste jetzt, aber auch tatsächlich eine Liste ist.
das springen der seite habe ich aber leider immer noch nciht wegbekommen.
Den oberen Abstand mit 100 Pixel anzugeben ist nicht so sonderlich klug, weil dann die Seite bei einigen Fenstergrößen nur halb zu sehen ist.
Da Du eh alle Elemente mit festen Pixelgrößen angeben willst (was ich nicht sinnvoll finde, da die Seite dann nur auf Deinem Monitor passt, aber das tut jetzt nichts zur Sache), solltest Du nochmal versuchen, die float:s rauszunehmen und stattdessen position:absolute benutzen.
Das gilt auch für den äußeren Container #frame; wenn Du eine Position haben willst, verwende top, left, right und/oder bottom, aber nicht margin (oder padding).Beachte auch, daß Du statt beispielsweise top und height auch top und bottom angeben kannst. Mit diesem Schema passt sich ein Element automatisch an seine Umgebung an. Verwende es unbedingt bei den inneren Elementen, so daß Du nur noch bei #frame ein tatsächliche Breiten- und Höhenangabe hast.
Wenn Du Lust hast, kannst Du auch nochmal die CSS-Angaben für die <a>s komplett herausnehmen und dann Stück für Stück wieder reinsetzen, um zu beobachten, bei welcher Angabe die Seite anfängt zu springen. Damit hättest Du das Problem zumindest schonmal eingekreist - vielleicht ergibt sich daraus ja etwas.
Gruß,
soenk.e-
Hallo,
natürlich kann ich auch eine Seite mit Tabellen und font-tags bauen. Aber das will ich nicht. Und ich denke schon, dass es einen Unterschied macht, ob man eine Seite noch mit font-tags macht oder ob man <br>s verwendet.
Das mit dem h1-tag hab ich kapiert.
Logo: Versteh ich schon, wie Du das meinst. Aber ich verstehe nicht, warum ich das nicht in meiner css-Datei angeben soll.
Dass das mit den 100 Pixeln Anbstand von oben nicht gerade glücklich ist, weiß ich auch.
Ich habe mittlerweise #frame ganz weggelassen und die Angaben im body gemacht. springt jetzt nicht mehr.
Position:absolute macht mit Probleme, wenn ich xhtml 1.1 im Dokumenttyp angebe. Erklärung???
Gruß
Corinna-
natürlich kann ich auch eine Seite mit Tabellen und font-tags bauen. Aber das will ich nicht.
Eben. Stellt sich jetzt die Frage, warum Du CSS-Layout benutzt? Geht es Dir darum, dem letzten Hype hinterherzulaufen ("Das machen jetzt alle so!"), oder stehst Du hinter dem Grundgedanken von HTML, systemunabhängige Dokumente zu erstellen.
In ersterem Fall könntest Du genauso gut Tabellen benutzen, denn ob jemand mit nicht-grafischem Browser (oder gar eine Maschine) sich nun durch verschachtelte Tabellen wühlen muß oder eine Textwüste vorfindet, ist für das Endergebnis bedeutungslos.
In letzterem Fall solltest Du Dich aber wirklich strikt an die Bedeutung der HTML-Elemente halten, und das bedeutet nunmal auch: <p>-Block für Absätze, nicht <br><br>.Wie Du Dich entscheidest, ist mir am Ende egal, aber es wäre schade, wenn Du Dich zwar an die Syntaxregeln von (X)HTML hältst, aber gewissermaßen kurz vorm Ziel aufhörst und wieder in das alte System zurückfällst, bei dem HTML-Elemente nur der Optik halber benutzt wurden (was bei <br><br> leider der Fall ist).
Ich wollte mit dem <font>-Beispiel lediglich darauf hinweisen, daß es aus Sicht der Benutzbarkeit herzlich wurscht ist, ob jemand Tabellenlayout und <font> oder einen Haufen <div>s mit CSS benutzt. CSS kann noch so hypermodern sein, es macht keinen Unterschied, wenn es nicht sinngemäß zusammen mit HTML eingesetzt wird.
Das alles aber bitte unabhängig davon, wie "schwerwiegend" dieses "Vergehen" mit den doppelten <br>s nun sein mag. Es ist die Prise Salz in der Suppe, nicht mehr, nicht weniger.
Logo: Versteh ich schon, wie Du das meinst. Aber ich verstehe nicht, warum ich das nicht in meiner css-Datei angeben soll.
Das Logo steckt in der Grafikdatei, nicht in der CSS-Datei. Also sollte die Änderung in der Grafikdatei erfolgen, nicht in der CSS-Datei.
Vom Verwaltungsaufwand her ist ein <img> übrigens noch geringer als Deine jetzige Variante, denn auf den Server kopieren mußt Du das Logo so oder so, Du sparst Dir dann aber die zusätzliche Änderung an der CSS-Datei.
Mal ganz zu schweigen davon, daß falls jemand anderes diese Stelle Deines Layouts bearbeiten soll, er sich mit an Sicherheit grenzender Wahrscheinlichkeit rein intuitiv an der Logodatei zu schaffen macht und nicht an dem Ort, von dem eigentlich die großen bunten Buchstaben herkommen :)Last but not least: Leute mit älteren Browsern sowie solche mit nicht-grafischen Browsern bekommen die Grafik nicht zu sehen, weil ihr Browser kein oder nur teilweise CSS versteht. Ähnliches passiert, wenn jemand die Seite ausdruckt. Nicht selten werden Hintergrundgrafiken beim Druck weggelassen, weil sie entweder stören oder nur unnütz teure Tinte verbrauchen.
Diese nicht angezeigte Grafik ist insofern ein Problem, als das in ihr das Identifikationsmerkmal Deiner Firma steckt und ausgerechnet über sie der Hauptbezug zur Firma hergestellt wird.
Schau Dir die Seite mal mit http://www.delorie.com/web/lynxview.cgi?url=http%3A%2F%2Fwww.mediengestalten.com%2Fneu%2Fkompetenzen_design.html an. Du wirst dort nur einen Text vorfinden, der sich augenscheinlich irgendwie allgemein mit "Design" beschäftigt, aber keinerlei eindeutigen Bezug zu Euch hat. Und was nützt der beste Werbetext, wenn das Produkt unbekannt bleibt?Schon alleine deswegen ist ein <img> mit passendem alt-Text durchaus angeraten, Verwaltungsaufwand oder die Logik von Ursache und Begleiterscheinung hin oder her.
Position:absolute macht mit Probleme, wenn ich xhtml 1.1 im Dokumenttyp angebe. Erklärung???
Was sind "Probleme"?
Gruß,
soenk.e-
Hallo,
nein, es geht mir mit Sicherheit nicht drum xhtml zu verwenden, weil es gerade modern oder sonstwas ist.
Hauptgrund warum ich den Einsatz von CSS bevorzuge ist, dass ich nichts schrecklicher finde, als seitenlangen Quelltext bei dem man sich durch unendlich viele Tabellen wurschteln muss, bis man mal was findet. Meistens noch mit Unmengen von blinden gifs und Grafiken (Buttons), weil unfähige Webdesigner nicht wissen, was mit CSS alles gemacht werden kann.
Klar ändert sich an der Oberfläche dadurch nichts.
Wenn man aber mal dahinter schaut, macht es meiner Meinung nach einen gewaltigen Unterschied.Klar steckt das Logo in der Grafik-Datei. Und wenn ich es ändern will, ändere ich es in der Grafik-Datei.
Mir erschien eben nur die Idee sehr praktisch, dass, wenn ich in allen Dateien ein und die selbe Grafik verwende, ich sie dann auch nur in der CSS-Datei angebe. Und ggfl. dort austausche.
Was mich aber überzeugt hat, war Dein Argument mit der Druckansicht und dem fehlenden <alt>-Tag.
Manchmal dauert es eben etwas länger bis man es einsieht ;-)Wobei es mir jetzt in der Druckvorschau beim IE 6.0 auch das Layout zerschießt.
Doctype-Angabe war nicht ganz richtig.
Was mein Layout jedoch völlig zerschießt, ist diese diese Angabe vorm Doctype: <?xml version="1.0" encoding="iso-8859-1"?>Gruß
Corinna-
Klar steckt das Logo in der Grafik-Datei. Und wenn ich es ändern will, ändere ich es in der Grafik-Datei.
Was mich aber überzeugt hat, war Dein Argument mit der Druckansicht und dem fehlenden <alt>-Tag.
Manchmal dauert es eben etwas länger bis man es einsieht ;-)Ich gebe gerne zu, daß mir das auch erst auf den letzten Drücker eingefallen ist :)
Wobei es mir jetzt in der Druckvorschau beim IE 6.0 auch das Layout zerschießt.
Was mein Layout jedoch völlig zerschießt, ist diese diese Angabe vorm Doctype: <?xml version="1.0" encoding="iso-8859-1"?>
Mmh. Irgendwo scheint Dein IE einen Schuss wegzuhaben. Aber das macht ja nichts, installierst Du Windows halt neu ;-> Nein, ernsthaft: Das sind alles sehr merkwürdige Begebenheiten, die sich wohl nur notdürftig kitten lassen (z.B. "<?xml.." weglassen) oder wohl oder übel hinzunehmen sind. Probiere Deine Seiten auf jeden Fall nochmal bei anderen IEs aus, nicht, daß Du nur wegen Deinem Browser den ganzen Kram hinschmeißt.
Gruß,
soenk.e
-
-
-
-
-
-
-
Hallo Corinna,
Wenn ich mit der Maus über einen inaktiven Link fahre, springt die ganze Seite um einige Pixel nach oben. Aber nur im IE.
Opera und Mozilla machen keine Probleme.In einem ähnlichen Fall hat bei mir folgendes Workaround geholfen:
Definiere die naviuntenlinks-Links als Blockelemente (display:block;) und weise ihnen eine explizite Höhe zu (height:[n]px). Dann sind die <br>'s auch überflüssige.
Gruß
Paul-
Hallo Paul,
Danke für den Tipp.
Habe das sofort hier http://www.mediengestalten.com/neu/kompetenzen_design.html getestet.Ja, die <br> sind dann überflüssig. Immerhin schon etwas.
Aber leider verschiebt sich immer noch alles.
Gruß
Corinna
-
-
Ich hann dieses Problem lösen, wenn ich eine fixe Positionierung angebe. zb 100 Pixel vom oberen Rand.
Vorher hatte ich 10% von oben angegeben.Danke für eure Hilfe.
Wenn jemdand trotzdem weiß, warum es um einige Pixel springt, wenn ich keine fixe Position angebe, wäre ich trotzdem dankbar.
Gruß
Corinna