HTML-Editor phase 5 Support > Darstellung einer <div> in IE und Firefox unterschiedlich

Vollansicht: Darstellung einer <div> in IE und Firefox unterschiedlich

HTML-Editor phase 5 Support > Fragen, Lösungen zu HTML-Problemen bzw. Webdesign-Fragen - Talk > HTML

Sergeant_Pepper

02.03.2007 - 10:38

Hallo,

folgendes Problem:
auf meiner Seite http://www.interasl.niedersachsen.de/ gibt es im oberen Bereich eine <div> (rote Navigationsleiste) mit width:100% . Im Firefox wird das Ding bis zum Fensterrand gezeichnet, im IE bleiben rechts ca. 20 Pixel weiß.
Ich habe in der <div> zunächst mit roter Hintergrundfarbe gearbeitet. Als der Fehler dann auftrat, habe ich eine Hintergrundgrafik (rotes Rechteck) erzeugt und die mit overflow:visible angezeigt. Das Resultat war leider dasselbe.
Um es vorweg zu sagen: die Seite ist kommerziell und wurde nicht mit Phase 5 erstellt. Ich würde mich freuen, trotzdem Hilfe zu bekommen.
CSS:

QUELLTEXT

.navi1 {
  font-size:0.7em; font-weight:bold; text-align:center;
  color: #FFFFFF;
  background-image:url(../image/backgr-nav1.jpg);
  overflow:visible;
  position:absolute;
  margin:0px; padding:0px;
  top:85px; left:0px;
  height:17px;
  width:100%;
}
.navi1 ul {
    margin-top:0em;
    margin-bottom:0em;
    padding:0.1em;
    text-align:center;
}
.navi1 li {
    list-style:none;
    display:inline;
    padding-left:2em; padding-right:2em;
    border-left:2px dashed;
}

HTML:

QUELLTEXT

<div class="navi1">
  <ul>
    <li id="startseite" style="border-left:0px">
    <a href="java script:showElement('mainarea','pgHome');showElement('navigrey','navHome')">
      Startseite</a>
    </li>
    <li id="downloads">
    <a href="java script:showElement('mainarea','pgDown');showElement('navigrey','navDown')">
      Downloads</a>
    </li>
    <li id="java">
    <a href="java script:showElement('mainarea','pgSysJava');showElement('navigrey','navSysJava')">
      Systemvoraussetzungen und Java</a>
    </li>
    <li id="kontakt">
    <a href="java script:showElement('mainarea','pgKontGll');showElement('navigrey','navKont')">
      Kontakt</a>
    </li>
    
  </ul>
</div>

Sergeant_Pepper

02.03.2007 - 12:02

Soeben habe ich in einem anderen Forum die Lösung gefunden:
man muss im übergeordneten Element (bei mir <body>) die Breite auch auf 100% setzen, dann klappt es auch im IE.

DNS

02.03.2007 - 12:17

Hallo!

Ist Dir nicht aufgefallen, dass Deine Seite unten einen horizontalen Scrollbalken hat? Das kommt daher, weil Du Deine - ich nenn's mal - Dokumentenmaße vermurkst hast. Schon in der ersten Zeile definierst Du einen grauen DIV mit Breite 350px und direkt daneben einen blauen mit 100% Breite. 100% ist aber die Breite des Browserfensters, Deine Seite ist also 100% + 350px breit. Horizontale Scrollbalken sind häßlich, wenn sie nutzlos sind, und daher stammen, dass die Seite zu breit gebaut wurde.

Du versuchst hier einen Spagat mit halb fixen und halb dynamischen Breitenangaben, und mir stehen ehrlich gesagt ein wenig die Haare zu Berge ob dieser Architektur. Du zwingst die Seite zum rechten Rand raus, anstatt ihr rechts einen sauberen Abschluss zu geben. Dein Problem ist nicht das kleine weiße Stück am rechten Rand, denn das ist in beiden Browsern fast gleich: Scrolle mal ein wenig nach rechts, da hört dann auch im Mozilla der rote Balken früher auf als der Rest. Du kannst den Effekt verschwinden lassen, indem Du dem roten Bereich einfach eine Breite von 120% gibst - aber damit ist Dein grundsätzliches Problem nicht gelöst.

Du solltest Dir selbst einen Gefallen tun, und Dich für eine von beiden Möglichkeiten entscheiden:

