17 replies [Last post]
syargulik
Offline
newbie
USA
Last seen: 11 years 37 weeks ago
USA
Timezone: GMT-8
Joined: 2009-02-07
Posts: 8
Points: 0

I have found this css menu tutorial that fits the best for my web site. Before I had it programmed in Java script: mcg12.org. the new css version is very easy to change and use. However, I have one problem with using it in IE.

Bellow my drop down menu is the flash banner. When site is loaded completely in IE, I get my mouse over the first menu title - it drops down sub menus perfectly, but when I try to go down to my sub menus - it closes the menu itself and does not let me go bellow the first sub menu.

I have this problem ONLY on pages where the flash banner is.

Here are the examples:

http://mcg12.com/index2.php

http://mcg12.com/encounters2.php

Here is the html:

<div id="navbarWrapper">
					<ul id="menu">
<li><span>Церковь</span>
    <dl>
        <dt><a href="http://www.mcg12.com/church.php">Церковь</a></dt>
            <dd><a href="http://www.mcg12.com/church_all.php" title="Дочерние церкви">Наши&nbsp;церкви</a></dd>
            <dd><a href="http://www.mcg12.com/schedule.php" title="Расписание Служений">Расписание&nbsp;служений</a></dd>
            <dd><a href="http://encounter4u.net" title="Инкаунтеры">Инкаунтеры</a></dd>
    </dl>
</li>
<li><span>Советы</span>
    <dl>
        <dt><a href="http://www.mcg12.com/advice.php">Советы</a></dt>
            <dd><a href="http://www.mcg12.com/advice.php" title="Вопрос-ответ">Вопросы&nbsp;и&nbsp;ответы</a></dd>
            <dd><a href="http://www.mcg12.com/adviceform.php" title="Задать вопрос пастору">Задать&nbsp;вопрос&nbsp;пастору</a></dd>
    </dl>
</li>
<li><span>Школа&nbsp;лидеров</span>
    <dl>
        <dt><a href="http://www.mcg12.com/school_of_leaders.php">Школа&nbsp;лидеров</a></dt>
        	<dd><a href="http://www.mcg12.com/s_about.php" title="О школе лидеров G-12">О&nbsp;школе</a></dd>
            <!--<dd><a href="http://www.mcg12.com/s_registration.php" title="Регистрация">Регистрация</a></dd>-->
            <dd><a href="http://www.mcg12.com/s_lessons.php" title="Аудио-записи, печатные уроки и тесты">Уроки&nbsp;и&nbsp;тесты</a></dd>
            <dd><a href="http://www.mcg12.com/s_payments.php" title="Оплата за обучение">Оплата</a></dd>
            <dd><a href="http://www.tnzlead.net" title="Подростковая школа лидеров">Подростковая&nbsp;школа</a></dd>
    </dl>
</li>
<li><span>Новости/события</span>
    <dl>
        <dt><a href="http://www.mcg12.com/news.php">Новости/события</a></dt>
        	<!--<dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop&nbsp;down&nbsp;menu</a></dd>-->
    </dl>
</li>
<li><span>Медиа</span>
    <dl>
        <dt><a href="http://www.mcg12.com/media.php">Медиа</a></dt>
            <dd><a href="http://www.mcg12.com/articles.php" title="Статьи и проповеди">Статьи&nbsp;и&nbsp;проповеди</a></dd>
            <dd><a href="http://www.mcg12.com/media.php" title="Аудио и видео">Аудио&nbsp;и&nbsp;видео</a></dd>
    </dl>
</li>
<li><span>Молодежное&nbsp;служение</span>
    <dl>
        <dt><a href="http://www.mcg12.com/underconstruction.html">Молодежное&nbsp;служение</a></dt>
        	<!--<dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop&nbsp;down&nbsp;menu</a></dd>-->
    </dl>
</li>
<li><span>Контакты</span>
    <dl>
        <dt><a href="http://www.mcg12.com/contact.php">Контакты</a></dt>
            <dd><a href="http://www.mcg12.com/contact.php" title="Контактная форма">Контактная&nbsp;форма</a></dd>
            <dd><a href="http://www.mcg12.com/feedback.php" title="Обратная связь">Обратная&nbsp;связь</a></dd>
    </dl>
</li>
</ul>
 
					</div>

Here is the css code:

