Problem mit IE7 und

[IE7Verzweifler]

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.

[LX]

Bei allem schuldigen Respekt: nicht Du mußt am IE7 verzweifeln, sondern der IE7 verzweifelt zu Recht an Deinem Code. Bitte schreibe zuerst semantisches HTML und CSS und schaue dann, ob Fehler im IE7 noch ein Problem sind.

Hier die gröbsten Sakrilege (auf den ersten, schmerzenden Blick):

• Tabelle UND Definitionslisten für eine verschachtelte Navigations-Liste (ul > li > ul) verwendet,
• GROSS geschriebene IDs werden auch nicht höherwertig, vermindern dafür die Lesbarkeit,
• img-Tags ohne width und height sind nicht valide.

Gruß, LX

[Gunnar Bittersmann]

@@LX:

nuqneH

• img-Tags ohne width und height sind nicht valide.

Unsinn.

Qapla'

[Der Martin]

Hallo,

• img-Tags ohne width und height sind nicht valide.

das ist nicht wahr. Die Angabe von width und height ist aber aus "kosmetischen" Gründen trotzdem eine gute Idee; sie verhindert, dass einzelne Bereiche während des Seitenaufbaus hin- und herspringen, wenn die Bilder allmählich nachgekleckert kommen.

Ciao,
 Martin

[IE7Verzweifler]

wegen solchen leuten wie dir hasse ich mittlerweile foren und versuche wo immer es geht ein posting zu vermeiden...

früher konnte man eine frage stellen und hat eine antwort bekommen.

heute gibt's leute wie dich, die sich daran aufgeilen, jeden kleinen fehler mit gefährlichem halbwissen zu kommentieren und nichts zur lösung beizutragen.

