vertikale Navi mit Grafiken nicht korrekt im IE

drefman

hallo,

ich möchte eine einfache vertikale Navigation, die nur aus Grafiken besteht incl. hover bauen. Das ganze funktioniert im IE leider nicht (IE 6 und 7), da die Grafiken einen nicht gewollten Abstand untereinander aufweisen (nicht im Firefox).
Wer weiss, wie ich dieses Problem löse. Bin leider nicht besonders programmiertechnisch versiert:

Code

* { margin: 0;
padding: 0;
}




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


#wrapper {
    margin:  0;
    text-align: left;
    width: 794px;
}


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


#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 */
  }

Alles anzeigen

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li id="navigation"><a href="aktuelles.html"><img src="images/a_.gif" alt="Aktuelles" /></a></li>
<li id="navigationw"><a href="wir.html"><img src="images/w_.gif" alt="Über uns" /></a></li>
<li id="navigationu"><a href="projekte.html"><img src="images/u_.gif" alt="Unsere Projekte" /></a></li>
<li id="navigationv"><a href="presse.html"><img src="images/v_.gif" alt="Presse" /></a></li>
</ul>
</div>
<div id="content">
<div id="hauptcontent">...</div>
<div id="navcontent">...</div>
</div>
</div>
</body>
</html>

Alles anzeigen

lordwaldi

erstmal könntest du dir einiges an Code sparen wenn deine Listenpunkte nicht alle ne eigene ID hätten. Da du die Grafik sowieso per IMG-Tag einbindest, kannst du dir das schenken und stattdessen nur der Liste selbst <ul> eine ID zuweisen.

In dieser Id hältst um im CSS mal padding: 0; fest, damit sollts eigentlich gehen. Internet Explorer hats ganz besonders nötig mit seinen Innenabständen. Das ist oft das Problem. Er möchts halt ganz genau wissen.

Probiers mal aus und probier vor allem rum, so lernst es am besten.

driver

Zitat von lordwaldi

erstmal könntest du dir einiges an Code sparen wenn deine Listenpunkte nicht alle ne eigene ID hätten. Da du die Grafik sowieso per IMG-Tag einbindest, kannst du dir das schenken und stattdessen nur der Liste selbst <ul> eine ID zuweisen.

und wie will er dann jeden punkt einzeln ansprechen und unterschiedliche
grafiken zuweisen ?

lordwaldi

hö? ich glaub ich blicks grad net

er hat doch die grafiken in der seite selbst, warum also nochmal zusätzlich über css?
naja egal ob ers mit IDs macht oder nicht, ich würd Padding probieren um das eigentliche Problem zu lösen!

driver

Code

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

als beispiel. navigationw hat dann ein w.gif hinterlegt.

@ author

im code kann ich zumindest keinen fehler sehen. du könntest
testweise mal ganz oben eim img { border:0px; } einbinden.

falls dies nicht hilft, dann poste mal nen link oder die ganze seite
als zip gepackt - weil ohne grafiken können wirs nur schlecht
nachvollziehen

lordwaldi

jo das hab ich jetz auch gesehen aber ich versteh dann net warum auch noch als <img> einbinden? dann mach ich die listenpunkte als block und geb die dimensionen an dann spar ich mir das.

drefman

hallo, danke für euren tipps:

ich brauche die li id um den korrekten hover effekt für jede unterschiedliche grafik auszutauschen. leider hat das mit dem padding: o; nichts genutzt. ich habe es jetzt noch viel komplizierter gemacht und eine eigenes ie stylesheet geschrieben. jetzt funktioniert es in IE 6 aber nicht in IE 7:http://www.manfredgottert.de/test/index_neu.html

lordwaldi

dieser IE regt mich so auf das glaubst gar net.
zur not musst halt fürn IE auch nochn extra sheet machen

driver

hm... also bis jetzt scheints so, als ob der ie des display:block nicht will...

lordwaldi

bei mir haut das schon hin, ich weiß jetz nur grad auch net was ich genau immer mach. das letzte horizontale menü das ich mit <li> und display: block; gemacht hab, hat funktioniert.

drefman

wie hast du denn das hingekriecht?

sejuma

Nicht getestet, aber ersetze mal das

Code

#navigation img {
    display:block; width:184px; height:192px; border:0;
  }

durch das:

Code

#nav img {
    display:block; width:184px; height:192px; border:0;
  }

drefman

...leider gibt es hier keine änderung,,,

drefman

Hat denn niemand eine Idee??

Tags