#menu {position:absolute; display:table;margin-left:14px;margin-right:auto;margin-top:0px;width:auto;font:normal 12px verdana; list-style-type:none;}
 
#menu li {display:block; float:left; position:relative; z-index:100; margin-right:1px;}
#menu li span {display:block; z-index:100; background:#0b1560; padding: 5px 10px;font-size:1.1em;}
#menu li a, #menu li a:visited {display:block;padding:0;background:#0b1560;}
 
#menu dl {position:absolute; top:0; left:0; margin: 0; padding: 0;}
#menu dt {background: #0b1560; margin:0; font-size: 1.1em; border-bottom:0px; float:left; border-right:0px;}
#menu dd { display:none; border-bottom:1px solid #313b83; clear:left; margin:0; padding:0px; color: #fff; font-size: 1em; text-align:left;}
 
#menu dt a, #menu dt a:visited {display:block; color:#ffffff; padding: 5px 10px; text-decoration:none;}
#menu dd a, #menu dd a:visited {background:#0b1560; color:#ffffff; text-decoration:none; display:block; padding: 5px 10px;}
 
#menu li a:hover {border:0;}
 
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {border-bottom:15px solid #313b83;}
#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {background: #313b83; color:#ffffff;}
#navbarWrapper{width:770px;margin-left:auto;margin-right:auto;}

What could be the problem? What can I add in css to show it correctly in IE?
Please help if you know the reason.

Thanks in advance
_________________
Serzh

Triumph (not verified)
Anonymous's picture
Guru

I'd try setting the flash

I'd try setting the flash item's wmode="opaque"

syargulik
Offline
newbie
USA
Last seen: 11 years 37 weeks ago
USA
Timezone: GMT-8
Joined: 2009-02-07
Posts: 8
Points: 0

I've just tried

Thank you for your input. It was set for transparent before, I have tried to set to opaque - it didn't help.

As I mentioned it does not work right only in Internet Explorer.

Triumph (not verified)
Anonymous's picture
Guru

I must question your use of

I must question your use of Flash in this case. It seems unnecessary and not using it will make this a non-issue.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

that flash can easily be

that flash can easily be replicated using jQuery and the Cycle plugin
then it wont require a special plugin and you won't have this issue! :thumbsup:

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

syargulik
Offline
newbie
USA
Last seen: 11 years 37 weeks ago
USA
Timezone: GMT-8
Joined: 2009-02-07
Posts: 8
Points: 0

hm...

Yeah I understand that. We have flash banners instead of using simple jpeg. I think that kind of brings more life to a site.

Triumph (not verified)
Anonymous's picture
Guru

syargulik wrote:Yeah I

syargulik wrote:

Yeah I understand that. We have flash banners instead of using simple jpeg. I think that kind of brings more life to a site.

Well, Deuce went exactly where I was going. His solution is not only better, it's faster, requires less load time, requires no extra app to create the presentation, fails gracefully (instead of just failing) and does exactly the same thing. No more or less life, just the same.

To each his own, I suppose.

Do you prefer that we offer better solutions or just help you on your way to much more work in the long run? Either is OK by me. Smile

syargulik
Offline
newbie
USA
Last seen: 11 years 37 weeks ago
USA
Timezone: GMT-8
Joined: 2009-02-07
Posts: 8
Points: 0

need help

Hm...
Smile
I prefer that you offer help "on my way to much more work in the long run" Smile

I do think that the first index page at least needs flash. It has big flash banner and it is the part of the design. simple Jpeg - won't work there. The rest of the pages I don't really care. However, the same header are on all of the pages, so if it will work on first page - it will work on the rest of the site.

Thanks.

Triumph (not verified)
Anonymous's picture
Guru

OK. Simple fix. Try adding

OK. Simple fix. Try adding z-index: 50; to #menu dl

Explanation: setting wmode to window makes the browser draw it on top of everything else. Setting it to transparent or opaque allows other items on top of it but since it came after the menu it would be drawn over the absolutely positioned menu. Adding a z-index for the menu that is higher than the z-index for the flash allows it to be over top of it. Something like that.

syargulik
Offline
newbie
USA
Last seen: 11 years 37 weeks ago
USA
Timezone: GMT-8
Joined: 2009-02-07
Posts: 8
Points: 0

nope

I have added it to #menu dl. And it did not work. :?

Triumph (not verified)
Anonymous's picture
Guru

syargulik wrote:I have added

syargulik wrote:

I have added it to #menu dl. And it did not work. :?

Hmm, it fixed the problem in FF, Opera and Safari but not IE. When I saw it worked for the others I forgot to check IE.

Well, hmmm. Uno momento.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

syargulik wrote:I do think

syargulik wrote:

I do think that the first index page at least needs flash. It has big flash banner and it is the part of the design. simple Jpeg - won't work there.

No one said anything about a simple jpeg.
I am pretty sure I mentioned using javascript to bring it to life
http://malsup.com/jquery/cycle/

it does the fade in and out, among many other things that are pretty fancy.
But if you really must stick with flash, i am sure triumph can help you figure it out

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Triumph (not verified)
Anonymous's picture
Guru

Maybe try adding z-index:

Maybe try adding z-index: 0; to #positionWrapper ?

Maybe. I can't do the edits in IE. I can only see changes that I make in Opera.

Please explain why you are using a javascript to place your flash object on the page.

Triumph (not verified)
Anonymous's picture
Guru

Deuce wrote:syargulik

Deuce wrote:
syargulik wrote:

I do think that the first index page at least needs flash. It has big flash banner and it is the part of the design. simple Jpeg - won't work there.

No one said anything about a simple jpeg.
I am pretty sure I mentioned using javascript to bring it to life
http://malsup.com/jquery/cycle/

it does the fade in and out, among many other things that are pretty fancy.
But if you really must stick with flash, i am sure triumph can help you figure it out

Yeah, I was thinking he didn't get it. I'd dump this flash so fast Adobe would feel a disturbance in the Force. It's just so unnecessary and the javascript can do SOOO much more than flash it's almost silly. Feel free to help Deuce. I'm going to split.

syargulik
Offline
newbie
USA
Last seen: 11 years 37 weeks ago
USA
Timezone: GMT-8
Joined: 2009-02-07
Posts: 8
Points: 0

does not help. Yeah and IE

does not help. Yeah and IE is the only browser I have this problem with... Why most of the people use it? it sucks. Smile

That's what flash does when ou save swf. it creates swfobject.js or in new version it is called AC_RunActiveContent.js and is used to dynamically generate the necessary object and embed tags necessary for the browser to display your Flash movie.

I don't actually get the whole point why, but i was just taught to do embed flash that way.

syargulik
Offline
newbie
USA
Last seen: 11 years 37 weeks ago
USA
Timezone: GMT-8
Joined: 2009-02-07
Posts: 8
Points: 0

about plugin

Yeah now I get what you were trying to say. I didn't read till the end.

Yeah I probably try to replace it with cycle plugin...

But if you will find the way fix flash let me know. Thanks a tone for your time.

Triumph (not verified)
Anonymous's picture
Guru

syargulik wrote:does not

syargulik wrote:

does not help. Yeah and IE is the only browser I have this problem with...

No, it was happening in FF, Opera and Safari before you added the z-index to the #menu dl

syargulik
Offline
newbie
USA
Last seen: 11 years 37 weeks ago
USA
Timezone: GMT-8
Joined: 2009-02-07
Posts: 8
Points: 0

New problem.

hm. strange. it did work on my computer. :?
I try to do something different.

Can I ask you one more question? May be you know the solution for this:

here is the page:
http://www.mcg12.com/articles.php

I have problem in IE also. Before you look at it. I want to tell you that every single page on a sote has same header.php:

<!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" xml:lang="en" lang="en"><head><meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
 
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
 
		<script type="text/javascript" src="http://www.mcg12.org/javascript/oldie.js"></script>
				<?php if($graphic == "flash") { ?>
		<script type="text/javascript" src="http://www.mcg12.org/javascript/swfobject.js"></script>
		<script type="text/javascript">
			var flashvars = {};
			var params = {
			  WMode: "Transparent"
			};
			var attributes = {};
			swfobject.embedSWF("flash/flash.swf", "flash", "770", "219", "8.0.0", false, flashvars, params, attributes);
		</script>
		<?php } ?>
		<link rel="stylesheet" type="text/css" href="http://www.mcg12.org/css/style.css" />
		<?php if($graphic == "shop") { ?><link rel="stylesheet" type="text/css" href="http://www.mcg12.org/shop/templates/melchizedekTheme/style.css" /><?php } ?>
		<title>Церковь &quot;Мелхиседек&quot;</title>
		<meta name="description" content="Церковь Мелхиседек - город Сакраменто (штат Калифорния). Пасторы церкви - Виктор и Ольга Музычук" />
		<meta name="keywords" content="Government, Dominion of Melchizedek, Melchizedek church, Melchizedek priesthood, ьудсршяувул, vtk[bctltr, order of melchizedek, Wikipedia, Encounter, Encounter4u, Encounter God, Church, Muzichuk, Muzychuk, Homepage of Muzichuk, homepage of Muzychuk,  Victor & Olga Muzichuk, Advice, School of Leaders, G12, G-12, Г12, Г-12, G12 School of Leaders, GA300, Win, Consolidate, Disciple, Send, Pastor's advice, g12bookstore, bookstore, media, melchizedekmedia, мелхиседек медиа, Sacramento church, California, Церковь Мелхиседек", мелхіседек, вопросы, пожелания, Инкаунтер, что такое инкаунтер, видение g12, ведение g12, видение г12, ведение г12,  />
		<!--[if IE]><style type="text/css" media="screen">
			#positionWrapper{position:relative;top:-120px;left:0;width:100%;}
		</style><![endif]-->
	</head>
	<body>
    <script language=JavaScript>
<!--
 
 
var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if 
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers) 
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
 