wenn du also keine hilfe anbieten kannst und zusätzlich auch keine ahnung hast, dann spar mir doch bitte meine (für's lesen) und deine (mach was sinnvolleres als so etwas zu posten) zeit.

jedem der helfen kann, wäre ich weiterhin extrem dankbar für die hilfe.

soviel zu deinen ersten blick, von denen kein einziger stuimmt:

• ul li ul - gibt es nicht, da hast du wohl geträumt
• die ids schreibe ich wie ich will - in meinem grossen stylesheet erleichtert mir das die übersicht, ids werden sofort erkannt.
• img: satz mit x, war wohl nix: aussage falsch und außerdem haben alle imgs (im css) eine gößenangabe.

schönes leben noch!

[Cheatah]

Hi,

wegen solchen leuten wie dir hasse ich mittlerweile foren und versuche wo immer es geht ein posting zu vermeiden...

vielleicht solltest Du Dir dann mal darüber Gedanken machen, ob Dein Code solche Antworten nicht absolut rechtfertigt.

heute gibt's leute wie dich, die sich daran aufgeilen, jeden kleinen fehler mit gefährlichem halbwissen zu kommentieren und nichts zur lösung beizutragen.

Schwerwiegende Mängel, die jedes eventuell darüber hinaus existierende Problem überdecken, sind keine "kleinen Fehler". Und LX' "gefährliches Halbwissen" reicht aus, um Bücher zu schreiben, mittels derer Experten ihre Fähigkeiten verbessern.

wenn du also keine hilfe anbieten kannst

Das tat er, Du musst sie lediglich annehmen.

und zusätzlich auch keine ahnung hast,

Aus Deinem Code kann ich absehen, dass Du nicht in der Lage bist, dies zu beurteilen.

jedem der helfen kann, wäre ich weiterhin extrem dankbar für die hilfe.

Aufgrund der Art, wie Du auf Hilfe reagierst, glaube ich nicht, dass hierzu noch besonders viel Motivation besteht.

soviel zu deinen ersten blick, von denen kein einziger stuimmt:

Ein einziger Punkt ist falsch, einer ist Gewöhnungssache (mit der dringenden Empfehlung, Dich umzugewöhnen), und einen hast Du schlichtweg nicht verstanden.

Cheatah

[IE7Verzweifler]

hi,

sorry, aber ich konnte da beim besten willen keine hilfe entdecken.

bei zwei punkten hast du mir recht gegeben und und der dritte -angeblich nicht verstandene- (ul li dl) ist kein auslöser für das problem.
ich versuche mich halt voerst auf diesem weg an die lösung heranzutasten.

selbst wenn ich nur ul li stehen lase, besteht das problem und der beschrieben effekt taucht auf. habe doch auch schon die übeltäter zeile gefunden die im ie7 für stress sorgt und diese benannt.

wenn zu dieser konkreten frage jemand eine idee hätte, wär ich super dankbar.

nicht auf die frage zu reagieren und pauschal alles schlecht zu machen (wie es die sog. experten in foren ja fast nur noch machen) bringt halt keinen weiter.

ferner steht oben, dass für ein posting html grundkenntnisse vorausgesetzt werden und nicht, dass man bereits bücher zu diesen themen verfasst haben muss.

auf richtige hilfe, einen ansatzpunkt hätte ich selbstverständlich nicht so reagiert - lx hat mich aber nur schräg angemacht ohne ansatzweise einen anwendbaren tipp abzugeben.

und nochmals sorry, auch wenn ich keine bücher schreibe, kann ich beurteilen, dass der code bei weitem nicht so extrem schlecht ist wie er gemacht wird!

auch du benennst keine probleme oder fehler sondern beschränkst dich auf "mach's schön und ordentlich". wenn der code so extrem schlecht und fehlerhaft ist und ihr das seht, warum benennt ihr die stellen denn dann nicht?!

[Cheatah]

Hi,

sorry, aber ich konnte da beim besten willen keine hilfe entdecken.

dann solltest Du Deine Einstellung überdenken.

bei zwei punkten hast du mir recht gegeben

Bei einem. Darüber hinaus vergisst Du über die Spiegelstriche die Grundaussage - und die stimmt uneingeschränkt. Die Spiegelstriche sollten sie nur vertiefen.

und und der dritte -angeblich nicht verstandene- (ul li dl) ist kein auslöser für das problem.

Auf einem schlechten Markup kann CSS nicht gut aufsetzen. LX hat Dir für einen groben Schnitzer eine Optimierung vorgeschlagen.

ich versuche mich halt voerst auf diesem weg an die lösung heranzutasten.

Warum löst Du nicht einfach das eigentliche Problem? Es ist nicht sinnvoll, mit Gewalt an etwas Kaputtem festzuhalten und zu versuchen, die daraus entstehenden Folgefehler zusammen zu kehren.

selbst wenn ich nur ul li stehen lase, besteht das problem und der beschrieben effekt taucht auf.

Natürlich, Du hast vermutlich Deine Versuche beibehalten, Deinen Fehler an der falschen Stelle zu korrigieren. Die Floskel "Tabula Rasa" solltest Du Dir über den Monitor kleben.

habe doch auch schon die übeltäter zeile gefunden die im ie7 für stress sorgt und diese benannt.

Du hast die Stelle gefunden, an der Du mit Deinem unsinnigen Code keine Bugfixes mehr findest. Korrigiere erst mal Deinen Code.

wenn zu dieser konkreten frage jemand eine idee hätte, wär ich super dankbar.

Warum? Es hilft Dir nicht weiter. Dein eigentliches Problem wird dadurch nicht verändert.

nicht auf die frage zu reagieren und pauschal alles schlecht zu machen (wie es die sog. experten in foren ja fast nur noch machen) bringt halt keinen weiter.

Auf die Frage zu reagieren und die wirklichen Probleme zu benennen bringt nur die weiter, die Hilfe auch *wollen* und mit der berechtigten Kritik umgehen können.

ferner steht oben, dass für ein posting html grundkenntnisse vorausgesetzt werden und nicht, dass man bereits bücher zu diesen themen verfasst haben muss.

Deswegen werden Dir Deine Fehler ja auch genannt, anstatt sie unter den Tisch zu kehren.

auf richtige hilfe, einen ansatzpunkt hätte ich selbstverständlich nicht so reagiert

Du *hast* auf richtige Hilfe und einen Ansatzpunkt so reagiert.

• lx hat mich aber nur schräg angemacht ohne ansatzweise einen anwendbaren tipp abzugeben.

Du hast fachliche Kritik persönlich genommen. Das klappt *nie*.

und nochmals sorry, auch wenn ich keine bücher schreibe, kann ich beurteilen, dass der code bei weitem nicht so extrem schlecht ist wie er gemacht wird!

Ich bin anderer Ansicht.

auch du benennst keine probleme oder fehler

Doch, es sind lediglich die selben. Ich sehe meine Aufgabe nicht darin, per Copy&Paste anderer Leute Artikel zu wiederholen, noch dazu im selben Thread.

sondern beschränkst dich auf "mach's schön und ordentlich". wenn der code so extrem schlecht und fehlerhaft ist und ihr das seht, warum benennt ihr die stellen denn dann nicht?!

Warum ignorierst Du, dass dies geschehen ist?

Cheatah

[LX]

Hallo!

sorry, aber ich konnte da beim besten willen keine hilfe entdecken.

Was nicht heißen muss, dass ich Dir keine gegeben hätte. Offenbar war das jedoch zu subtil, um tatsächlich von Nutzen zu sein.

Da Du den Punkt mit der semantischen Struktur offenbar immer noch nicht verstanden hast: das Markup sollte das nachbilden, was der Inhalt darstellt - und Dein Menü hat vom Inhalt her folgende Struktur:

<div id="menu">  
  <ul>  
     <li>Startseite</li>  
     <li>Auskunftsdienste  
        <ul>  
           <li>Intern  
               <ul>  
                  <li>Erster Link</li>  
                  <li>Zweiter Link</li>  
               </ul>  
           </li>  
        </ul>  
...

Wenn Du diesen Code in allen Browsern gleich formatieren willst, musst Du zunächst margin und padding normalisieren, d.h. die Angaben des Browsers überschreiben (ggf. noch #menu ul { list-style:none; } dazu, um störende Bullets auszublenden). Wenn Du mit diesen Informationen immer noch nicht in der Lage bist, Dein Markup semantisch zu gestalten und mit CSS vernünftig zu formatieren, kann ich Dir tatsächlich nicht helfen.

Nebenbei: Ich entschuldige mich für meinen Irrtum, dass bei img-Tags height und width verpflichtend sind, denn das trifft lediglich auf das alt-Attribut zu.

ferner steht oben, dass für ein posting html grundkenntnisse vorausgesetzt werden und nicht, dass man bereits bücher zu diesen themen verfasst haben muss.

Muss man nicht.

auf richtige hilfe, einen ansatzpunkt hätte ich selbstverständlich nicht so reagiert - lx hat mich aber nur schräg angemacht ohne ansatzweise einen anwendbaren tipp abzugeben.

Ich habe Dich nicht schräg angemacht, sondern Dir aufgezeigt, wo Deine Schwächen liegen und Dir Hinweise darauf gegeben, an welcher Stelle Du den Code noch deutlich überarbeiten musst.

und nochmals sorry, auch wenn ich keine bücher schreibe, kann ich beurteilen, dass der code bei weitem nicht so extrem schlecht ist wie er gemacht wird!

Ich mache den Code nicht schlecht. Das hast Du bereits getan, als Du ihn geschrieben hast.

auch du benennst keine probleme oder fehler sondern beschränkst dich auf "mach's schön und ordentlich". wenn der code so extrem schlecht und fehlerhaft ist und ihr das seht, warum benennt ihr die stellen denn dann nicht?!

Genau das haben wir getan. Bitte gib Dir wenigstens ein wenig Mühe, uns zu verstehen.

Gruß, LX

[apsel]

Om nah hoo pez nyeetz, LX!

Nebenbei: Ich entschuldige mich für meinen Irrtum, dass bei img-Tags height und width verpflichtend sind

und dennoch eine gute Idee, sie zu verwenden [Martin]
Matthias

[IE7Verzweifler]

Hallo!

sorry, aber ich konnte da beim besten willen keine hilfe entdecken.
Was nicht heißen muss, dass ich Dir keine gegeben hätte. Offenbar war »»das jedoch zu subtil, um tatsächlich von Nutzen zu sein.

das war "früher" auch einmal anders: warum muß heute immer alles subtil, ironisch oder sonst etwas sein?!

Da Du den Punkt mit der semantischen Struktur offenbar immer noch nicht verstanden hast: das Markup sollte das nachbilden, was der Inhalt darstellt - und Dein Menü hat vom Inhalt her folgende Struktur:

<div id="menu">

<ul>
     <li>Startseite</li>
     <li>Auskunftsdienste
        <ul>
           <li>Intern
               <ul>
                  <li>Erster Link</li>
                  <li>Zweiter Link</li>
               </ul>
           </li>
        </ul>
...

>   
  
ja, hab' ich weiterhin verstanden...  
  

> Wenn Du diesen Code in allen Browsern gleich formatieren willst, musst Du zunächst margin und padding normalisieren, d.h. die Angaben des Browsers überschreiben (ggf. noch #menu ul { list-style:none; } dazu, um störende Bullets auszublenden). Wenn Du mit diesen Informationen immer noch nicht in der Lage bist, Dein Markup semantisch zu gestalten und mit CSS vernünftig zu formatieren, kann ich Dir tatsächlich nicht helfen.  
>   
  
äh, sorry, aber anweisungen dafür gibt es doch bereits?!  
  

> Nebenbei: Ich entschuldige mich für meinen Irrtum, dass bei img-Tags height und width verpflichtend sind, denn das trifft lediglich auf das alt-Attribut zu.  
>   
  
weil das der einzige punkt war der von firebug angemeckert wurde, habe ich sie erst einmal leer eingefügt um ein grünes lichtlein zu sehen.  
  
  

> Genau das haben wir getan. Bitte gib Dir wenigstens ein wenig Mühe, uns zu verstehen.  
>   
> Gruß, LX  
  
dann bin ich wohl zu blöd und hab weder euch noch das problem verstanden.  
tabula rasa habe ich bereits probiert:  
  
  
~~~html
  
<div id="SITEMENU">  
   <ul>  
     <li><img src="/imgs/btn_sitemenu_start.png" alt=""></li>  
     <li><img src="/imgs/btn_sitemenu_auskunft.png" alt=""></li>  
     <li><img src="/imgs/btn_sitemenu_abmelden.png" alt=""></li>  
   </ul>  
</div>  

  
#SITEMENU {width:auto; height:auto; margin:0 auto; background: url(/imgs/bg_sitemenu.gif) repeat-x; border-top:1px dotted #A8A8A8}  
#SITEMENU ul {height:50px; margin:0; padding:0; list-style: none}  
#SITEMENU li {margin:0; padding:0; float:left}  
#SITEMENU img {display:block}  

ändere ich nun die anweisung #SITEMENU img {display:block} in #SITEMENU img {display:block, margin:0 auto}, dann zerfratzt es mir im ie7 meine liste - alle elemente werden in der ul übereinander gelegt - nur im ie. firebug und andere css checker liefern keinen hinweis da alles grün ist.

daher hier nun meine konkrete frage: was genau ist denn mein fehler oder vergesse ich nur angaben die der ie7 haben muß um alles "richtig" zu machen?!

sprich: liegt es an mir und wenn ja, an welchem konkreten fehler (da wäre ich doch für input wirklich total dankbar!) oder muß ich beim ie7 in diesem speziellen fall auf etwas rücksicht nehmen und noch andere angaben machen, die andere browser nicht zwingend benötigen.

oder noch anders: was genau ist denn an dem abschnitt, falsch und/oder schlecht gemacht? ich WILL doch input bekommen um das zu lernen.

[apsel]

Om nah hoo pez nyeetz, IE7Verzweifler!

<div id="SITEMENU">
   <ul>
     <li><img src="/imgs/btn_sitemenu_start.png" alt=""></li>
     <li><img src="/imgs/btn_sitemenu_auskunft.png" alt=""></li>
     <li><img src="/imgs/btn_sitemenu_abmelden.png" alt=""></li>
   </ul>
</div>

>   
> ~~~css
  

> #SITEMENU {width:auto; height:auto; margin:0 auto; background: url(/imgs/bg_sitemenu.gif) repeat-x; border-top:1px dotted #A8A8A8}  
> #SITEMENU ul {height:50px; margin:0; padding:0; list-style: none}  
> #SITEMENU li {margin:0; padding:0; float:left}  
> #SITEMENU img {display:block}  
> 

ändere ich nun die anweisung #SITEMENU img {display:block} in #SITEMENU img {display:block, margin:0 auto}

Eine andere Herangehensweise wäre, anstelle der Bilder Hintergrundgrafiken für die Links zu verwenden. So hast du ein Element weniger, um das du dich kümmern musst. Ob das für dich möglich und sinnvoll ist oder scheint,weiß ich nicht.

Matthias

[IE7Verzweifler]

Eine andere Herangehensweise wäre, anstelle der Bilder Hintergrundgrafiken für die Links zu verwenden. So hast du ein Element weniger, um das du dich kümmern musst. Ob das für dich möglich und sinnvoll ist oder scheint,weiß ich nicht.

Matthias

hi matthias,

danke für deine antwort.

die idee ist folgende: es soll ein runder button erscheinen der einen kleinen schatten sowie einen blaunen hintergrund hat (png grfik, teile davon transparent. für jeden menüpunkt soll es ein eigenes icon geben. diese verändert sich beim hovern wie folgt: schatten wird kräftiger, hintergrund wird orange. somit bräuchte ich theoretisch für jeden menüpunkt 2 grafiken (normal/hover), bei vermutlich 7 menüpunkten wären das 14 grafiken und wesentlich mehr anweisungen im stylesheet bzw. in der html seite (was ich vermeiden wollte).

deshalb habe ich die grafik getrennt: es gibt eine png für den normalzustand, eine für den hoverzustand (die sind fix für jedes li element und kommen i das stylesheet als background) und zusätzlich in dem li element nur noch die einzelne vordergrund png grafik um das symbol auf den jeweiligen punkt zu personalisieren.

denke, dass ist der beste ansatz. hat ja eigentlich auch alles geklappt.

das spezielle problem was ich mit dem ie habe, zeigt sich jedoch schon wirklich bei den paar wenigen zeilen oben - DA bleibe ich hängen und bin vielleicht durchaus zu doof meinen fehler zu sehen, keine frage!

[apsel]

Om nah hoo pez nyeetz, IE7Verzweifler!

die idee ist folgende: es soll ein runder button erscheinen der einen kleinen schatten sowie einen blaunen hintergrund hat (png grfik, teile davon transparent. für jeden menüpunkt soll es ein eigenes icon geben. diese verändert sich beim hovern wie folgt: schatten wird kräftiger, hintergrund wird orange. somit bräuchte ich theoretisch für jeden menüpunkt 2 grafiken (normal/hover), bei vermutlich 7 menüpunkten wären das 14 grafiken und wesentlich mehr anweisungen im stylesheet bzw. in der html seite (was ich vermeiden wollte).

Man kann die Grafik einfach verschieben, schau dir mal an, wie ich es bei den Verweisen in diesem Artikel gemacht habe. Ein Tutorial dazu ist in Arbeit.

Untersuche das Element mit Firebug und schau dir dass CSS dazu an.

Matthias

[IE7Verzweifler]

Man kann die Grafik einfach verschieben, schau dir mal an, wie ich es bei den Verweisen in diesem Artikel gemacht habe. Ein Tutorial dazu ist in Arbeit.

Untersuche das Element mit Firebug und schau dir dass CSS dazu an.

Matthias

besten dank, das ist auch ein interessanter ansatz für das ein oder andere problem. werde noch einmal auf der grünen wiese anfangen...

[LX]

Hallo!

ändere ich nun die anweisung #SITEMENU img {display:block} in #SITEMENU img {display:block, margin:0 auto}, dann zerfratzt es mir im ie7 meine liste - alle elemente werden in der ul übereinander gelegt - nur im ie. firebug und andere css checker liefern keinen hinweis da alles grün ist.

margin: 0 auto = zentriere anhand des nächsten relativen Block-Elements, aber nur horizontal. Beim IE ist das ul aber kein normales Block-Element, da hasLayout fehlt. Versuche bitte einmal, dem ul respektive den einzelnen li-Tags im CSS display:block, position: relative sowie zoom: 1 (Fix für hasLayout) zu geben. Zu hasLayout findet sich noch mehr interessante Info unter http://www.satzansatz.de/cssd/onhavinglayout.html.

Im IE liegen solche Probleme tatsächlich relativ selten an einem Fehler des Nutzers. Allerdings heißt das nicht, dass dieser nicht trotzdem welche gemacht haben kann. Semantischer, valider Code ist zumindest eine gute Möglichkeit, die Chancen dafür zu minimieren - daher wird Dir hier auf dem Forum auch sehr häufig dazu geraten werden.

Gruß, LX

[IE7Verzweifler]

margin: 0 auto = zentriere anhand des nächsten relativen Block-Elements, aber nur horizontal. Beim IE ist das ul aber kein normales Block-Element, da hasLayout fehlt. Versuche bitte einmal, dem ul respektive den einzelnen li-Tags im CSS display:block, position: relative sowie zoom: 1 (Fix für hasLayout) zu geben. Zu hasLayout findet sich noch mehr interessante Info unter http://www.satzansatz.de/cssd/onhavinglayout.html.

danke für die idee und den link (habe ich bisher noch nicht gelesen, werde es aber sorgfältig durchghehen).

zoom:1 (kannte ich bisher nicht, danke!), bewirkt beim ul und/oder li gar nichts im layout.

ich mache jetzt einmal folgendes, hier noch einmal das html fragment:

  
<div id="SITEMENU">  
  <ul>  
    <li><img src="/imgs/btn_sitemenu_start.png" alt=""></li>  
    <li><img src="/imgs/btn_sitemenu_auskunft.png" alt=""><span>Auskunftsdienste</span></li>  
    <li><img src="/imgs/btn_sitemenu_abmelden.png" alt=""></li>  
  </ul>  
</div>  

so sieht es in allen brwosern wie gewünscht aus:

  
#SITEMENU {width:auto; height:auto; margin:0 auto; background: url(/imgs/bg_sitemenu.gif) repeat-x; border-top:1px dotted #A8A8A8}  
#SITEMENU ul {display:block; height:60px; list-style:none; margin:0; padding:0}  
#SITEMENU li {border:1px solid #FF0000; display:block; float:left; margin:0 0 0 15px; padding:0}  
#SITEMENU img {border:1px solid #00FF00; display:block; height:36px; height:36px; margin:0 auto;  padding:0}  
#SITEMENU span {border:1px solid #0000FF; display:block; padding:0; margin:0}  

screenshot firefox:

screenshot ie für diesen code:

nun habe ich in obigem css code nur das "auto" von "margin: 0 auto" weggenommen und erhalte im ie folgendes bild (ff hier nicht aufgeführt da bild nur nicht zentriert, rest wie vorher auch):

nun habe ich den code wieder gändert - "margin: 0 auto" steht wieder da und zusätzlich habe ich deine tipps angewandt, und zwar in folgenden varianten: nur auf li, nur auf ul und sowohl auf ul und li. zoom:1 hatte übrigens überhaupt keinen einfluss, der rest der anezige ändert sich wie folgt:

dankie für den bisherigen input - bin weiterhin mit meinem latein am ende oder völlig deppert um den baum vor lauter wald nicht zu sehen...

[LX]

Das margin: 0 auto; reagiert im IE leider etwas besch...eiden. Versuche mal folgendes CSS:

#SITEMENU  {width:auto; height:auto; margin:0 auto;  background: url(/imgs/bg_sitemenu.gif)  repeat-x; border-top:1px dotted #A8A8A8}  
#SITEMENU ul {height:60px; list-style:none; margin:0; padding:0; position: relative;}  
#SITEMENU li {border:1px solid #FF0000; float:left; margin:0 0 0 15px; padding:0; text-align: center; }  
#SITEMENU img {border:1px solid #00FF00; display: block; height:36px; height:36px; padding:0;}  
#SITEMENU span {border:1px solid #0000FF; display: block; padding:0; margin:0; width: 1%; overflow: visible; }

Gruß, LX

[IE7Verzweifler]

Das margin: 0 auto; reagiert im IE leider etwas besch...eiden. Versuche mal folgendes CSS:

#SITEMENU  {width:auto; height:auto; margin:0 auto;  background: url(/imgs/bg_sitemenu.gif)  repeat-x; border-top:1px dotted #A8A8A8}

#SITEMENU ul {height:60px; list-style:none; margin:0; padding:0; position: relative;}
#SITEMENU li {border:1px solid #FF0000; float:left; margin:0 0 0 15px; padding:0; text-align: center; }
#SITEMENU img {border:1px solid #00FF00; display: block; height:36px; height:36px; padding:0;}
#SITEMENU span {border:1px solid #0000FF; display: block; padding:0; margin:0; width: 1%; overflow: visible; }

>   
> Gruß, LX  
  
nochmals danke für deine antwort!  
dieser "trick" klappt auf jeden fall im ie - ausgelöst durch text-align:center.  
allen anderen browsern ist das nur egal, deshalb ist das image dort nicht zentriert (wie erwartet).  
  
wenn ich jetzt wieder "margin: 0 auto" ins spiel bringe, zerreißt es wieder alles.  
  
trotzdem habe ich -auch dank' deiner hilfe- jetzt wohl eine lösung, auf die ich gerade nur durch zufall gekommen bin:  
  
1) "text-align:center" für das li bleibt stehen (für den ie)  
2) "width: 1%; overflow: visible;" ist irrelevant und kann gelöscht werden  
3) "margin:0 auto" für das img wird eingefügt, daraufhin ist die optik im ie im a\*\*\*imer  
4) ABER: nun "display:block" für das img löschen oder ändern in "display:inline-block" und nun - man glaubt es kaum - es passt in allen browsern!  
  
folgender code funktioniert jetzt also:  
  
~~~css
  
#SITEMENU  {width:auto; height:auto; margin:0 auto;  background: url(/imgs/bg_sitemenu.gif)  repeat-x; border-top:1px dotted #A8A8A8}  
#SITEMENU ul {height:60px; list-style:none; margin:0; padding:0; position:relative}  
#SITEMENU li {border:1px solid #FF0000; float:left; margin:0 0 0 15px; padding:0; text-align:center}  
#SITEMENU img {border:1px solid #00FF00; height:36px; height:36px; padding:0; margin:0 auto}  
#SITEMENU span {border:1px solid #0000FF; display: block; padding:0; margin:0;}  

das war definitiv die schwertse css geburt meines lebens!
vielen, vielen dank an ALLE beteiligten für links und input...

[IE7Verzweifler]

1. "text-align:center" für das li bleibt stehen (für den ie)
2. "width: 1%; overflow: visible;" ist irrelevant und kann gelöscht werden
3. "margin:0 auto" für das img wird eingefügt, daraufhin ist die optik im ie im a***imer
4. ABER: nun "display:block" für das img löschen oder ändern in "display:inline-block" und nun - man glaubt es kaum - es passt in allen browsern!

im endeffekt liegt es nur an display:block - "text-align:center" funtzt natürlich auch in anderen browsern, das war unglücklich ausgedrückt!

in allen browsern (außer ie) funtzt also "display:block" UND "margin:0 auto" für das img.

für den ie7 darf display nicht block sein.
das mußte für die anderen browser aber sein um mit "margin: 0 auto" zu zentrieren.

end vom lied: kein display:block für das image, text-align:center aufs li und es klappt in allen (bei mir) beteiligten browsern!

[LX]

Wäre das nicht der Fall gewesen, hätte ich Dir zur Verwendung sogenannter CSS Hacks geraten:

* html selektor { diese Definitionen finden nur im IE6 Anwendung }  
*+html selektor { diese Definitionen finden nur im IE7 Anwendung }

Diese sogenannten CSS-Hacks bedienen sich Fehlern im IE bei der Auswertung von CSS. Vor dem HTML-Element ist CSS-Seitig im DOM nichts, daher sollte * html auch eine leere Selektion zurückliefern - nur der IE6 schert sich nicht darum. Der IE7 behebt diesen Fehler, indem er das imaginäre Tag auf eine Ebene neben das HTML-Element schiebt, was zwar immer noch falsch ist, aber da er den Sibling-Selektor (+) kennt, den obenstehenden CSS-Hack ermöglicht.

Falls Du auf ein Problem stoßen solltest, bei dem Du Browserübergreifend nicht weiter kommst, kannst Du diese Hacks durchaus verwenden.

Gruß, LX

[suit]

*+html selektor { diese Definitionen finden nur im IE7 Anwendung }[/code]

Hast du das schon schon mal in Opera 9.24 probiert?

[Gunnar Bittersmann]

@@suit:

nuqneH

*+html selektor { diese Definitionen finden nur im IE7 Anwendung }[/code]

Hast du das schon schon mal in Opera 9.24 probiert?

Welche Relevanz hat der heutzutage noch? Von Opera-Nutzern würde ich doch erwarten, dass sie ihren Browser auf dem aktuellen Stand haben.

Aber wenn’s denn sein muss: *:first-child+html selektor {}

Qapla'

[suit]

Welche Relevanz hat der heutzutage noch?

Ich hab hier eine etwas größere Seite im Gastronomiebereich, da ist der Opera 9.24-Anteil noch bei 0.25 %.

Von Opera-Nutzern würde ich doch erwarten, dass sie ihren Browser auf dem aktuellen Stand haben.

Das hätte ich auch erwartet.

Aber wenn’s denn sein muss: *:first-child+html selektor {}

Darauf wollte ich hinaus, wenns denn schon ein Hack sein muss, dann bitte ein "sicherer" - es ja nicht so, dass es sich nicht vermeiden lässt, den falschen Browser zu triggern.

[LX]

*+html selektor { diese Definitionen finden nur im IE7 Anwendung }[/code]
Hast du das schon schon mal in Opera 9.24 probiert?

Um ganz ehrlich zu sein: nein, habe ich nicht. Allerdings baut der Opera die Fehler vom IE teilweise so gut nach, dass mich das überhaupt nicht wundert.

Gruß, LX

[suit]

Um ganz ehrlich zu sein: nein, habe ich nicht. Allerdings baut der Opera die Fehler vom IE teilweise so gut nach, dass mich das überhaupt nicht wundert.

Kannst du diese Aussage auch irgendwie belegen?

[LX]

Um ganz ehrlich zu sein: nein, habe ich nicht. Allerdings baut der Opera die Fehler vom IE teilweise so gut nach, dass mich das überhaupt nicht wundert.
Kannst du diese Aussage auch irgendwie belegen?

Ich sage nur: document.all :-)

