Darstellung einer <div> in IE und Firefox unterschiedlich, width:100% wirkt unterschiedlich Einstellungen

[Sergeant_Pepper]

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>
    <!--#exec cgi="/cgi-bin/anika/menu01.cgi"-->
  </ul>
</div>

Der Beitrag wurde von Sergeant_Pepper bearbeitet: 02.03.2007 - 10:44

[DNS]

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.

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.

Der Beitrag wurde von DNS bearbeitet: 02.03.2007 - 12:18

[Sergeant_Pepper]

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.

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.

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.

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.

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.

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]

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.

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.

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 )

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.

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.

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.