mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 18:24 Benutzername: Passwort: Auto-Login

Thema: problem mit flyout menü in ie6 vom 01.08.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> problem mit flyout menü in ie6
Seite: 1, 2  Weiter
Autor Nachricht
Benutzer 4545
Account gelöscht Threadersteller


Ort: -

Verfasst Mi 01.08.2007 06:44
Titel

problem mit flyout menü in ie6

Antworten mit Zitat Zum Seitenanfang

Hallo ihr lieben,

das folgende flyout-menü funzt in ie 6 (hier auf der arbeit) nicht (in ie 7 gings zu hause).

Folgende Meldung erscheint immer oben in der Infoleiste, liegt das vielleicht daran (und an irgendwelchen Einstellungen für die Sicherheit)??

Guck rechts! Das Anzeigen aktiver Inhalte, die auf den Computer zugreifen können, wurde für diese Datei aus Sicherheitsgründen eingeschränkt. Klicken Sie hier um Optionen anzeigen zu lassen.... Guck links!

wenn ich dann klicke und die "geblockten Inhalte" zulasse ändert das allerdings auch nix.

Ist was im Code falsch bzw. fehlt was in den conditional comments damit der ie 6 das auch kann?? l
lg

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="lasttry.css" rel="stylesheet" type="text/css">


<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(csshover.htc); font-size: 100%;}
#menu ul li a {height: 1%;}
}
</style>
<![endif]-->
</head>

<body>
<div id="box">
  <div id="kopf"></div>
  <div id="leiste" style="padding-left:650px; font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:10px; color:#FFFFFF; font-weight:bold; ">Impressum | Kontakt</div>
  <div id="menu">
    <ul>
   
      <li style="left: 6px;top:20px; "><a href="#">Besucher</a>

        <ul>
          <li style="left:118px;top:0px;"><a href="#">unterpunkt 1</a> </li>
          <li style="left:118px;top:21px;"><a href="#">unterpunkt 2</a> </li>
        </ul>      
      </li>
    
      <li style="left: 6px;top:50px; "><a href="#">Partner</a>
        <ul>
          <li style="left:118px;top:0px;"><a href="#">unterpunkt 1</a> </li>
          <li style="left:118px;top:21px;"><a href="#">unterpunkt 2</a> </li>
        </ul>      
      </li>
   
    </ul>
  </div>
 
  <div id="main"> Das Modell unseres Ausklappmenu-Platzwunders funktioniert mit
    reinem CSS, also ohne JavaScript und ist deshalb suchmaschinenfreundlich und
    barrierearm zugleich. Den Browser-Veteranen aus der Internet-Explorer-Familie
    machen wir das Menu mit Conditional Comments und IE Behaviors schmackhaft.
    Ein bisschen CSS zaubert die horizontale und vertikale Version des Menus aus
    dem gleichen HTML-Quelltext. Platzwunder Ausklppmenu in Aktion Live Demo im
    neuen Fenster: 2D-Ausklappmenu vertikal und - horizontal
    Das Modell unseres Ausklappmenu-Platzwunders funktioniert mit
    reinem CSS, also ohne JavaScript und ist deshalb suchmaschinenfreundlich und
    barrierearm zugleich. Den Browser-Veteranen aus der Internet-Explorer-Familie
    machen wir das Menu mit Conditional Comments und IE Behaviors schmackhaft.
    Ein bisschen CSS zaubert die horizontale und vertikale Version des Menus aus
    dem gleichen HTML-Quelltext. Platzwunder Ausklppmenu in Aktion Live Demo im
    neuen Fenster: 2D-Ausklappmenu vertikal und - horizonta </div>
  <div id="sidebar"></div>
  <div id="footer"></div>
</div>
</body>
</html>



css
Code:

html
{
padding:0px;
margin:0px;
height: 100%;
}


/*grundlegende einstellungen*/
body
{
margin:0px;
padding:0px;
height:100%;
}

/*umschliesst das gesamte layout*/
#box
{
background-image: url('images/bg.gif');
background-repeat:repeat-y;
width:800px;
height:auto;
margin-right:auto;
margin-left:auto;
padding:0px;
}

#kopf
{
background-color:#003399;
height:125px;
margin:0px;
padding:0px;

}

#leiste
{
background-color:#663300;
height:10px;
margin:0px;
padding:0px;

}

/*Kasten Menü (äußrre Box in die die listen kommmen)*/
#menu
{
width:130px;
float:left;
height:460px;
background-image: url('images/navibg.jpg');
position: relative;
margin:0px;
padding:0px;
}

/*so sieht der obere menübutton aus              ok*/
#menu ul li{

background-image: url('images/menuepunkt_rund.gif');
background-repeat: no-repeat;
width: 118px;
height: 21px;
display: block;
position: absolute;
padding-top: 5px;
padding-left: 0px;
padding-bottom:21px;
list-style-type: none;
margin: 0px;
font-family: verdana;
font-size: 10px;
font-style: normal;
}

/*so sieht der menübutton außerdem als link aus              ok*/
#menu ul li a {