Gruß, LX

[suit]

Kannst du diese Aussage auch irgendwie belegen?
Ich sage nur: document.all :-)

Was hat das jetzt mit CSS zu tun? ;p

[IE7Verzweifler]

Wäre das nicht der Fall gewesen, hätte ich Dir zur Verwendung sogenannter CSS Hacks geraten:

das wollte ich auf jeden fall vermeiden um nicht zuviel müll zu produzieren der nur für den ie zu gebrauchen ist.

da ja -für meinen einsatzweck!- vorerst davon auszugehen ist, dass man solche dinge -bezogen auf meine seite- im ie7 und im ie8 und folgeversionen vermutlich nicht mehr benötigt, wollte ich mich, bzw. den code erst gar nicht damit belasten.

benchmark ist und bleibt für mich der firefox - wenn da alles aussieht wie gewünscht (möglichst wenig spielchen), dann knöpfe ich mir den 7er vor.

damit bin ich bisher sehr gut gefahren und ein eigentlich kleines problemchen wie das gepostete mit solchen auswirkungen ist mir da bisher auch noch nicht untergekommen. verfahre möglichst immer nach dem kiss prinzip...

wichtig ist für mich zuallerst immer das im firefox und seinen addons alles grün ist: das sollte dafür sorgen, das der code einigermaßen zukunftssicher ist (so sehr das irgend etwas in der IT überhaupt sein kann ;-))

