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;
}