Listenmenu IE / FF .. wo ist der Fehler?

[soyo]

Abend

Ich sitzt gerad an meiner Ausarbeitung und hab das Menu fertig ... IE siehts Klasse aus, FF ehr nicht so. Unten anbei 2 Screenshots, ihr seht glaub ich sofort was ich meine. Hier eben noch das StyleSheet.

body {
        margin:0;
		padding:0;
		overflow:hidden;
      }
#menu,
	  #menu ul {
  	    padding: 0;
  		margin: 0;
  		list-style-type: none;
  		float: left;
  		width: 210px;
  		text-align: right;
	  }
      #navigation {
        background: #EFEFEF;
        float: left;
        height: 100%;
        width: 21f0px;
        border-right: 0.02em dashed #005699;
      }
      #navigation a:active,
      #navigation a:link,
	  #navigation a:visited {
	    background: url('img/menu_bg.gif');
	    display: block;
	    height: 20px;
	    width: 210px;
  		color: #FFF;
  		font: 10pt verdana;
  		text-decoration: none;
  		border-left:0.5em solid #A4C7DD;
  		padding: 2px 5px 2px 15px;
	  }
	  #navigation a:hover {
  		color: #DDD;
  		background: #005699;
  		border-left:0.5em solid #FF9000;
	  }

.
.
.
<div id="navigation">
      <ul id="menu">
        <li><a href="#einleitung">Einleitung</a></li>
        <li><a href="#gefahren">M&ouml;gliche Gefahren</a></li>
        <li><a href="#wirkung">Wirkung auf den Menschen</a></li>
        <li><a href="#schutz">Schutzmaßnahmen</a></li>
        <li><a href="#basisschutz">Basisschutz</a></li>
        <li><a href="#fehlerschutz">Fehlerschutz</a></li>
        <li><a href="#schutz">Schutzmaßnahmen</a></li>
        <li><a href="#schutz">Schutzmaßnahmen</a></li>
        <li><a href="#quellen">Quellen</a></li>
      </ul>
    </div>

 

[Maik]

Hi,

gemäß dem Boxmodell mußt du die horizontalen padding-Angaben und den linken Rahmen der Links von ihrer Breitenangabe subtrahieren, damit ihre Addition die Breite des umschliessenden Listenelements (= 210px) ergibt.

Zudem hat sich im Selektor #navigation bei der Breitenangabe ein "f" eingeschlichen

 

[soyo]

Nu siehts im FF okay aus, aber im IE nicht mehr :suspekt:

war das nicht so, das das der IE ignoriert?

#navigation a:visited {
	    background: url('img/menu_bg.gif');
	    display: block;
	    height: 20px;
	    
  		color: #FFF;
  		font: 10pt verdana;
  		text-decoration: none;
  		border-left: 7px solid #A4C7DD;
  		padding: 2px 5px 2px 15px;
  		width: 214px;
  		voice-family: "\"}\"";
  		voice-family: inherit;  		
  		width: 187px;
	  }

 

[Maik]

Verwendest du evtl. einen Doctype, der den IE6 in den sog. Quirksmodus versetzt, und er deshalb das Boxmodell falsch interpretiert?

Außerdem ist dir da ein Rechenfehler bei der Breitenangabe unterlaufen: 210px - 5px -15px - 7px = 183px, und für den IE müssten es dann 210 und nicht 214px sein.

Oder hast du jetzt die Menü-Breite grundsätzlich um 4px erhöht

 

[soyo]

Oh mein Gott. Danke ... Ich dachte ich hätte ihn gesetzt, aber anscheinend nicht.

#navigation {
  background: #EFEFEF;
  float: left;
  height: 100%;
  width: 214px;
  border-right: 1px dashed #005699;
}

Er Zeigt mir die gestrichelte Linie Rechts vom Blockelement nur bis Ende des Menu an.

Im IE hab ich auch ein Pixel Freiraum zwischen den Links. Im FF bekomm ich das nicht hin, ohne das ich im IE gleich 2 Pixel hab

EDIT: Ja, den doofen Rechenfehler hab ich eben schon gesehn

 

[Maik]

Wenn du die Navigation vom oberen bis zum unteren Fensterrand strecken willst, dann erweiter mal das Stylesheet mit der folgenden Regel:

html,body {
height: 100%;
}

Ich kann da bei mir im IE6 keine Lücke zwischen den Links entdecken

 

[soyo]

Im IE7 ist eine bei mir

 

[Maik]

Ich arbeite unter Win2k, der IE7 ist aber erst ab WinXP verfügbar

Hast du es schon mit margin:0 probiert?

 

[soyo]

Ja habe ich, leider keine Wirkung.

Soll ich mal die komplette Seite hochladen?

 

[Maik]

Hi,

nimm mal die font-Eigenschaft aus dem Selektor #navigation a:active, #navigation a:link, #navigation a:visited heraus und wende die Schriftformatierung stattdessen auf das übergeordnete DIV #navigation an.

Hab es via BrowserPool erfolgreich im IE7 getestet

Und noch ein allgemeiner Tipp: die Pseudoklasse :active wird in der Reihenfolge der einzelnen Pseudoklassen an letzter Stelle, und daher auch in diesem Selektor zuletzt genannt.