-----

damit ich heute aber nicht nur einen fehler abhaken kann sondern auch noch etwas lerne, hier noch einmal ein kurzer exkurs zu den anfängen des postings:

ist folgender aufbau prinzipiell "dreckig", unbedingt zu vermeiden oder worauf wolltest am anfand mit dem ul li ul.... hinweis hinaus. falls ja, was wäre als denkanstoß der sauberste ansatz?

zum grundsätzlichen aufbau in der vorliegende form bin ich übrigens aufgrund eines stu nicholls artikels gekommen.

fokus war halt wirklich nur noch eine sub ebene zu haben, dort aber dann zwangsläufig -je nach kategorie- teils viele links möglichst übersichtlich zu präsentieren.

vom prinzip her wollte ich halt das von mir als angenehm empfundene menü von cortalconsors.de in wesentlich kleinerer und schlankerer version ohne viele images und javascript zum vorbild nehmen.

herausgekommen ist dann halt folgende struktur:

  
<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>  
          </td>  
          <td>  
            <dl>  
              <dt>Extern</dt>  
              <dd><a href="#url">Link1</a></dd>  
              <dd><a href="#url">Link2</a></dd>  
            </dl>  
          </td>  
        </tr></table>  
      </div>  
    </li>  
    <li><a href="/"><img src="/imgs/btn_sitemenu_abmelden.png" alt=""><span>Abmelden</span></a></li>  
  </ul>  