document.oncontextmenu=new Function("return false")
// --> 
</script>
					<div id="wrapper">
		<script type="text/javascript">
 
		var timeout	= 500;
		var closetimer	= 0;
		var ddmenuitem	= 0;
 
		// open hidden layer
		function mopen(id)
		{	
			// cancel close timer
			mcancelclosetime();
 
			// close old layer
			if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 
			// get new layer and show it
			ddmenuitem = document.getElementById(id);
			ddmenuitem.style.visibility = 'visible';
 
		}
		// close showed layer
		function mclose()
		{
			if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
		}
 
		// go close timer
		function mclosetime()
		{
			closetimer = window.setTimeout(mclose, timeout);
		}
 
		// cancel close timer
		function mcancelclosetime()
		{
			if(closetimer)
			{
				window.clearTimeout(closetimer);
				closetimer = null;
			}
		}
 
		// close layer when click-out
		document.onclick = mclose;
		</script>
		<div id="headerbg"></div>
		<div id="graphicWrapper"><div id="<?php if($graphic == "flash") { echo "graphic"; } else { echo "graphicSmall"; } ?>"></div></div>
		<div id="positionWrapper"><div id="widthWrapper">
			<div id="header">
				<div id="headerLogo"><a href="http://www.mcg12.org/index.php"><img alt="Melchizedek Logo" src="http://www.mcg12.org/images/logo.gif" /></a></div>
				<div>
					<span id="tab1"><a href="http://www.mcg12.org/shopunderconstruction.html"><img alt="Online Store" src="http://www.mcg12.org/images/nav_04.gif" /></a></span>
					<span id="tab2"><a href="http://www.visiong12.com"><img alt="Official G12 Site" src="http://www.mcg12.org/images/nav_05.gif" /></a></span>
				</div>
				<div id="slogan"><img alt="Win. Consolidate. Disciple. Send." src="http://www.mcg12.org/images/slogan.gif" /></div>
				<div id="navbar">
					<div id="navbarWrapper">
						<ul id="navbarUl">
							<?php if($graphic == "shop") { include "shop/headerNavbar.php"; } else { ?>
							<li><a href="http://www.mcg12.org/church.php" onmouseover="mopen('m1')" onmouseout="mclosetime()">Церковь</a>
						        <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
							        <!--<a href="#">&raquo;&nbsp;&#1053;&#1072;&#1096;&#1077; &#1074;&#1080;&#1076;&#1077;&#1085;&#1080;&#1077;</a>
							        <a href="#">&raquo;&nbsp;&#1057;&#1083;&#1091;&#1078;&#1077;&#1085;&#1080;&#1103; &#1094;&#1077;&#1088;&#1082;&#1074;&#1080;</a>-->
							        <a href="http://www.mcg12.org/church_all.php">&raquo;&nbsp;&#1053;&#1072;&#1096;&#1080; &#1094;&#1077;&#1088;&#1082;&#1074;&#1080;</a>
							        <a href="http://www.mcg12.org/schedule.php">&raquo;&nbsp;&#1056;&#1072;&#1089;&#1087;&#1080;&#1089;&#1072;&#1085;&#1080;&#1077; &#1089;&#1083;&#1091;&#1078;&#1077;&#1085;&#1080;&#1081;</a>
							        <a href="http://encounter4u.net">&raquo;&nbsp;&#1048;&#1085;&#1082;&#1072;&#1091;&#1085;&#1090;&#1077;&#1088;&#1099;</a>
						        </div>
						    </li>
						    <li><a href="http://www.mcg12.org/advice.php"  onmouseover="mopen('m2')" onmouseout="mclosetime()">Советы</a>
                            	<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                                 <a href="http://www.mcg12.org/advice.php">&raquo;&nbsp;Вопрос-ответ</a>
                                  <a href="http://www.mcg12.org/adviceform.php">&raquo;&nbsp;Задать вопрос пастору</a>
                                </div>
                            </li>
						    <li><a href="http://www.mcg12.org/school_of_leaders.php" onmouseover="mopen('m3')" onmouseout="mclosetime()">Школа лидеров </a>
						        <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
							        <a href="http://www.mcg12.org/s_about.php">&raquo;&nbsp;&#1054; &#1096;&#1082;&#1086;&#1083;&#1077;</a>
							        <a href="http://www.mcg12.org/s_registration.php">&raquo;&nbsp;&#1056;&#1077;&#1075;&#1080;&#1089;&#1090;&#1088;&#1072;&#1094;&#1080;&#1103;</a>
									<a href="http://www.mcg12.org/s_lessons.php">&raquo;&nbsp;&#1059;&#1088;&#1086;&#1082;&#1080; &#1080; &#1090;&#1077;&#1089;&#1090;&#1099;</a>
									<a href="http://www.mcg12.org/s_payments.php">&raquo;&nbsp;&#1054;&#1087;&#1083;&#1072;&#1090;&#1072;</a>
									<a href="http://tnzlead.net" target="_blank" >&raquo;&nbsp;&#1055;&#1086;&#1076;&#1088;&#1086;&#1089;&#1090;&#1082;&#1086;&#1074;&#1072;&#1103; &#1096;&#1082;&#1086;&#1083;&#1072;</a>
						        </div>
						    </li>
							<li><a href="http://www.mcg12.org/news.php">Новости/события</a></li>
							<li><a href="http://www.mcg12.org/media.php" onmouseover="mopen('m7')" onmouseout="mclosetime()">Медиа</a>
							    <div id="m7" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
							        <a href="http://www.mcg12.org/articles.php">&raquo;&nbsp;&#1057;&#1090;&#1072;&#1090;&#1100;&#1080; &#1080; &#1087;&#1088;&#1086;&#1087;&#1086;&#1074;&#1077;&#1076;&#1080;</a>
							        <a href="http://www.mcg12.org/media.php">&raquo;&nbsp;&#1040;&#1091;&#1076;&#1080;&#1086; &#1080; &#1074;&#1080;&#1076;&#1077;&#1086; </a>
								</div>
							</li>		
							<li><a href="http://mcg12.org/underconstruction.html" target="_blank">Молодежное служение </a></li>
							<li><a href="http://www.mcg12.org/contact.php" onmouseover="mopen('m8')" onmouseout="mclosetime()">Контакты</a>
								<div id="m8" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
							        <a href="http://www.mcg12.org/contact.php">&raquo;&nbsp;Контактная Форма</a>
							        <a href="http://www.mcg12.org/feedback.php">&raquo;&nbsp;Обратная Связь</a>
							  </div>
							</li>
							<?php } ?>
						</ul>
						<div class="clear"></div>
					</div>
				</div>
			</div>			
			<div id="content">

None of the pages have this problem.

When I have added this content to the page

$page = $_GET['page'];
 
if(isset($page))
{
		if($page == "priorities")
		{
		include 'art_priorities.txt';
		}
		elseif($page == "success")
		{
		include  'art_success.txt';
		}
		elseif($page == "victory")
		{
		include  'art_victory.txt';
		}
		elseif($page == "relationships")
		{
		include  'art_relationships.txt';
		}
		else
		{
		include  'art_all.txt';
		}
}
 
if(!isset($page))
{
include('art_all.txt');
}
	  ?>

It messed up the header.

PhP code has no problems there. I guess... It shows in all of the browsers correctly.

Why header is messed up in IE? What do you think?