text-decoration: none;
color: #000;
padding-left: 30px;
list-style-type: none;
}

/*so sieht der menübutton beim drüberfahren aus              ok*/
#menu ul a:hover {
color: #C62828;
}

/*Einblenden des Submenüs beim hovern von Button 1*/
#menu ul li:hover ul li{
display: block;
}

/*so sieht der submenübutton aus*/
#menu ul ul li {

width: 90px;
height: 21px;
display: block;
position: absolute;
padding: 0px;
margin: 0px;
background-color: #fff;
border: 1px solid #C62828;
font-family: verdana;
font-size: 10px;
line-height: 18px;
font-style: normal;
display:none;
background-image:none;
}

/*so sieht der submenübutton außerdem als link aus*/
#menu ul ul a
{
color: #000;
text-decoration: none;
padding-left: 10px;
list-style-type: none;

}

/*so sieht der menübutton beim drüberfahren aus*/
#menu ul ul a:hover {
color: #C62828;
}

/* use the table to position the dropdown list   EVT. mit tabelle tesetn für ie6
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:149px;
top:0px;
}
*/
a.active {
color: #C62828;
}


/*der main bereich*/
#main
{
padding: 0px;
margin:0px;
width:500px;
float:left;
background-color:#ffffff;
overflow: auto;
}


/*die rechte sidebar*/
#sidebar
{
width:170px;
height:460px;
padding:0px;
float:left;
background-color:#F7F7F8;

}


Außerdem ist die #leiste im Firefox irgendwie kleiner als im ie...
 
Mark-Korb

Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Mi 01.08.2007 08:53
Titel

Antworten mit Zitat Zum Seitenanfang

1. warum schreibst du in die Listenelemente noch was rein wen du ne externe CSS hast?
2. ehm, ie 6 kann kein hover ausser es geht um Text
hier ein Link der dir helfen sollte.
http://www.alistapart.com/articles/dropdowns/

hab weder ie6 noch 7 kann mir das also nicht anschauen.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Icehawk

Dabei seit: 17.04.2002
Ort: gleich hinten links
Alter: 51
Geschlecht: Männlich
Verfasst Mi 01.08.2007 09:20
Titel

Antworten mit Zitat Zum Seitenanfang

Schau mal unter: http://www.cssplay.co.uk/index.html

Da findest du Tonnen von Browserkopatiblen Fly-Out-Menüs.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Benutzer 4545
Account gelöscht Threadersteller


Ort: -

Verfasst Mi 01.08.2007 09:46
Titel

Antworten mit Zitat Zum Seitenanfang

danke! ich habs jetzt geändert aber es geht immer noch nicht...kann sich das mal wer im ie angucken? vielleicht liegts ja wirklich an meinen einstellungen...



Code:

/* CSS Document */

html
{
padding:0px;
margin:0px;
height: 100%;
}


/*grundlegende einstellungen*/
body
{
margin:0px;
padding:0px;
height:100%;
}

/*umschliesst das gesamte layout*/
#box
{
background-image: url('images/bg.gif');
background-repeat:repeat-y;
width:800px;
height:auto;
margin-right:auto;
margin-left:auto;
padding:0px;
}

#kopf
{
background-color:#003399;
height:125px;
margin:0px;
padding:0px;

}

#leiste
{
background-color:#663300;
height:10px;
margin:0px;
padding:0px;

}

/*Kasten Menü (äußrre Box in die die listen kommmen)*/
#menu
{
width:130px;
float:left;
height:460px;
background-image: url('images/navibg.jpg');
position: relative;
margin:0px;
padding:0px;
}

/*so sieht der obere menübutton aus              ok*/
#menu ul li{

background-image: url('images/button2.gif');
background-repeat: no-repeat;
width: 118px;
height: 21px;
display: block;
position: absolute;
padding-top: 5px;
padding-left: 0px;
padding-bottom:21px;
list-style-type: none;
margin: 0px;
font-family: verdana;
font-size: 10px;
font-style: normal;
}

/*so sieht der menübutton außerdem als link aus              ok*/
#menu ul li a {

text-decoration: none;
color: #000;
padding-left: 30px;
list-style-type: none;
}

/*so sieht der menübutton beim drüberfahren aus              ok*/
#menu ul a:hover {
color: #C62828;
}

/*Einblenden des Submenüs beim hovern von Button 1*/
#menu ul li:hover ul li, #menu ul li.over ul li{
display: block;
}

/*so sieht der submenübutton aus*/
#menu ul ul li {

width: 90px;
height: 21px;
display: block;
position: absolute;
padding: 0px;
margin: 0px;
background-color: #fff;
border: 1px solid #C62828;
font-family: verdana;
font-size: 10px;
line-height: 18px;
font-style: normal;
display:none;
background-image:none;
}

/*so sieht der submenübutton außerdem als link aus*/
#menu ul ul a
{
color: #000;
text-decoration: none;
padding-left: 10px;
list-style-type: none;

}

/*so sieht der menübutton beim drüberfahren aus*/
#menu ul ul a:hover {
color: #C62828;
}

