Vertikale Navigation mit Grafiken im IE

[drefman]

Hallo,
ich versuche eine vertikale Navigation mit 4 verschiedenen Grafiken zu erstellen. Das funktioniert auch im Firefox, doch leider setzt der IE 7 Abstände zwischen den Grafiken (der IE 6 zeigt es wiederum richtig an). Hat denn jemand einen Tipp??
siehe hier:
http://www.manfredgottert.de/test/index_neu.html

Code: Alles auswählen

* { margin: 0;
padding: 0;
}


body {
   background: #fff url(images/a.jpg) no-repeat 600px 100px;
}

#wrapper {
   margin:  0;
   text-align: left;
   width: 794px;
}
li {
    display: block;
    border: 0;
    margin: 0;
    padding: 0;
}



p {
   text-align: left;
   color: #000;
   font: 12px/14px "Verdana, Lucida Grande", Lucida, sans-serif;   
}

#nav {
   float: left;
   width:  184px;
}


#content {
   float: right;
   width:  600px;
   background-color: #666;
}

#hauptcontent {
   float: left;
   width:  400px;
   background-color: #6b00cd;
}

#navcontent {
   float: right;
   width:  200px;
   background-color: #00ff97;
}


  #navigation a {
    background: url(images/a.gif) no-repeat;
    display:block; width:184px; /* Linkbereich begrenzen */

  }
  #navigation img {
    display: block; width:184px; height:192px; border:0;
  }
  #navigation a:hover img {
    visibility: hidden;
  }
  #navigation a:hover { /* Workaround fuer IE 5.5 und 6 */
    border:0;
  }
  * html #navigation a {
    margin-right:1px;
  }
  * html #navigation a:hover {
    width:185px; margin-right:0; /* Workaround fuer IE 5.01 */
  }


  #navigationw a {
    background: url(images/w.gif) no-repeat;
    display:block; width:184px; /* Linkbereich begrenzen */
  }
  #navigationw img {
    display: block; width:184px; height:191px; border:0;
  }
  #navigationw a:hover img {
    visibility: hidden;
  }
  #navigationw a:hover { /* Workaround fuer IE 5.5 und 6 */
    border:0;
  }

  * html #navigationw a {
    margin-right:1px;
  }
  * html #navigationw a:hover {
    width:185px; margin-right:0; /* Workaround fuer IE 5.01 */
  }



  #navigationu a {
    background: url(images/u.gif) no-repeat;
    display:block; width:184px;  /* Linkbereich begrenzen */
  }
  #navigationu img {
    display: block; width:184px; height:192px; border:0;
  }
  #navigationu a:hover img {
    visibility: hidden;   
  }
  #navigationu a:hover { /* Workaround fuer IE 5.5 und 6 */
    border:0; 
  }

  * html #navigationu a {
    margin-right:1px;
  }
  * html #navigationu a:hover {
    width:185px; margin-right:0;    /* Workaround fuer IE 5.01 */
  }



  #navigationv a {
    background: url(images/v.gif) no-repeat;
    display: block; width:184px;  /* Linkbereich begrenzen */

  }
  #navigationv img {
    display: block; width:184px; height:195px; border:0;

  }
  #navigationv a:hover img {
    visibility: hidden;

  }
  #navigationv a:hover { /* Workaround fuer IE 5.5 und 6 */
    border:0;

  }

  * html #navigationv a {
    margin-right:1px;

  }
  * html #navigationv a:hover {
    width:185px; margin-right:0; /* Workaround fuer IE 5.01 */

  }



gruss und danke
drefman

[csscook]

Tut mir leid, aber bei mir zeigen alle 3 Browser das gleiche Bild, auch der Opera machts wunschgemäß. Übrigens finde ich diese Menüanordnung richtig witzig, mal was anderes.

[drefman]

... ich habe es geschafft, die abstände beim IE 7 zu minimieren mit:
#navigation, #navigationw, #navigationu, #navigationv { display: inline !important;

danke. es gibt hier nur noch einen andere technik mit hintergrundgrafiken die verschoben werden. dies würde mich mal interessieren.