Probleme mit Margins

[bossy]

Hallo,

ich muss gerade ein Layout von mir an ein betsehendes CMS anpassen. Dabei kann ich nur auf betsehende Klassen und ID's aufbauen. Bei, Anpassen der Navi bin aich auf ein Problem gestossen.

Ich kann meine Navi in dem System nur mit background-images realisieren. Dabei machen mir margins PRobleme. Wenn ich das Property Display jmit Block Value verwende, treten zwischen den <li> Zwischenräume auf. Diese kann ich offenbar nur mit negativen Margin-Angaben beheben. Wenn ich nun auf margin -5px; gehe zerfällt mir das design in allen Browsern, nur im IE wird es richtig angezeigt. bei margin 0px; funzt es aber in IE garnicht. HAbe schon gegoogelt. Es scheint einen IE margin Bug zu geben, aber alles was ich gesehen habe war nicht so wie mein Problem.

Gleich vorweg: Es hat nichts mir den PAddings zu tun. selbst wenn ich die weg nehme, funzt es nicht.

Hier ist das CSS:

.navigation a.unselected {
  padding: 0px;
  margin: 0px;
  color: #FFFFFF;
  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size : 11px;
  text-align : left;
  text-indent:7px;
 }

.navigation a.unselected:hover {
  padding: 0px;
  margin: 0px;
 color: #FFFFFF;
 font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size : 11px;
 text-align : left;
 text-indent: 7px;
 }

.navigation ul { list-style-type:none; margin: 0px; padding: 0px; margin-left: 100px; }

#PortalNavigationItem {
  margin: 10px 0px -2px 0px;
  padding: 8px;
  padding-top:12px;
  display:block;
  width: 161px;
  min-height:15px;
  background-image:url(img/_menu_content_top_back.gif);
  background-repeat: no-repeat;
}

#PortalNavigationItem:hover {
  margin: 10px 0px -2px 0px;
  padding: 8px;
  padding-top:12px;
  display:block;
  width: 150px;
  height:15px;
  background-image:url(img/_menu_content_top_back_over.gif);
  background-repeat: no-repeat;
}

#HSCamAreaSMAllNavigationItem,
#HPCamAreaAllNavigationItem,
#HImageAreaAllNavigationItem,
#HMovieAreaAllNavigationItem {
  margin: -2px 0px -3px 0px;
  padding: 8px;
  display:block;
  width: 161px;
  max-height:15px;
  background-image:url(img/_menu_content_back.gif);
  background-repeat: no-repeat;

}

#HSCamAreaSMAllNavigationItem:hover,
#HPCamAreaAllNavigationItem:hover,
#HImageAreaAllNavigationItem:hover,
#HMovieAreaAllNavigationItem:hover {
  margin: -2px 0px -2px 0px;
  padding: 8px;
  display:block;
  width: 161px;
  background-image:url(img/_menu_content_back_over.gif);
  background-repeat: no-repeat;
}

#HSCamAreaHQAllNavigationItem {
  margin: -5px;
  margin-left:0px;
  margin-bottom: 10px;
  padding: 8px;
  padding-bottom:22px;
  display: block;
  width: 161px;
  min-height:24px;
  background-image:url(img/_menu_content_bottom_back.gif);
  background-repeat: no-repeat;
}

#HSCamAreaHQAllNavigationItem:hover {
  margin: -5px;
  margin-left:0px;
  margin-bottom: 10px;
  padding: 8px;
  padding-bottom:22px;
  display: block;
  width: 161px;
  background-image:url(img/_menu_content_bottom_back_over.gif);
  background-repeat: no-repeat;
}

[Thomas Luethi]

Hallo,

[...] treten zwischen den <li> Zwischenräume auf. Diese kann ich offenbar nur mit negativen Margin-Angaben beheben. Wenn ich nun auf margin -5px; gehe zerfällt mir das design in allen Browsern, nur im IE wird es richtig angezeigt.

Sowas ist natuerlich Quatsch. Mit den negativen margins sagst Du ja eigentlich,
dass sich die <li> ueberlappen sollen. Kein Wunder, wenn sich anstaendige
Browser dann "komisch" verhalten. Vielleicht tut es auch ein zukuenftiger
MS IE, wer weiss. Sowas kann also nicht die Loesung sein.

Ich habe auch schon festgestellt, dass MS IE bei gewissen Listen ,
z.B. wenn in <li> noch <a> mit display:block vorkommen, der MS IE
(als einziger Browser) unerklaerliche vertikale Abstaende zwischen
den einzelnen <li> macht.

Was dann geholfen hat, war, einen mindestens 1px dicken Rahmen zu machen.
Dieser kann ja auch in der Hintergrundfarbe sein, damit man ihn nicht sieht,
und er muss nur oben und unten vorkommen, evtl. sogar nur unten.
border:0; oder border:0 none; haben jedenfalls nicht funktioniert.

Aus einem meiner Stylesheets habe ich folgendes kopiert:

.navigation li
   { margin:0;
     border:solid #ffffff; border-width:1px 0 1px 0; /* Fuer MS IE inkl. 6 */
     padding:0; }

Vielleicht hilft's Dir...

Gruesse,

Thomas