XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Darstellungsproblem Pulldown Menü IE6 zu IE7 (http://xhtmlforum.de/showthread.php?t=55062)

GigiASB 23.12.2008 01:07

Darstellungsproblem Pulldown Menü IE6 zu IE7
 
Hallo!

Versuche mich gerade an einem Pulldownmenü. ZUerst hatte ich das Problem, dass das menü sich im IE7 nicht öffnen ließ, im Firefox 3 aber schon. Das Problem konnte ich lösen, jetzt geht es im IE7 und im Firefox3. Jedoch funktioniert es auf einmal nicht mehr im IE6!

Hier der Quellcode:

Zitat:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title>First Test</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="GigisWorld">
<meta name="keywords" content="gigisworld, gigi, austria, wien, fak">
<meta name="robots" content="index, follow">

<meta name="author" content="Gigi">
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<style type="text/css">
.style1 {
color: #CACA00;
}
.style2 {
text-decoration: underline;
}
</style>

<link rel="stylesheet" media="all" type="text/css" href="css_play4.css" />
<link rel="stylesheet" media="all" type="text/css" href="menus.css" />

<style type="text/css">
/* ================================================== ==============
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at Stu Nicholls | CSSplay | Validating drop down cross-browser menu
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
================================================== ================= */
/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type:none;
padding:0;
margin:0;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
}

/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}

/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:10px;
/* buttons groesse */
width:140px;
padding:7px 0;
color:#00;
background:#ff6600;
text-decoration:none;
margin-right:1px;
text-align:center;
}
/* style the links hover */
.menu :hover{
color:#444;
background:#ff6600;
}

/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
</style>

</head>

<body bgcolor="#1d1d1c" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">


<div align="center">
<table width="728" border="1" cellspacing="0" cellpadding="0" bgcolor="#fffbf0">
<tr>
<td bgcolor="black">&nbsp;
<hr align="left" size="1" color="#ff6600">
<table width="96%" border="0" cellspacing="0" cellpadding="0" align="center">

<tr>
<td width="369">
<div align="right">
<img src="pics/banner1b.jpg" alt="" width="311" height="36" border="0"></div>
</td>
<td width="324"></td>
</tr>
</table>
<table width="96%" border="0" cellspacing="0" cellpadding="0" align="center">

<tr>
<td width="206"></td>
<td>
<p align="center"><img src="pics/banner2.jpg" alt="" width="264" height="17" border="0"></p>
</td>
</tr>
</table>
<hr align="right" size="1" color="#ff6600">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#fffc00" background="background-toptable.jpg" height="29">

<tr>
<td bgcolor="#ff6600" bordercolor="#008000">


<div class="menu">

<ul>
<li><a href="../menu/index.html">GIGI<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">Me, Me, Me</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>

</td></tr></table></a>
</li>

<li><a href="index.html">MENUS<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>

<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
</td></tr></table></a>
</li>

<li><a href="../layouts/index.html">LAYOUTS<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>

</td></tr></table></a>
</li>

<li><a href="../boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>

<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
</td></tr></table></a>
</li>

<li><a href="../mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>

<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>
</td></tr></table></a>
</li>

</ul>


</div>


</td>
</tr>
</table>
<p align="center"><img border="0" src="pics/logo1.jpg" width="660" height="340">
<table width="95%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#312f30">
</table>
<div align="center">

<csobj occur="86" w="722" h="124" t="Component" csref="../../web-data/Components/services-nav-bar.html">
</div>
</td>
</tr>
</table>
<br>
</div>

<script src="schnee.js" type="text/javascript"></script>


</body>

</html>

Warum funktioniert es im IE6 nicht?
Ich hoff mir kann jemand helfen ... wäre echt sehr lieb von euch!

fricca 23.12.2008 14:30

IE braucht bestimmte Angaben für a:hover:
Pure CSS Popups Bug - IE Bug

Diese Menüs von Stu Nicholls sind alles andere als einfach. Wenn du dir nicht ganz sicher bist mit dem was du tust, solltest du lieber die Finger davon lassen -- und v.a. keine Änderungen an den HTML-Kommentaren vornehmen.
In den FAQ findest du einen Link zum Suckerfish-Menü, das die Funktion im IE < 7 per JavaScript herstellt. Das halte ich für deutlich geeigneter für dein Vorhaben.

GigiASB 23.12.2008 15:05

Ok, danke erstmals!

Und was sollte ich jetzt ändern, wenn ich nicht die Finger davon lasse? Welche Zeilen gehören anders?

fricca 23.12.2008 15:20

Zitat:

Zitat von GigiASB (Beitrag 415245)
Und was sollte ich jetzt ändern, wenn ich nicht die Finger davon lasse? Welche Zeilen gehören anders?

Ändere einfach gar nichts. Bei Stu Nicholls findest du den Original-Code.

GigiASB 23.12.2008 15:24

Ich will ja auch eigentlich gar nix ändern, ich will nur das es eingebaut werden kann auf meiner Seite. Den Code vom Menü würde ich ja sowieso lassen!

fricca 23.12.2008 15:27

Du hast aber den Code bereits geändert! Vergleiche deinen mit dem Original!

Es tut mir leid, ich denke nicht, dass dieses Menü für dich geeignet ist.

GigiASB 23.12.2008 15:30

Natürlich habe ich ihn geändert, weil er so wie er im original war, im IE7 nicht funktioniert hat. Nach der Änderung hat er aber im 7er funktioniert, dafür im 6er nicht mehr. Und Farben ändern, wird sich ja wohl kaum auf den Code an sich auswirken. Aber ok, wenn du mir nicht helfen willst, dann macht es vielleicht jemand anderer. Danke!

fricca 23.12.2008 15:36

Nein, ich schrieb nicht von Farben. Ich schrieb von HTML-Kommentaren. Doch, Stu Nicholls Code funktioniert.
Dass bereits winzigste Änderungen am Stylesheet Auswirkungen im IE haben können, solltest du spätestens nach der Lektüre des obigen Links wissen. [edit: Ja, es ist eine Farbänderung, die dem IE 6 die Funktion nimmt. Bzw. die Tatsache, dass die Hintergrundfarbe bei Hover eben nicht mehr geändert wird.]

Nein, ich verstehe nicht, dass du nicht in der Lage bist, deinen Code mit dem Original zu vergleichen. Und ich verstehe auch nicht, weshalb du nicht weißt, was du bereits alles geändert hast.
Wenn du meiner Empfehlung -- die ich, glaube mir, nicht ohne Grund gebe -- nicht folgen willst, nein, dann kann ich dir wirklich nicht weiter helfen.

Praktikant 24.12.2008 01:27

Ich hatte das selbe Problem ;)
Ich habe ein solches Menü verwendet, das auch in allen Browser wunderbar geklappt hat. Nur brauchte ich ein Bild als Hintergrund für die einzelnen Punkte. Das war auch schnell erledigt, nur funktionierte es danach nicht mehr im IE<7. Der Grund war schnell gefunden. Und ob du es glaubst oder nicht... fricca hat Recht. Es lag tatsächlich daran, dass die Hintergrundfarbe nicht mehr geändert wurde.

Nach längerer Suche (auch in diesem Forum) habe ich dann eine JavaScript-Unterstützung für besagten Browser eingebunden und es lappte wieder ;)


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:14 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023