Vysúvacie menu nefunguje v IE

Príspevok od používateľa **Grim** » 26 sep 2011, 18:26

Ukážku si môžte pozrieť na stránke http://menu.grim.sk . Teraz v IE nerobí nič, iba sa zobrazí základná ponuka. Keď sa prejde na tretiu položku zľava, mala by sa vysunúť podponuka, ale nič sa nestane. Čo mám deklarovať v CSS pre IE aby sa to menu vysúvalo aj v IE? Alebo iné riešenie?

Kód pre menu:

Kód: Vybrať všetko

<div class="wrapper">
<div id="top">
<div id="head">
<ul id="nav">
<li><a href="/">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu &raquo;</a>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
<li><a href="#">Menu &raquo;</a>

<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>



</li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu &raquo;</a>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
<li><a href="#">Menu</a></li>
</ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</div> <!--head-->
</div> <!--top-->
</div> <!--wrapper-->

Kód css:

Kód: Vybrať všetko

body {
	background-image: url("back.png");
	background-position: center top;
	background-repeat: repeat-x;
	background-attachment: scroll;
	background-color: #ffffff;
	color: black;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	overflow-y: scroll;
	overflow-x: visible;
	}

	a:link {color: black;} 
	a:visited {color: black;}
	a:active {color: black;}
	a:hover {color: black;}
	a {text-decoration: underline;}
	a:hover {text-decoration: none;}
	p {text-indent: 0px; text-align: justify; width: 600px;}



.iecenter {
	background-color: rgba(0, 0, 0, 0.0);
	align: center;
}

.iecenter2 {
	background-color: rgba(0, 0, 0, 0.0);
	align: center;
	text-align: center;
	width: 1000px;
	position: relative;
	border-width: 1px;
	border-color: rgba(0, 0, 0, 0.0);
	border-style: solid;
}

/*MENU*/

.wrapper{
background-color: rgba(0, 0, 0, 0.0);
width:100%;
position:relative;
display:table;
}

#top{
background-color: rgba(0, 0, 0, 0.0);
position:relative;
width:950px;
margin:0 auto;
}

#head{
background-color: rgba(0, 0, 0, 0.0);
height:0px;
z-index: 5;
}

#top .logo, .logo a{
display:block;
height:90px;
width:210px;
position:absolute;
left:0px;
top:13px;
border: none;
padding: 0;
margin:0;
}

#top .logo a, #top .logo a:hover{
top:0;
left:0;
text-indent:-9999px;
outline:none;
border: none;
}

#nav{
background-color: rgba(0, 0, 0, 0.0);
position: relative;
right:0px;
top:0px;
list-style-type: none;
list-style-position: outside;
margin:0px;
z-index: 5;
}

#nav li{
background-color: rgba(255, 255, 255, 1.0);
border: 1px solid #000000;
	padding: 2px;
	margin: 1px;
float: left;
}

#nav li a{
display:block;
float:left;
padding: 12px 10px 1px 10px;
	margin: 0px 0px 0px 0px;
width:150px;
	height: 30px;
border: none;
line-height: 18px;
outline: none;
}


/*navigation*/


#nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:50px; 
z-index:5;
}


#top #nav ul a{
line-height:28px;
font-size: 12px;
cursor: pointer;
}

#top #nav li{
float:left;
position:relative;
z-index:20;
margin-top:11px;
}

#top #nav li li{
border-left:none;
margin-top:0;
}

#top #nav ul {
display:none;
position:absolute;
top:48px;
width:172px;
left:-1px;
	border-left: 1px solid #000000;
	margin-left: -1px;
}

#top #nav li ul a{
width:150px;
height:auto;
float:left;
text-align:left;
padding:0 10px;
}

#top #nav ul ul{
top:auto;
border-top:none;
}	

#top #nav li ul ul {
left:171px;
top:-1px;
	border-left: 1px solid #000000;
	margin-left: 3px;
}

#top #nav li:hover ul ul, #top #nav li:hover ul ul ul,#top  #nav li:hover ul ul ul ul{
display:none;	
}
#top #nav li:hover ul, #top #nav li li:hover ul, #top #nav li li li:hover ul, #top #nav li li li li:hover ul{
display:block;
}

#top #nav li ul a{
border-top:none;
}

forfun

Neviem co je v tom tvojom zle ale vzhladom na to ze si v stadiu budovania toho menu ti mozem odporucit uz hotove menu napr.
http://cssmenumaker.com/drop_down_css_menu.php

Popripade kopu dalsich moznosti:
http://www.google.com/search?ie=UTF-8&o ... pdown+menu

Príspevok od používateľa **Grim** » 26 sep 2011, 22:07