- Entweder verpasst Du der Seite eine fixe Breite von meinetwegen 800px. Dann kannst Du auch sinnvoll mit absoluter Positionierung arbeiten, und vermeidest diese Effekte mit leeren Seitenteilen (scrolle mal auf Deiner Seite nach ganz rechts und ganz unten: Da ist von der Seite nichts mehr zu sehen - das darf eigentlich nicht sein)

- Oder Du machst 'Liquid Design', packst alles in DIV-Container und lässt die lustig floaten. Dann ist die Seite echt dynamisch und passt sich dem Fenster an, ohne diese riesigen Lücken. Hast Du Dir beispielsweise schon mal YAML.de angeschaut? Auch wenn Du es nicht direkt verwenden kannst willst, Du kannst Dir da die Grundgedanken und die Umsetzung der Architektur anschauen.

Was mir noch so aufgefallen ist: Ohne JavaScript geht bei der Seite gar nichts, nicht mal die Navigation. Dabei hätte man die wenigsten ohne JavaScript programmieren können. Ich meine nur so, wegen Barrierefreiheit von Behördenseiten. Außerdem ist die Navigation teilweise redundand - und somit thematisch nicht klar gegliedert ind horizontal und vertikal - und man muss ständig zurück auf die Startseite, wenn man von Bereich A nach B springen will.

Viele Grüße,
Dennis.

ZITAT(Sergeant_Pepper @ 02.03.2007 - 12:02)

Soeben habe ich in einem anderen Forum die Lösung gefunden:
man muss im übergeordneten Element (bei mir <body>) die Breite auch auf 100% setzen, dann klappt es auch im IE.

Das funktioniert ganuso, wie die oben von mir erwähnte Methode, aber damit ist das Problem nicht gelöst, sondern nur kaschiert.

Sergeant_Pepper

03.03.2007 - 13:07

Hi,

@ DNS: vielen Dank für die ausführliche, sorgfältige Antwort und Analyse. Ich habe auch schon ein paar Sachen korrigiert, aber der letzte Stand ist noch nicht online.

ZITAT

einen grauen DIV mit Breite 350px und direkt daneben einen blauen mit 100% Breite... Deine Seite ist also 100% + 350px breit. Horizontale Scrollbalken sind häßlich, wenn sie nutzlos sind

Ja, das ist korrigiert. Der blaue Balken liegt jetzt nicht neben, sondern unter dem grauen (z-index). Der horizontale Scollbalken ist jetzt weg, wenn alle tatsächlichen Inhalte im Fenster zu sehen sind.

ZITAT

Oder Du machst 'Liquid Design', packst alles in DIV-Container und lässt die lustig floaten. Dann ist die Seite echt dynamisch und passt sich dem Fenster an, ohne diese riesigen Lücken. Hast Du Dir beispielsweise schon mal YAML.de angeschaut? Auch wenn Du es nicht direkt verwenden kannst willst, Du kannst Dir da die Grundgedanken und die Umsetzung der Architektur anschauen.

Auf YAML habe ich gestern mal draufgeschaut, ist sehr interessant. "Lustig floaten" lassen beherrsche ich noch nicht, und die Seite muss erst mal raus in die Welt. Die Seite ist mein zweiter Gehversuch, vorher hatte ich einen ganz entsetzlichen Auftritt, der auf Frames basierte. Mir fehlt für viele Feinheiten einfach die Zeit.

ZITAT

Ohne JavaScript geht bei der Seite gar nichts, nicht mal die Navigation. Dabei hätte man die wenigsten ohne JavaScript programmieren können.

Da wäre ich für einen Tip dankbar, wie man ohne Javascript zwei Bereiche bzw. <div> mit einem Mausklick ein- bzw. ausblendet.

ZITAT

Außerdem ist die Navigation teilweise redundand

Ich halte es per se nicht für schlecht, dass man auf mehreren Wegen nach Rom kommen kann.

ZITAT

und somit thematisch nicht klar gegliedert ind horizontal und vertikal - und man muss ständig zurück auf die Startseite, wenn man von Bereich A nach B springen will.

Es gibt die rote Menüzeile = Primärnavigation. Im grauen Bereich links befindet sich die Sekundärnavigation. Ist das Deiner/Eurer Meinung nach nicht deutlich genug zu unterscheiden?
Das man nur über die Startseite von A nach B wechseln kann, stimmt so nicht, denn die rote Menüleiste ist immer zu sehen.