/* use the table to position the dropdown list   EVT. mit tabelle tesetn für ie6
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:149px;
top:0px;
}
*/
a.active {
color: #C62828;
}


/*der main bereich*/
#main
{
padding: 0px;
margin:0px;
width:500px;
float:left;
background-color:#ffffff;
overflow: auto;
}


/*die rechte sidebar*/
#sidebar
{
width:170px;
height:460px;
padding:0px;
float:left;
background-color:#F7F7F8;

}

#footer
{
clear: both;
width: 800px;
height: 20px;
background-color: #006699;

}



Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="lasttry.css" rel="stylesheet" type="text/css">


<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(csshover.htc); font-size: 100%;}
#menu ul li a {height: 1%;}
}

</style>
<![endif]-->
<style type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</style>
</head>

<body>
<div id="box">
  <div id="kopf"></div>
  <div id="leiste" style="padding-left:650px; font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:10px; color:#FFFFFF; font-weight:bold; ">Impressum | Kontakt</div>
  <div id="menu">
    <ul>
   
      <li style="left: 6px;top:20px; "><a href="#">Besucher</a>

        <ul id="nav">
          <li style="left:118px;top:0px;"><a href="#">unterpunkt 1</a> </li>
          <li style="left:118px;top:21px;"><a href="#">unterpunkt 2</a> </li>
        </ul>      
      </li>
    
      <li style="left: 6px;top:50px; "><a href="#">Partner</a>
        <ul id="nav">
          <li style="left:118px;top:0px;"><a href="#">unterpunkt 1</a> </li>
          <li style="left:118px;top:21px;"><a href="#">unterpunkt 2</a> </li>
        </ul>      
      </li>
   
    </ul>
  </div>
 
  <div id="main"> Das Modell unseres Ausklappmenu-Platzwunders funktioniert mit
    reinem CSS, also ohne JavaScript und ist deshalb suchmaschinenfreundlich und
    barrierearm zugleich. Den Browser-Veteranen aus der Internet-Explorer-Familie
    machen wir das Menu mit Conditional Comments und IE Behaviors schmackhaft.
    Ein bisschen CSS zaubert die horizontale und vertikale Version des Menus aus
    dem gleichen HTML-Quelltext. Platzwunder Ausklppmenu in Aktion Live Demo im
    neuen Fenster: 2D-Ausklappmenu vertikal und - horizontal </div>
  <div id="sidebar"></div>
  <div id="footer"></div>
</div>
</body>
</html>


Zuletzt bearbeitet von am Mi 01.08.2007 14:41, insgesamt 2-mal bearbeitet
 
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 01.08.2007 10:45
Titel

Antworten mit Zitat Zum Seitenanfang

Wozu jetzt die .htc und ein Javascript?

Und

Code:
<style type="text/javascript">...</style>


ist natürlich falsch und muss heißen

Code:
<script type="text/javascript">...</script>
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Benutzer 4545
Account gelöscht Threadersteller


Ort: -

Verfasst Mi 01.08.2007 10:58
Titel

Antworten mit Zitat Zum Seitenanfang

das java damit der ie 6 das kann aber es geht ja nicht. die hover kann ich denk ich mittlerweile rausschmeißen. die war auchmal dazu gedacht.
habs geändert aber es will immer noch nicht..
 
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 01.08.2007 11:08
Titel

Antworten mit Zitat Zum Seitenanfang

Beim schnellen überfliegen fällt mir auf du hast vergessen der ungeordeten Liste
die id "nav" zu geben. Das Javascript greift eben über diese css id auf deine Liste
zu und daher kann das nicht funktionieren.

Ansonsten schau dir das doch nochmal richtig an:

http://www.google.de/search?hl=de&q=suckerfish
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Mark-Korb

Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Mi 01.08.2007 12:10
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
<div id="leiste" style="padding-left:650px; font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:10px; color:#FFFFFF; font-weight:bold; ">Impressum | Kontakt</div>


Wenn du schon eine id benutzt, dann kannst du die werte auch in die id schreiben und musst nicht noch nen style in html einbauen.

So was machst du übrigens öfters. Das ist eigentlich das was man mit ner externen CSS vermeiden will.

PS. ich seh grade das du ids mehrfach verwendest. id kommen aber immer nur einmal in einem document vor das währen dann keine ids sondern d müstest klassen definieren.

Ich empfehle dir Dringen das hier zu lesen. Weil ich das Gefühl habe du schusterst dich hier langsam zu dem Grab deiner Website. Es Scheint das dir einfach das Basis wissen zu CSS fehlt oder das du sehr große Lücken hast.
http://www.css4you.de/wscss/index.html


Zuletzt bearbeitet von Mark-Korb am Mi 01.08.2007 12:15, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen CSS und IE - Problem mit Flyout-Menü
Lücke bei Flyout Menü im ie7... -.-
Thema Adobe Muse, Flyout Menü
[solved] aktiv-Status im Flyout-Menü
(A CSS only validating flyout menu) Problem im IE
Hoover Flyout?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.