...no niesom v štádiu budovania, menu je hotové, ale nefunguje v IE, takže by som toto štádium skôr popísal ako ladenie pre IE, ale ak by sa to zachrániť nedalo, tak by som použil niečo iné...a v tom čo si mi ponúkol ty nemôžem vytvárať položky tretieho rádu...

pre IE tam máš podmienku alternatívneho štýlu:

Kód: Vybrať všetko

<!--[if IE]> 
<link rel="stylesheet" type="text/css" href="cssie.css"> 
<![endif]-->

ktorý sa ti však na serveri nenachádza: http://menu.grim.sk/cssie.css

Ak som si zkopíroval toto html čo uvádzaš, a to css čo si dal (ktoré máš aj na svojej stránke, lebo textdiff neukázal žiadne rozdiely) tak mi to v IE funguje.

Príspevok od používateľa **Grim** » 26 sep 2011, 23:15

...ešte raz...čo si spravil?...inak neni to tak že do alternatívneho CSS pre IE sa píše iba to, čo sa má zmeniť?...teda ak chcem zachovať všetky atribúty prvkov tak nepotrebujem CSS zvlášť pre IE?...mne to nefunguje ani po nahratí cssie.css (v ktorom je to isté ako v css.css)...

Grim napísal:...ešte raz...čo si spravil?...

Spravil som to, že som si vytvoril html súbor s tým, čo si napísal v prvom príspevku. Vytvoril som si css súbor s tým, čo si napísal v prvom príspevku. A toto css som použil v tom html súbore. Potom som si html súbor zobrazil v IE a fungovalo dokonale (v rovnakej verzii IE v ktorej mi tá tvoja live ukážka na ktorú si dal link nešla). To css čo som vytvoril som porovnával aj s tým čo máš na serveri a nie je v ňom žiadna zmena. Aj tak ti to pre istotu prikladám v prílohe

Grim napísal:inak neni to tak že do alternatívneho CSS pre IE sa píše iba to, čo sa má zmeniť?...teda ak chcem zachovať všetky atribúty prvkov tak nepotrebujem CSS zvlášť pre IE?...

áno, je to tak. Ale ak tento súbor na serveri nie je, a hodí 404 tak s tým má očividne IE veľké problémy

Príspevok od používateľa **Grim** » 26 sep 2011, 23:22

...tak potom bude problém niekde v hlavičke...máš to aj s hlavičkou alebo iba menu?...

Kód: Vybrať všetko

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Menu</title>
<meta name="robots" content="index,follow">
<meta http-equiv="imagetoolbar" content="no">
<meta name="publisher" content="Grim">
<meta name="author" content="Grim">
<meta name="copyright" content="Grim, 2011">
<meta http-equiv="Content-Style-Type" content="text/css">


<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css.css">
<!--[if IE]> 
<link rel="stylesheet" type="text/css" href="cssie.css"> 
<![endif]-->


</head>
<body>
<div class="iecenter" align="center">
<div class="iecenter2" align="left">

TU JE MENU

</div> <!--iecenter2-->
</div> <!--iecenter-->
</body>

pozerám že tam máš ešte navyše nejaké dva divy, iecenter a iecenter2 ktoré si v prvom príspevku v tom html nedával, tak možno tie robia problém

//autoeditácia príspevku (26 Sep 2011, 23:24)
v hlavičke nebude problém, veď to máš validné

problém bude v jednom z tých divov

Príspevok od používateľa **Grim** » 26 sep 2011, 23:25

...neviem...tie mi iba centrujú stránku na stred...vidím, že ty si použil úplne inú hlavičku...

//v divoch chyba nieje, skúsil som to v pôvodnej ukážke a nefunguje to...vymazal som ich a nejde to aj tak...

//

Kód: Vybrať všetko

<!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">

...tu bol pes zakopaný...

...ďakujem za pomoc...

ale validátor to zjedol, to nie je chyba kodu ale bug v IE. Ten doctype je štandartný a vždy sa používa ak nie je zvolený iný

Príspevok od používateľa **Grim** » 26 sep 2011, 23:53

...nj, ešte dodám, že ty si použil XHTML, ktorý mne validator nezjedol, lebo ja som XHTML nepoužil...tak som si musel nájsť iný doctype...

Kód: Vybrať všetko

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Vysúvacie menu nefunguje v IE

Vysúvacie menu nefunguje v IE

Re: Vysúvacie menu nefunguje v IE

Re: Vysúvacie menu nefunguje v IE

Re: Vysúvacie menu nefunguje v IE

Re: Vysúvacie menu nefunguje v IE

Re: Vysúvacie menu nefunguje v IE

Re: Vysúvacie menu nefunguje v IE

Re: Vysúvacie menu nefunguje v IE

Re: Vysúvacie menu nefunguje v IE

Re: Vysúvacie menu nefunguje v IE

Re: Vysúvacie menu nefunguje v IE