Grundsätzlich zu der Seite: die Anwendung um die es da geht, stellt leider ziemliche Ansprüche: Installation eines Java-Plugins (aber nicht alle Versionen sind zulässig), Anpassung von Java-Sicherheitseinstellungen und Java-Laufzeitparametern, ggf. Anpassung eines Proxy, gezielte Öffnung einer Firewall für definierte Verbindungen (Servername und Port). Das Javascript aktiviert sein muss, ist da das geringste Übel.

Viele Grüße, Ulli

DNS

03.03.2007 - 17:34

ZITAT(Sergeant_Pepper @ 03.03.2007 - 13:07)

Ja, die Jugendsünden...

Ich muss zu meiner Schande gestehen, dass einer meiner wichtigsten Seiten immer noch auf Frames basiert.

Wenn ich mal viiiiel Zeit habe...

YAML ist mE vor allem interessant, weil Du dort die Browserhacks in eigenen CSS-Dateien abgelegt hast, und Du Dich somit um den Kram gar nicht mehr kümmern musst. In Deinem Fall würde ja ein zweispaltiges Layout ausreichen. Zu Liquid Design gibt es auch noch jede Menge andere Seiten, aber bei YAML bekommt man es mal schön einfach präsentiert.

ZITAT

Da wäre ich für einen Tip dankbar, wie man ohne Javascript zwei Bereiche bzw. <div> mit einem Mausklick ein- bzw. ausblendet.

Ein- und Ausblenden nicht direkt, aber die Hervorhebungssachen beim Drüberfahren bekommst Du auch einfach mit den Pseudoklassen hin. Ich persönlich kann mich mittlerweile sehr gut damit anfreunden, bei jedem Menupunkt eine (schön schlank codierte) neue Seite aufzurufen, als den ganzen Kram erstmal zu laden, und dann per Javascript ein- und ausblenden zu lassen. Deine Seiten sind ja eigentlich recht winzig, passt alles problemlos in ein 800x600 Fenster. Wie gesagt, meine Meinung, ich stehe halt auf sauber codiertes und einfach gehaltenes HTML und CSS, und hebe mir JavaScript nur für kleine Extras auf, benutze es aber nicht für grundlegende Dinge, wie die Navigation. Das ist mein momentaner "Entwicklungsstand", früher habe ich auch noch mehr mit Javascript gearbeitet (und ganz früher mit Frames

)

ZITAT

Ich halte es per se nicht für schlecht, dass man auf mehreren Wegen nach Rom kommen kann.

Ja, schon, zB über Verwiese im Datenteil - aber nicht über doppelte Navigation.

ZITAT

Es gibt die rote Menüzeile = Primärnavigation. Im grauen Bereich links befindet sich die Sekundärnavigation. Ist das Deiner/Eurer Meinung nach nicht deutlich genug zu unterscheiden?

Das System ist an sich gut, nur interpretiere ich es so, dass sich zu jedem Punkt in der Primärnavigation ein eigenes Menu in der Sekundärnavigation öffnet. Natürlich kann ein Punkt auch in mehreren Sekundär-Menus vorkommen. Aber nach meinem Verständnis kann dort nicht ein Punkt aus der Primärnavigation auftauchen.

ZITAT

Grundsätzlich zu der Seite: die Anwendung um die es da geht, stellt leider ziemliche Ansprüche: Installation eines Java-Plugins (aber nicht alle Versionen sind zulässig), Anpassung von Java-Sicherheitseinstellungen und Java-Laufzeitparametern, ggf. Anpassung eines Proxy, gezielte Öffnung einer Firewall für definierte Verbindungen (Servername und Port). Das Javascript aktiviert sein muss, ist da das geringste Übel.

Ja, ich hab's gelesen. Nur habe ich erst vor kurzem gehört, dass die Seiten von Behörden barrierefrei sein müssen. Und Javascript ist eine Barriere, denn eigentlich sollte man das ja beim Surfen nicht standardmäßig aktiviert haben

