Falsche Darstellung im IE7

[maggie]

Hallo, eine Navigationsleiste (Liste) wird im IE 7 anders dargestellt (siehe Bild re.)
Wie auf dem Bild links sieht es mit diesen padding css Angaben z. B. im IE 6, Opera und Firefox aus.

.moduletable-haupt li a {  
   color: #000000;  
   padding: 2px 8px 5px 10px;  
   border-right:solid 1px #FFFFFF;  
   text-decoration: none;  
   }

Wie kann ich den IE7 auch zu der Anzeige wie Bild links bewegen?
Danke für Eure Tipps
Gruß
Maggie

[Cyx23]

Hallo Maggie,

Wie auf dem Bild links sieht es mit diesen padding css Angaben z. B. im IE 6, Opera und Firefox aus.

Wenn Du Dir sicher bist, dass es sich um eine Art padding-bug des IE 7 handelt,
kannst Du ja mal gezielt danach googeln, so etwas sollte schonmal irgendwo
dokumentiert worden sein.

Ansonsten scheint mir der gepostete Code erstmal etwas wenig, um zu einem
sicheren Tipp zu kommen, bleiben noch Spekulationen wie doctype, line-height,
grundsätzliche Eigenschaften wie margin, padding, height aller beteiligten
Elemente, und die Erfahrung, dass manchmal ein zusätzliches floaten bei IEs
und Listen hilfreich sein kann.

Grüsse

Cyx23

[maggie]

Hallo Cyx23,
ich bin mir überhaupt nicht sicher, ob mein Versuch diese Navileiste darzustellen, so richtig ist.

#menue_navigation {  
   background-color: transparent;  
   background-image: url(../images/hg_m_haupt1.png);  
   background-repeat:repeat-x;  
   background-position: 0%;  
   height: 20px;  
   border-bottom: solid 1px #CCCCCC;  
   border-left: solid 1px #CCCCCC;  
   width :506px;  
   text-align : left;  
   float: left;  
   }  
   .moduletable-haupt h3 {  
   font-size:1em;  
   font-weight: bold;  
   color: #000000;  
   }  
   .moduletable-haupt ul li {  
   height: 20px;  
   display: inline;  
   }  
   .moduletable-haupt li a {  
   color: #000000;  
   padding: 2px 8px 5px 10px;  
   border-right:solid 1px #FFFFFF;  
   text-decoration: none;  
   }  
   .moduletable-haupt a:hover {  
   background-color: transparent;  
   background-image: url(../images/hg_m_haupt2.png);  
   height:20px;  
   background-repeat: repeat-x;  
   background-position: 0%;  
   color:#FFFFFF;  
   text-decoration: none;  
   }  
   .moduletable-haupt li.active {  
   background-color: transparent;  
   background-image: url(images/hg_m_haupt2.png);  
   background-repeat: repeat-x;  
   background-position: 0%;  
   color:#FFFFFF;  
   text-decoration: none;  
   }

Eigentlich wollte ich durch die Hintergrundbilder (height: 20px; width: 1px) erreichen, dass die Darstellung überall gleich ist, aber das ist doch nicht machbar.
Gruß, Maggie