IE7Verzweifler: Problem mit IE7 und

Beitrag lesen

ich verzweifle gerade an einem problem mit dem ie7 und könnte DRINGEND mal einen
blick eines unbeteiligten gebrauchen - vielleicht bin ich gerade einfach problemblind!

zur aufgabenstellung:

erstellung eines menüs mit einer top ebene und einer subebene.
in der subebene sollen alle links zu sehen sein, zur besseren übersicht thematisch sortiert.

ein toplink kann einen link enthalten oder nicht und er kann eine subebene enthalten oder nicht.

eigentlich ist das menü -recht schlank, übersichtlich und ohne probleme- fertig und auch bereit für den
einsatz.

das menü muß übrigens "nur" auf folgenden browsern laufen:

  • ie 7 und höher
  • alle anderen (firefox, chrome, opera) die eh keinen streß machen

hier ist eine teilansicht meines html menüs:

  
<div id="SITEMENU">  
  <ul>  
    <li><a href="/"><img src="/imgs/btn_sitemenu_start.png" alt=""><span>Startseite</span></a></li>  
	<li><img src="/imgs/btn_sitemenu_auskunft.png" alt=""><span>Auskunftsdienste</span>  
	  <div>  
	    <table><tr>  
		  <td>  
		    <dl>  
			  <dt>Intern</dt>  
			    <dd><a href="#url">Link1</a></dd>  
				<dd><a href="#url">Link2</a></dd>  
			</dl>  
			<dl>  
			  <dt>Extern</dt>  
				<dd><a href="#url">Link3</a></dd>  
				<dd><a href="#url">Link4</a></dd>  
			</dl>  
		  </td>  
		  <td>  
		    <dl>  
			  <dt>Intern</dt>  
			    <dd><a href="#url">Link1</a></dd>  
				<dd><a href="#url">Link2</a></dd>  
			</dl>  
			<dl>  
			  <dt>Extern</dt>  
				<dd><a href="#url">Link3</a></dd>  
				<dd><a href="#url">Link4</a></dd>  
			</dl>  
		  </td>  
		</tr></table>  
  	   </div>  
	</li>  
	<li><a href="/!login!/logout.asp"><img src="/imgs/btn_sitemenu_abmelden.png" alt=""><span>Abmelden</span></a></li>  
  </ul>  
</div>  

dazu gibt es nicht viel spannendes zu sagen: <li>s enthalten ein bild (png, transparent) und eine beschriftung (pro punkt spezifisch)
und die <li>s erhalten zusätzlich per css generische hintergrundbilder, einmal "normal" und einmal bei "hover".

hier sind die bisherigen css anweisungen:

  
#SITEMENU {width:auto; margin:0 auto 0 auto; height:48px; background: url(/imgs/bg_sitemenu.gif) repeat-x; border-top:1px dotted #A8A8A8}  
#SITEMENU ul {margin:-7px 0 0 0; padding:0; list-style: none}  
#SITEMENU ul li {height:50px; margin:4px 0px -5px 0px; padding:0 15px 0 15px; float:left; background: url(/imgs/btn_sitemenu_bg.png) no-repeat center top; font-size:11px; line-height:11px; cursor:pointer}  
#SITEMENU ul li img {width:36px; height:36px}  
#SITEMENU ul li img, ul li span {display:block; margin:0 auto}  
#SITEMENU ul li div {display:none; position:absolute; top:48px; left:0px; margin:0; padding:0; background-color: #DFDFDF; border:1px solid #A8A8A8}  
#SITEMENU ul li, ul li a , ul li span, ul li div a {color:#0F4277; text-decoration:none; font-weight:bold}  
#SITEMENU ul li:hover {position:relative; background: url(/imgs/btn_sitemenu_bg_hover.png) no-repeat center top}  
#SITEMENU ul li:hover span a, ul li:hover span {color:#FE790A; text-decoration:underline}  
#SITEMENU ul li:hover div {display:block; margin:3px 0 0 0; padding:0}  
#SITEMENU ul div a:hover {color:#FE790A; text-decoration:underline}  
#SITEMENU ul dl {width:auto; margin:10px; padding:0; list-style:none; text-align:left; line-height:20px}  
#SITEMENU ul dl dt {font-weight:bold; font-size:13px}  
#SITEMENU ul dl dt, ul dl dd {padding:0; margin:0; color:#000000;}  
#SITEMENU ul dd a {margin:0; padding:0; font-weight:normal; white-space:nowrap; float:none;}  
#SITEMENU ul table td {vertical-align:top}  

eigentlich macht das menü exakt das was ich will und sieht auch wie von mir gewünscht aus.
nur der ie7 zickt mal wieder:

mit der zeile

#SITEMENU ul li img, ul li span {display:block; margin:0 auto}

versuche ich das bild und die beschriftung innerhalb des <li>s zu zentrieren - das klappt in ALLEN (modernen) browsern
unter windows, mac und linux.

nur der ie zerpflückt daraufhin das ganze <ul>: die einzelnen <li>s sind auf einmal so breit wie das ganze ul.
lasse ich "margin:0 auto" weg, sieht alles fast so aus wie gewünscht - nur das bild aus dem li tag ist halt nicht zentriert
und paßt daher nicht mit meinem background image aus dem css zusammen.

ich hab' mittlerweile keinen blassen schimmer mehr und wäre für fremden input mehr als dankbar!

IE8 funtzt übrigens ebenfalls einwandfrei - es gibt aber noch ein hand voll 7er auf denen es auch laufen muß
(bezogen auf meinen einsatzzweck). auf ie 5,6 etc. muß ich -gott sei dank!- keine rücksicht nehmen.