Diese Anwendung hat ja auch zunächst nichts mit der Seite zu tun, man könnte also diese Seite völlig ohne Javascript programmieren, um sie einfach jedem zugänglich zu machen - mit "jedem" meine ich auch Suchmashineneroboter oder Screenreader, oder Leute, die aus Sicherheitsgründen genrell Javascript deaktiviert haben. Die können nämlich außer der Startseite gar nichts von Deiner Seite sehen, da Du keine Alternative oder wenigstens einen Hinweis in einem <NOSCRIPT> Tag bereithältst. Dass man dann für die Anwendung an sich verschiedene Dinge benötigt, darauf weist Du ja ausführlich auf einer eigenen Unterseite hin.

Viele Grüße,
Dennis.

Sergeant_Pepper

03.03.2007 - 18:23

Hi ...

das Wichtigste vorweg: Hannover hat leider verloren...

Nun zu den kleineren Problemen..

ZITAT

Ich persönlich kann mich mittlerweile sehr gut damit anfreunden, bei jedem Menupunkt eine (schön schlank codierte) neue Seite aufzurufen, als den ganzen Kram erstmal zu laden, und dann per Javascript ein- und ausblenden zu lassen.

Meine Perl-Scripter-Gewohnheiten (ich kann echt nix dafür

) lassen es nur extrem selten zu, dass ich identische Sachen (z.B. eine Primärnavigation) mehrfach codiere. Und weil die eigentlichen Inhalte recht klein sind, gönne ich mir hier den Luxus, gleich alles zu laden und dann auszublenden.

ZITAT

Es gibt die rote Menüzeile = Primärnavigation. Im grauen Bereich links befindet sich die Sekundärnavigation. Ist das Deiner/Eurer Meinung nach nicht deutlich genug zu unterscheiden?

Eigentlich habe ich das nur gemacht, um z.B. innerhalb des Hauptbereichs "Startseite" aus dem Bereich "Kosten" zur Applet-Startseite (wo das Applet gestartet werden kann) zurückkehren zu können. Ich halte es schon für richtig, dass man diesen Inhalt nicht nur über die Primär-Navi erreichen kann. Aber ich werde das ganze am Montag nochmal durchgehen...

Und ein <noscript>-Tag kommt dann auch rein...

Viel Grüße, Ulli

DNS

04.03.2007 - 14:07

ZITAT(Sergeant_Pepper @ 03.03.2007 - 18:23)

