• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Im FF einwandfrei, in IEs verschoben

F

faststart

New member
Hallo,
im Firefox passt alles untereinander ohne Verschiebungen, in allen IE Versionen ist das Ganze jedoch vollständig verschoben. Ein spezieller Stylesheet nur für den IE scheint nicht richtig zu funktionieren.
Wo liegt das Problem?

Mein Code sieht aktuell so aus:

PHP: 
<!–[if IE]>
<style type="text/css">
@import url(ie.css);
</style>
<![endif]–>

<style type="text/css">
@import url(ff.css);
</style>

<div align="center" style="margin-top:1px">

<ul class="buerobedarf">

<li id="foldheader" align="left"><img src='images/buerobedarf.jpg' style='border:0px;' align="left" /></li>

<ul id="foldinglist" style="display:none">

<li class="buerobedarf2">

<div style="margin-top: 1px; margin-bottom: 1px; "><img src="http://forum.jswelt.de/images/buerobedarf-schnellzugriff.jpg" border="0" usemap="#Map" width=580 height=649>

<map name="Map" id="Map">
<area shape="rect" coords="146,23,287,143" href="eshop.php?action=catalog_list&s_group_1=Bürobedarf&s_group2=Bewirtung und Catering" target="_self" alt="Bewirtung und Catering" /> <area shape="rect" coords="0,23,141,143" href="eshop.php?action=catalog_list&s_group_1=F&R Eigenmarke" target="_self" alt="F&R Eigenmarke" />
</map>

</div>

</li>

</ul>

</ul>

<li id="foldheader" class="elektronik"><img src='images/elektronik.jpg' style='border:0px; margin-top:15px' /></li>

<ul id="foldinglist" style="display:none">

<li class="elektronik2">

<div style="margin-top: 1px; margin-bottom: 1px"><img src="http://forum.jswelt.de/images/schnellzugriff2.jpg" border="0" usemap="#Map2" width=580px height=522px>

<map name="Map2" id="Map2">
<area shape="rect" coords="0,23,141,143" href="eshop.php?action=catalog_list&s_group1=Drucker / Plotter / Kopierer&s_group2=Laserdrucker&s_group3=Laserdrucker monochrom" target="_self" alt="Laserdrucker" />
</map>

</div>

</li>

</ul>


Die Styles:

ie.css:

HTML: 
<!--
#foldheader{cursor:pointer;cursor:hand ; font-weight:bold ; list-style-type:none; }
#foldinglist {list-style-type:none;}
.buerobedarf { margin-left: -100px; }
.buerobedarf2 {margin-left: 0px; margin-top:15px;}
.elektronik {margin-left: -15px}
.elektronik2 {margin-left: -120px; margin-top: -4px}
//-->


ff.css:

HTML: 
<!--
#foldheader{cursor:pointer;cursor:hand ; font-weight:bold ; list-style-type:none; }
#foldinglist {list-style-type:none;}
.buerobedarf { margin-left: -38px}
.buerobedarf2 {margin-left: -43px}
.elektronik {margin-left: -1px}
.elektronik2 {margin-left: -41px; margin-top: -15px}
//-->


Vielen Dank schon einmal für Hilfe!

MfG,
faststart
 
Zuletzt bearbeitet von einem Moderator:
Sorry, aber Dein HTML-Quelltext ist unter aller Sau!
Eine Logik bei Deiner Verschachtelung ist nicht erkennbar.
Wie soll ein Browser damit umgehen?
 
Hallo,
vielen Dank für die Infos!

Ich habe vergessen zu erwähnen, dass das Ganze mit einem JavaSCript kombiniert ist, so dass bei Klick auf die Buttons jeweils der Bereich darunter aufgeht und wieder schließt.
Ich habe die Formatierung einfach aus dem Beispielskript übernommen. Was wollte ich denn anders machen, damit das Ganze gut ausschaut aber auch noch funktioniert?

hier der js:

HTML: 
<!--

var head="display:''"
img1=new Image()
img1.src="images/elektronik.jpg"
img2=new Image()
img2.src="images/buerobedarf.jpg"

var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentElement
}

if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url()"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url(a)"
}
}
}

if (ie4||ns6)
document.onclick=checkcontained

//-->
 
Wie Du auf der Beispielseite siehst, ist das Menü schon recht alt.

Hast Du mal ne Seite online, damit wir einfach mal den Unterschied im FF und IE sehen können?

Eventuell willst Du Dir ja auch mal ein paar andere Menüs ansehen, die vielleicht auch in Frage kommen.
Hier eines, das auch JavaScript erfordert, aber leider nicht funktioniert, wenn JS deaktiviert ist. Kommt natürlich darauf an, ob Deine Seite zwangsläufig JS bedingt.
stu nicholls dot com | menu - Tree Frog Slide

Da ich bei einem Menü Zugänglichkeit auch bei deaktiviertem JS gut finde, schau noch mal hier nach:
Créer un menu "accordéon" avec jQuery - Alsacrations
So sieht das Menü dann aus: Menu accordéon avec jQuery

Eine rießige Auswahl an CSS-Menüs findet Du hier:
Stu Nicholls | CSSplay | CSS only menus
 
Was dein Problem angeht:

  • Wenn man IE nutzt, wird der IE.css geladen und danach noch zusätzlich der FF.css (siehe if-bedingung aber kein else)
  • hole dir die css-Dateien nicht mit import ^^ - sondern schreibe <style type="text/css" src="ie.css">
  • du hast in deinen css dateien bei einer id-zuordnung sowohl cursor:pointer als auch cursor:hand stehen, was soll das bringen (würde sagen, eins von beiden alleine reicht)
  • was mich auch noch irritiert, aber da weiß ich nicht ob man das so machen sollte ;) ist, dass du z.b für gewissen HTML-Tags per css per ID und aber auch per CLASS den Style anpasst

Sollte ich mich irgendwo geirrt haben *ZuDkadenzSchiel* dann bitte ich um Richtigstellung damit ich mir das dann gleich auch merken kann ;)
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben