nicht angemeldet
CSS - Ich werd bekloppt...
Hallo und ich bin am Ende,
das Problem ist, das mein "Drop Down Länderauswahl Menü" (oben rechts) hinter meinem Hauptmenü (darunter in rot) im IE 6 & 7
verschwindet. Im FF funkt alles...
Kann mir jemand helfen?
Z-Index habe ich schon bis zum kalten Knochenschlitterkotzen vergeben (sind aus dem Code jetzt wieder entfernt, bis auf einen, der jetzt für den FF notwendig ist), aber die haben nie etwas verändert/verbessert...
Gruss
G
-
Hallo und ich bin am Ende,
das Problem ist, das mein "Drop Down Länderauswahl Menü" (oben rechts) hinter meinem Hauptmenü (darunter in rot) im IE 6 & 7
verschwindet. Im FF funkt alles...
Kann mir jemand helfen?
Z-Index habe ich schon bis zum kalten Knochenschlitterkotzen vergeben (sind aus dem Code jetzt wieder entfernt, bis auf einen, der jetzt für den FF notwendig ist), aber die haben nie etwas verändert/verbessert...
Gruss G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="test.css" /> <title>Test</title> </head>
<body> <div id="main">
<div id="menu"> <div id="logo"><a href="#" alt="DUMMY" title="DUMMY"><img src="#" alt="DUMMY" title="DUMMY" width="72" height="114" /></a></div> <div id="top"> <div id="topmenu"> <div id="choosecountry"> <a class="uk" href="#" title="United Kindom">United Kindom<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a class="germany" href="#" title="Deutschland">Deutschland</a></li>
<li><a class="uk" href="#" title="United Kindom">United Kindom</a></li> <li><a class="usa" href="#" title="USA">USA</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </div> <ul> <li><a href="#" title="1">1</a></li>
<li><a href="#" title="2">2</a></li> <li><a href="#" title="3">3</a></li> <li><a href="#" title="4">4</a></li> <li><a href="#" title="5">5</a></li> </ul> </div> <div id="mainmenuouter"> <div id="mainmenu"> <ul> <li id="menu1"> <a href="#" title="Seite A"><span>Seite A</span><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul id="submenu1"> <li><a href="#" title="DUMMY">Seite 1</a></li> <li><a href="#" title="DUMMY">Seite 2</a></li>
<li><a href="#" title="DUMMY">Seite 3</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li id="menu2"> <a href="#" title="Seite B"><span>Seite B</span><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul id="submenu2">
<li><a href="#" title="DUMMY">Seite 1</a></li> <li><a href="#" title="DUMMY">Seite 2</a></li> <li><a href="#" title="DUMMY">Seite 3</a></li> <li><a href="#" title="DUMMY">Seite 4</a></li> <li><a href="#" title="DUMMY">Seite 5</a></li> </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li id="menu3"> <a href="#" title="Seite C"><span>Seite C</span><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul id="submenu3"> <li><a href="#" title="DUMMY">Seite 1</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li> <li id="menu4"> <a href="#" title="Seite D"><span>Seite D</span><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul id="submenu4"> <li><a href="#" title="DUMMY">Seite 1</a></li> <li><a href="#" title="DUMMY">Seite 2</a></li>
<li><a href="#" title="DUMMY">Seite 3</a></li> <li><a href="#" title="DUMMY">Seite 4</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li id="sitemap"> <a href="#" title="Sitemap"><span>Sitemap</span></a>
</li> </ul> </div> </div> </div> <div class="clear"></div> </div>
<div id="pageheader"> <img src="fileadmin/templates/mufin_corporation_site/img/dummy_head.jpg" width="660" height="241" alt="DUMMY"/>
</div>
<div id="pagecontent"> <h1>H1 Überschrift</h1> <p>Sed ut <strong>perspiciatis</strong> unde omnis iste natus error sit voluptatem accusantium<br /> doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi <a href="#" title="DUMMY">architecto</a> beatae vitae dicta sunt explicabo.</p> </div> </div>
</body> </html>
/* ############################################################## GLOBAL ############################################################## */
.clear { clear:both; margin:0; padding:0; }
html, body, a, a:link, a:visited, a:hover, a:active, img, table, td, tr, p, span, div, h1, h2, h3, h4, li, ul, ol { border:none; padding:0; margin:0; }
html { height:100%; }
body { height:100%; background:url(img/background.jpg) repeat-x; text-align:center; }
#main { margin:0 auto; width:660px; min-height:100%; background:url(img/bg_content.gif) top center repeat-y; }
- html div#main { height:100%; }
/* ############################################################## TOPMENU + LANGUAGES SELECT + MAINMENU ############################################################## */
#menu { background:url(img/bg_head.jpg) top left repeat-x; font-family:Arial, Helvetica, sans-serif; font-size:11px; padding:0 30px; height:114px; text-align:left; }
#logo { float:left; width:88px; height:114px; text-align:right; background:url(img/bg_menu_left.gif) bottom left no-repeat; border:1px solid green; }
#logo img { float:right; } /* FOR IE6 ONLY */
#top { float:left; width:512px; height:114px; }
/* TOPMENU */
#topmenu { width:512px; height:76px; }
#topmenu ul { float:right; padding:15px 0 0 10px; }
#topmenu li { float:left; padding:0 10px 0 0; list-style-type:none; }
#topmenu img { padding:0 5px 0 0; }
#topmenu a, #topmenu a:link, #topmenu a:active, #topmenu a:visited { color:#999; text-decoration:none; }
#topmenu a:hover { text-decoration:underline; }
/* LANGUAGES SELECT */
#choosecountry { position:relative; float:right; width:114px; padding:15px 0 5px 0; }
#choosecountry a, #choosecountry a:link, #choosecountry a:active, #choosecountry a:active, #choosecountry a:hover { background:url(img/flag_uk.gif) center left no-repeat; padding:0 0 0 27px; }
#choosecountry ul { position:absolute; top:33px; left:-5px; width:120px; height:0; visibility:hidden; background:url(img/menu_dropdown_lang.gif) top left repeat-x; padding:3px 5px; z-index:3; }
#choosecountry:hover ul { visibility:visible; height:auto; }
#choosecountry ul li { list-style-type:none; padding:1px 0; }
#choosecountry ul li a, #choosecountry ul li a:link, #choosecountry ul li a:visited, #choosecountry ul li a:active { width:120px; display:block; color:#ccc; }
#choosecountry ul li a:hover { text-decoration:none; color:#cc9933; }
#choosecountry ul li a.germany, #choosecountry ul li a.germany:visited, #choosecountry ul li a.germany:active, #choosecountry ul li a.germany:hover, #choosecountry ul li a.germany:link { background:url(img/flag_de.gif) center left no-repeat; }
#choosecountry ul li a.uk, #choosecountry ul li a.uk:visited, #choosecountry ul li a.uk:active, #choosecountry ul li a.uk:hover, #choosecountry ul li a.uk:link { background:url(img/flag_uk.gif) center left no-repeat; }
#choosecountry ul li a.usa, #choosecountry ul li a.usa:visited, #choosecountry ul li a.usa:active, #choosecountry ul li a.usa:hover, #choosecountry ul li a.usa:link { background:url(img/flag_us.gif) center left no-repeat; }
/* MAIN MENU */
#mainmenuouter { width:506px; height:38px; padding:0 6px 0 0; background:url(img/bg_menu_right.gif) bottom right no-repeat; }
#mainmenu { padding:0 0 0 10px; height:38px; background:url(img/bg_menu.gif) repeat-x; }
#mainmenu ul li { position:relative; float:left; list-style-type:none; border:1px solid red; }
#mainmenu a, #mainmenu a:link, #mainmenu a:active, #mainmenu a:visited, #mainmenu a:hover { display:block; }
#mainmenu span { display:none; }
#mainmenu ul li ul { position:absolute; top:38px; left:0; width:146px; height:0; visibility:hidden; background:url(img/menu_dropdown.gif) top left no-repeat; padding:5px; }
#mainmenu ul li ul li { padding:3px 0; clear:both; }
#menu1:hover #submenu1, #menu2:hover #submenu2, #menu3:hover #submenu3, #menu4:hover #submenu4 { width:120px; height:auto; visibility:visible; }
#mainmenu ul li ul li a, #mainmenu ul li ul li a:link, #mainmenu ul li ul li a:active, #mainmenu ul li ul li a:visited { background:none; width:146px; height:auto; color:#ccc; font-size:12px; text-decoration:none; }
#mainmenu ul li ul li a:hover { color:#cc9933; }
#menu1 a, #menu1 a:link, #menu1 a:active, #menu1 a:visited { height:38px; width:86px; background:url(img/menu_1.gif) top left no-repeat; display:block; } #menu1 a:hover, #menu1 a.active:hover { background:url(img/menu_1_hover.gif) top left no-repeat; display:block; } #menu1 a.active { background:url(img/menu_1_active.gif) top left no-repeat; display:block; }
#menu2 a, #menu2 a:link, #menu2 a:active, #menu2 a:visited { height:38px; width:64px; background:url(img/menu_2.gif) top left no-repeat; display:block; } #menu2 a:hover, #menu2 a.active:hover { background:url(img/menu_2_hover.gif) top left no-repeat; display:block; } #menu2 a.active { background:url(img/menu_2_active.gif) top left no-repeat; display:block; }
#menu3 a, #menu3 a:link, #menu3 a:active, #menu3 a:visited { height:38px; width:77px; background:url(img/menu_3.gif) top left no-repeat; display:block; } #menu3 a:hover, #menu3 a.active:hover { background:url(img/menu_3_hover.gif) top left no-repeat; display:block; } #menu3 a.active { background:url(img/menu_3_active.gif) top left no-repeat; display:block; }
#menu4 a, #menu4 a:link, #menu4 a:active, #menu4 a:visited { height:38px; width:76px; background:url(img/menu_4.gif) top left no-repeat; display:block; } #menu4 a:hover, #menu4 a.active:hover { background:url(img/menu_4_hover.gif) top left no-repeat; display:block; } #menu4 a.active { background:url(img/menu_4_active.gif) top left no-repeat; display:block; }
#sitemap a { margin:0 0 0 80px; height:38px; width:79px; background:url(img/menu_sitemap.gif) top left no-repeat; display:block; background-color:red;} #sitemap a:hover { background:url(img/menu_sitemap_hover.gif) top left no-repeat; display:block; background-color:red; } #sitemap a.active { background:url(img/menu_sitemap_active.gif) top left no-repeat; display:block; background-color:red; }
/* ############################################################## CONTENT ############################################################## */
#pageheader { height:240px; }
#pagecontent { padding:20px 50px 100px 50px; text-align:left; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:16px; color:#666; }
#pagecontent h1, h2 { font-family:"Trebuchet MS",Helvetica; font-size:18px; padding:0 0 20px 0; }
#pagecontent p, #pagecontent img { padding:0 0 12px 0; }
#pagecontent ul { padding:0 0 12px 16px; }
#pagecontent ol { padding:0 0 15px 23px; }
#pagecontent a, #pagecontent a:link, #pagecontent a:active { color:#6666cc; text-decoration:none; }
#pagecontent a:hover { text-decoration:underline; }
#pagecontent a:visited { color:#993399; }
-
Hi Groooveman!
Ich bin eigentlich viel zu müde und ich müsste ganz woanders sein...
<a class="uk" href="#" title="United Kindom">United Kindom<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->Wasumallesinderwelt...? Wer soll denn da durchblicken? Ich schnalle jedenfalls absolut nicht, was Du da mit den unzähligen conditional comments machst. Und ich kann mir nicht vorstellen, dass es etwas gutes ist. Der IE6 kriegt _Tabellen_ vorgesetzt? Meine Güte. Da wäre es vielleicht leichter, für jeden Browser eine eigene Seite zu erstellen.
Auch ansonsten ist der Code alles andere als übersichtlich, Du hast da eine ganz schöne Div-Suppe gebraut. Ist es wirklich nötig, dass "menu" noch "logo", "top", "topmenu", "choosecountry", "mainmenuouter" und "mainmenu" enthält? Man kann Linklisten an sich auch schon sehr schön mit CSS gestalten.Vielleicht ist mein Posting jetzt nicht sonderlich hilfreich, was deine Frage angeht, aber eventuell solltest Du das Gesamtkonzept noch einmal überdenken. Ich werde jedenfalls nicht alles auseinanderklamüsern, um zu sehen, was beim IE6 am Ende eigentlich ankommt.
mfG
Benjamin--
Selfcode: ie:} fl:{ br:> va:) ls:< fo:( rl:? n4:# ss:| de:] js:| ch:? sh:( mo:? zu:)
"Das Problem kennen ist wichtiger, als die Lösung zu finden, denn die genaue Darstellung des Problems führt automatisch zur richtigen Lösung."
(Albert Einstein)-
Hi.
Doch, ich finde dein Posting schon zielfuehrend. Der Code sollte entschlackt werden. Das ist so nicht schoen. Ist das ueberhaupt valide?
-
Hi,
Das ist so nicht schoen. Ist das ueberhaupt valide?
Die Tabelle im Link? Natuerlich nicht.
Aber sie wird per Conditional Comments vor dem Validator und anderen Browsern als dem IE <= 6 versteckt, so dass man sich einbilden kann, man liefere validen Code aus. An die IE <= 6 tut man das aber natuerlich nicht, sondern verlaesst sich schwerst auf deren Fehlerkorrektur.Dieser Unfug wurde IIRC mal von irgendwem ziemlich prominent vorgeschlagen, um damit Hover-Effekte fuer ganze Tabellen auch im IE < 7 hinzubekommen. Kollossaler Unfug ist es natuerlich trotzdem. Es waere eher ratsam, die Seite so aufzubauen, dass das ganze auch mit IE < 7 ohne entsprechende Hover-Unterstuetzung irgendwie zugaenglich waere - und dann fuer diese den entsprechenden Effekt per JavaScript, so vorhanden, nachzuruesten.
MfG ChrisB
-
Hm, ihr habt ja alle recht, aber das Problem bleibt leider (in IE 6 & 7): Die eingeblendete "Hover Ebene" (grün) verschwindet hinter der orangen Navigations Ebene. Warum bloss???
Und ja, dort ist einiges noch im argen mit dem Code, aber was soll man machen, wenn die Designvorgabe vollen runter Ecken, Hintergrundbilder und Verläufe ist. Ist aber sicherlich zu optimieren...
-
Und ja, dort ist einiges noch im argen mit dem Code, aber was soll man machen, wenn die Designvorgabe vollen runter Ecken, Hintergrundbilder und Verläufe ist. Ist aber sicherlich zu optimieren...
es gibt nichts, was sich nicht mit ausreichend css und javascript lösen lässt ;)
selbst in verschiedene richtungen laufende sich gegenseitig überlagende alphatransparente verläufe über runden ecken sind im ie6 möglich - aber so wie du das angehst, wirds etwas schwierig
zuerst muss man mit der richtigen variante anfangen und sich dann alternative für die dämlichen browser überlegen ;)
das ist weit weniger aufwand als gleich mit der dämlichen variante anzufangen und dann noch dämlichere für die guten browser einzubauen
-
Hallo,
Hm, ihr habt ja alle recht, aber das Problem bleibt leider (in IE 6 & 7): Die eingeblendete "Hover Ebene" (grün) verschwindet hinter der orangen Navigations Ebene. Warum bloss???
also mit
#choosecountry {
position:relative;
float:right;
width:114px;
padding:15px 0 5px 0;
z-index: 100;
}ist das bei mir im IE7 vor der roten Box.
Gruß Helmut
-
-
-
-
-
Vielleicht ein bischen übersichtlicher: Das Drop Down Menü (oben rechts "Land 1", wird bei hover grün) hinter meinem Hauptmenü (darunter in orange links in blau) im IE 6 & 7 verschwindet. Im FF funkt alles...
##########################################
<body>
<div id="top"><div id="choosecountry">
<a href="#" title="Land 1">Land 1</a>
<ul>
<li><a href="#" title="Land 1">Land 1</a></li>
<li><a href="#" title="Land 2">Land 2</a></li>
<li><a href="#" title="Land 3">Land 3</a></li>
</ul>
</div><ul>
<li><a href="#" title="1">1</a></li>
<li><a href="#" title="2">2</a></li>
<li><a href="#" title="3">3</a></li>
</ul><div id="mainmenu">
<ul>
<li id="menu1">
<a href="#" title="Seite A"><span>Seite A</span></a>
<ul id="submenu1">
<li><a href="#" title="DUMMY">Seite 1</a></li>
<li><a href="#" title="DUMMY">Seite 2</a></li>
<li><a href="#" title="DUMMY">Seite 3</a></li>
</ul>
</li>
</ul>
</div></div>
</body>##########################################
#top {
float:left;
width:512px;
height:114px;
}#topmenu {
width:512px;
height:76px;
}#topmenu ul {
float:right;
}#topmenu li {
float:left;
}#choosecountry {
position:relative;
float:right;
width:114px;
}#choosecountry ul {
position:absolute;
top:33px;
left:-5px;
width:120px;
height:0;
visibility:hidden;
z-index:3;
background-color:green;
}#choosecountry:hover ul {
visibility:visible;
height:auto;
}#choosecountry ul li a, #choosecountry ul li a:link, #choosecountry ul li a:visited, #choosecountry ul li a:active { width:120px; display:block; }
#mainmenu {
height:38px;
background-color:blue;
}#mainmenu ul { border:1px solid yellow; }
#mainmenu ul li {
position:relative;
float:right;
list-style-type:none;
border:1px solid red;
z-index:1;
}#mainmenu a, #mainmenu a:link, #mainmenu a:active, #mainmenu a:visited, #mainmenu a:hover { display:block; }
#mainmenu span { display:none; }
#mainmenu ul li ul {
position:absolute;
top:38px;
left:0;
width:146px;
height:0;
visibility:hidden;
}#menu1:hover #submenu1 { width:120px; height:auto; visibility:visible; }
#mainmenu ul li ul li a, #mainmenu ul li ul li a:link, #mainmenu ul li ul li a:active, #mainmenu ul li ul li a:visited {
background:none;
width:146px;
height:auto;
}#menu1 a, #menu1 a:link, #menu1 a:active, #menu1 a:visited { height:38px; width:86px; display:block; background-colorrange; }
#menu1 a:hover { display:block; background-colorrange; }