Meine Perl-Scripter-Gewohnheiten (ich kann echt nix dafür

Mit Perl kenne ich mich dummerweise nicht aus, was ich öfter mal vermisse, wenn ich an einer PHP-Seite rumpfuscheln muss...

Die Idee, alles zu laden, und dann nach Lust und Laune - quasi verzögerungsfrei - ein- und ausblenden zu lassen ist an sich auch nicht schlecht. Ich persönlich sehe da nur einen Nachteil: Bei Dir ist der gesamte Seitentext in HTML in einem Dokument codiert. Das ist auf der einen Seite gut, weil Suchmaschinen ja nichts erkennen können, was in Skripten steht. Auf der anderen Seite bringt es folgenden Nachteil mit sich: Die Suchmaschine spuckt Deine Seite aus, weil sie das gesuchte Wort darin gefunden hat. Nur ist die Seite mit diesem Wort dummerweise gerade eine der Unterseiten, die Du schön dynamisch ausgeblendet hast. Denn auf Deine Seite gelangt man man ja immer nur über die Startseite. Somit führt die Suche ins Leere.

Du solltest generell bedenken, dass Deine Seite weder von Suchmaschinen noch von Screenreadern oder Textbrowsern annähernd sinnvoll erfasst und/oder dargestellt werden kann.

Viele Grüße,
Dennis.

Sergeant_Pepper

05.03.2007 - 11:05

ZITAT

Die Suchmaschine spuckt Deine Seite aus, weil sie das gesuchte Wort darin gefunden hat. Nur ist die Seite mit diesem Wort dummerweise gerade eine der Unterseiten, die Du schön dynamisch ausgeblendet hast. Denn auf Deine Seite gelangt man man ja immer nur über die Startseite. Somit führt die Suche ins Leere.

An der Auffindbarkeit werde ich noch ein bisschen feilen. Aber dass einige der Worte auf den Unterseiten liegen, damit kann ich leben. Die wesentlichen Begriffe, um die es bei der Anwendung geht, stehen sowieso ganz vorne.

Viele Grüße, Ulli

DNS

05.03.2007 - 11:24

Hallo Ulli!

Das hier habe ich eben rein zufällig ausgegraben, und weil es so gut passt:

ZITAT

Bevor Sie sich also in die Tiefen von JavaScript stürzen, sollten Sie sich bewusst gemacht haben, dass JavaScript wirklich nur als Ergänzung zu normalem HTML gedacht ist, aber nicht als dessen Ersatz. Es ist zwar durchaus möglich, Web-Seiten ausschließlich in JavaScript zu programmieren, sodass man kaum mehr davon reden kann, dass JavaScript in HTML eingebettet ist, sondern eher davon, dass der HTML-Code der Seite mit Hilfe von JavaScript dynamisch erzeugt wird. Doch solche Seiten funktionieren nur dort, wo JavaScript im Browser aktiviert ist, und wo der Browser all das versteht, was Sie programmiert haben (ansonsten endet der Versuch, die Seite anzuzeigen, sehr schnell in einer nüchternen Fehlermeldung). Für Web-Seiten, bei denen Information im Vordergrund steht, und die auch von Suchmaschinen-Robots und Benutzerrandgruppen wie Sehbehinderten erfasst werden sollen, müssen Sie darauf achten, JavaScript nur so einzusetzen, dass die Web-Seiten auch ohne eingeschaltetes JavaScript ordentlich angezeigt werden, und dass die Navigation zwischen den Seiten auch ohne JavaScript funktioniert.

(Quelle: Stefan Münz, Autor von SELFHTML)

Nur so als Anregung

Viele Grüße,
Dennis.

Zodiac

07.03.2007 - 2:15

Hallo!

Ich wollte nur kurz mal zu eurem Zwiegespräch dazustossen und meine Meinung beisteuern.

ZITAT

Es gibt die rote Menüzeile = Primärnavigation. Im grauen Bereich links befindet sich die Sekundärnavigation. Ist das Deiner/Eurer Meinung nach nicht deutlich genug zu unterscheiden?

Nein, das finde ich nicht. Ich teile die Ansicht von DNS, dass:

ZITAT

nur interpretiere ich es so, dass sich zu jedem Punkt in der Primärnavigation ein eigenes Menu in der Sekundärnavigation öffnet. Natürlich kann ein Punkt auch in mehreren Sekundär-Menus vorkommen. Aber nach meinem Verständnis kann dort nicht ein Punkt aus der Primärnavigation auftauchen.

Wenn ich z.B. im Primärmenü "Startseite" alle Unterpunkte (im grauen Menü) anklicke, weil ich die Seite komplett anschauen will, dann ändert sich beim Punkt "Systemvoraussetzungen" plötzlich das Menü in dem ich mich befinde! Grund: Es ist Teil des Primärmenü "Systemvoraussetzungen und Java".

Stichwort: Lost in Hyperspace

Wenn ich mich auf einer Seite befinde, dann steht über dem grauen Menü, welches der Primärmenüs ich gerade vor mir habe, aber nicht auf welcher Seite ich mich direkt befinde. Der Menüpunkt ist nicht noch einmal hervorgehoben.

Idee: Was hältst Du davon das Primärmenü nicht zu zentrieren, sondern linksbündig zu machen?

Nächster Punkt: Die Seite enthalten keinen Text, der ein vertikales Scrollen notwendig machen würde und trotzdem ist unten freier weißer Raum. Wieso?

Zum Thema Barrierefreiheit/valides HTML gibt es ein paar Online-Tests:
http://www.sidar.org/hera/index.php.en
http://www.totalvalidator.com/validator/Validator
http://www.cynthiasays.com/
http://valet.webthing.com/
und natürlich
http://validator.w3.org

Witzig ist, dass der Validator vom W3C hier den Segen gibt, denn in Single-Tags ist bei HTML 4.01 ja eigentlich kein Slash notwendig (also <br> statt <br />, wie in XHTML) Einige der Validatoren merken dies auch an. Außerdem ist der Server auf ISO-8859-1 eingestellt und dein Meta-Tag setzt ISO-8859-15.
Meines Erachtens ist der Unterschied zwischen den beiden nur das Euro-Zeichen, dass natürlich sowieso entsprechend maskiert werden sollte.

Beste Grüße
Zodiac

Dieses ist eine vereinfachte Darstellung unseres Foreninhaltes. Um die detaillierte Vollansicht mit Formatierung und Bildern zu betrachten, bitte hier klicken.