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