</div>  

[LX]

das wollte ich auf jeden fall vermeiden um nicht zuviel müll zu produzieren der nur für den ie zu gebrauchen ist.

Machst Du nicht: mit CSS Hacks kannst Du bewirken, dass bestimmter Code NUR vom IE berücksichtigt und vor allen anderen Browsern verborgen wird. Der gleiche Code funktioniert in allen Browsern, fragwürdige Fehlerkorrekturen betreffen jedoch nur den IE.

damit ich heute aber nicht nur einen fehler abhaken kann sondern auch noch etwas lerne(...): ist folgender aufbau prinzipiell "dreckig", unbedingt zu vermeiden oder worauf wolltest am anfand mit dem ul li ul.... hinweis hinaus. falls ja, was wäre als denkanstoß der sauberste ansatz?

Wie ich bereits geschrieben habe: semantisches Markup sollte die inhaltliche Struktur wiederspiegeln. Tabellen (table) sind für tabellarische Daten, d.h. solche Daten, die in einer mehrdimensionalen Relation stehen, Listen je nachdem, ob die Relation ihrer Einträge zueinander eine Reihe bildet oder nicht, numerische oder unnumerische Listen (ul/ol), einzelne Definitionen passen in dfn, während mehrere Definitonen oder FAQ in ein dl-Tag gehören. Textabschnitte kann man mit p-Tags markieren, Unterabschnitte mit span, Überschriften mit h1-h6. Wenn man die logische Zusammengehörigkeit mehrerer Elemente im Markup wiederspiegeln will, steckt man sie in ein div.

zum grundsätzlichen aufbau in der vorliegende form bin ich übrigens aufgrund eines stu nicholls artikels gekommen.

Du hast bei der Navigation eine verschachtelte Liste von Links ohne feste Reihenfolge, was semantisch einzig und allein als verschachtelte ul li-Struktur darstellbar ist. Ich vermute übrigens, dass Stu Nicholls sein Markup so aufgebaut hat, um sich die Mühe zu sparen, das CSS sauber anzupassen. Das ist definitiv der falsche Weg und wird auf diesem Forum immer Kommentare wie den meinen provozieren.

fokus war halt wirklich nur noch eine sub ebene zu haben, dort aber dann zwangsläufig -je nach kategorie- teils viele links möglichst übersichtlich zu präsentieren.

Auch hier gilt: Semantik - Präsentation gehört ins CSS, Inhalte und Struktur ins HTML.

Gruß, LX