[SOLVED] NCclean menu transparrant in IE, works fine in FF

Evert B. · Post by **Evert B.** » Thu May 13, 2010 7:42 pm

Hello,

I have trouble working out my menu. Please view the following link in IE and you'll see that the menu's subitems are not clickable and are transparent.
Please let me know if anyone knows how I can solve this.
It works fine in FF.

http://kidsfoodcare.nl/index.php?page=voor-kinderen

Besides the images I did not change anything on the menu's template or stylesheet.

Thanks in advance - Evert

Evert B. · Post by **Evert B.** » Thu May 13, 2010 9:13 pm

Please know that this concerns the section 'Voor Kinderen' only. This is the section that uses the page-template that I wish to use as the basic for the whole site. The other sections use templates that will be changed into the new one.

I am fighting with this for hours and hours now... Any help is very appreciated.

Thanks - Evert

Evert B. · Post by **Evert B.** » Fri May 14, 2010 1:48 am

EDIT new tempate and stylesheet:

TEMPLATE:

Code: Select all

{process_pagedata}
<!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" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}

<!--[if IE 6]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
{* The above JavaScript is required for Menu - NCleanBlue-css to work in IE6 *}


{* IE6 png fix *}
{literal}
<!--[if IE 6]>
<__script__ type="text/javascript"  src="uploads/NCleanBlue/js/ie6fix.js"></__script>
<__script__ type="text/javascript">
 // argument is a CSS selector
 DD_belatedPNG.fix('.sbar-top,.sbar-bottom,.main-top,.main-bottom,#version');
</__script>
<style type="text/css">
/* enable background image caching in IE6 */
html {filter:expression(document.execCommand("BackgroundImageCache", false, true));} 
</style>
<![endif]-->
{/literal}

</head>
</__body>



<div id="pagewrapper">

<!--********START HEADER********-->

<div id="header">
	<div id="header_middle">
	<div id="logo"></div>
        <div id="header-topmenu">
         {menu template='menutemplate_test' number_of_levels="1" }
        </div> 
	<div id="pictos"></div>
	<h1>Gezonde voeding op kinderdagverblijf en BSO</h1>
        
         <div id="menu">
          <div class="page-menu util-clearfix">
          {menu template='cssmenu_ulshadow.tpl' start_level='2' number_of_levels="1"} 
          </div>
         
         </div>
	</div> <!-- einde div header_middle -->
	
</div> <!-- einde div header -->
<!--********EINDE HEADER********-->

<!--********START MIDDEN GEBIED********-->
<div id="middle_area"> <!-- start middle area -->

		<div id="main_left_column"> <!-- start main_left_column -->

			{global_content name='ouders'}
		</div> <!-- einde main_left_column -->
	
		<div id="main_right_column"> <!-- start main_right_column -->
		<h2>{title}</h2>
				{content}
		</div> <!-- einde main_right_column -->
	
</div> <!-- einde middle area -->
</div> <!--einde pagewrapper -->



<!--********START FOOTER********-->
<div id="footer">
	<div id="footer_middle">
{global_content name='footer'} 
Footer
	</div> <!-- einde footer_middle -->
</div>
<!--********EINDE FOOTER********-->


<__script__ src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</__script>
<__script__ type="text/javascript">
_uacct = "UA-1848067-8";
urchinTracker();
</__script>
<__body>
</__html>

STYLESHEET:

Code: Select all

* {
	margin: 0px;
	padding: 0px;
} 

    /* General styles */
body {
        margin: 0px 0px 0px 0px;
        padding: 0px;
        border:0;			/* This removes the border around the viewport in old versions of IE */
        width:100%;
	font-size:90%;
        font-family: verdana, sans-serif;
	background: url(uploads/images/bg_banner.jpg) repeat-x; /* Rolf: background image over de volledige breedte */
}

a {
    	color:#369;
	text-decoration:underline;
}

a:hover {
	color:#369;
	text-decoration:none;
}

h1, h2, h3 {
        margin:.8em 0 .2em 0;
        padding:0;
}

p {
        margin:.4em 0 .8em 0;
        padding:0;
    }

img {
	margin:10px 0 5px;
}

#pagewrapper {
width: 800px;
/*border: 1px solid #00a8db; rolf */
margin-left: auto;
margin-right: auto;
}

	/* Header styles */
	
#header {
        clear:both;
        /* float:left; */
        width:800px;
}
	
#topheader {
        clear:both;
        float:left;
        /*width:100%;*/
	height: 18px;
	background: #00a8db;
}

#menu {
        position: absolute;
        top: 106px;
        left:260px;
        height: 25px;
        z-index: 10;
}

#header_middle {
	width: 800px;
	/*margin-left:auto;   */  /*toegevoegd EJB*/
	/*margin-right:auto; */
	position:relative;
	height: 140px;       /*met 93px komen lijntjes overeen*/
}
	
#header {
	border-bottom:1px solid #00a8db;
	background-image: url('uploads/images/bg_banner.jpg');
}
	
#logo {
	position: absolute;
	left: 0px;
	top: -2px;
	height:139px;
	width: 258px;
	background-image: url('uploads/images/bg_banner22kopie.jpg');
}
        
#header-topmenu {
	position: absolute;
	height: 20px;
	width: 500px;
	right: 0px;
	top: 10px;
        font-size: 10px;
        text-decoration: none;
}
	
#pictos {
	position: absolute;
	height: 80px;
	width: 492px;
	right: 0px;
	top: 30px;
	background-image: url('uploads/images/site/horizontaal dagritme1kopie.png');
}
	
#header h1 {
	position: absolute;
	top: 99px;
	left: 10px;
	font-size: 12px;
	font-family: candara, verdana;
	width: 250px;
	text-align: center;
}
	

/* ***** midden gebied ***** */

#middle_area {
width: 800px;
clear: both;
position: relative;
/*margin-left: auto; */
/*margin-right: auto; */
padding-top: 10px;
padding-bottom: 10px;
z-index:0;
}

#main_left_column {
width: 180px;
position: relative;
float:left;
}

#main_right_column {
width: 600px;
position:relative;
float: left;
z-index:0;
}

	/* Footer styles */
#footer {
        clear:both;
        float:left;
        width:100%;
	height: 97px;
	border-top:2px solid #00a8db;
	border-bottom:0px solid #00a8db;
	background-image: url('uploads/images/footer_img2.png');
}
	
#footer_middle {
	width: 800px;
	margin-left:auto;    /*toegevoegd EJB*/
	margin-right:auto;
        text-align: center;
        font-size: 10px;
}
	
#footer p {
        padding:10px;
        margin:0;
}

.home {
height: 141px;
border-bottom: 1px dashed #99d9ea;
padding-top: 10px;
}

No more unneccecary postioning...

Evert B. · Post by **Evert B.** » Fri May 14, 2010 8:44 am

By adding 'z-index:-1;' to the middle area (between header and footer) I managed to make the submenu clickable in both FF and IE. That works fine now.

But the downside is this:
Now the textlinks in the middle are are not clickable anymore, because of the z-index. Who knows a way to solve this?

See the tekstlinks not working, and the menu working fine below:
http://kidsfoodcare.nl/index.php?page=p ... ijk-advies

Dr.CSS · Post by **Dr.CSS** » Sat May 15, 2010 3:54 am

Your biggest problem is overuse of position: only when you have to have it even then you have to be careful/good...

Most times the use of z-index is done in pairs...

Evert B. · Post by **Evert B.** » Sun May 16, 2010 12:51 pm

Hi Dr. CSS,

Thanks for thinking with me.

Me and Rolf (from Dutch forum) have been looking and trying extensively into this. Rolf thinks the menu does not work because the header and middle area are not inside one pagewrapper. So that IE mixes everything up that way because the menu drops down on the middle area.

The only thing I changed in the menu stylesheet/or template is nothing, it's just another image!. So this means it has to be something with the page template doesnt it?

I am not sure what you mean about z-indexes usually being used in pairs.

Any help is appreciated, the menu is really nice I hope somehow I can make it work properly.

Thanks - Evert

Dr.CSS · Post by **Dr.CSS** » Sun May 16, 2010 8:15 pm

z-index in pairs means if you have trouble with one thing laying over another, give the one below a low # like 200 then the one on top 2000...

Like I said before you are using position:absolute when there is no need for it...

I've made many hundreds of templates and have used it maybe a dozen times, and mostly in the header...

Evert B. · Post by **Evert B.** » Mon May 17, 2010 6:58 am

Dr.CSS wrote: z-index in pairs means if you have trouble with one thing laying over another, give the one below a low # like 200 then the one on top 2000...

Like I said before you are using position:absolute when there is no need for it...

I've made many hundreds of templates and have used it maybe a dozen times, and mostly in the header...

Yes I know you are very experienced in making templates.
I have changed mine into a one with only postioning in the header, not in the middle area. I've updated my new template and stylesheet in my post above.

Nevertheless, it does not work. In fact also other menu's that drop down do not work in IE7.

I can't find out why?

Thanks for any help - Evert

Evert B. · Post by **Evert B.** » Wed May 19, 2010 5:43 pm

Ok, since the site is online, I have made a testpage which cannot be viewed from the menu, only by using the link below.
http://kidsfoodcare.nl/index.php?page=test_page

This testpage is the same as the template above, only the menu tag looks like:

Code: Select all

{menu template='cssmenu_ulshadow.tpl' start_level='1'}

Still, any help is much appreciated. I am stuck.

Thanks- Evert

Evert B. · Post by **Evert B.** » Fri May 21, 2010 9:14 am

If I am incomplete in my information please advice me what else to post here.

Dr.CSS · Post by **Dr.CSS** » Fri May 21, 2010 5:55 pm

Try removing all the position: from anything under he menu...

Evert B. · Post by **Evert B.** » Sun May 23, 2010 12:00 pm

Dr.CSS wrote: Try removing all the position: from anything under he menu...

Thanks Dr. CSS this did the trick!

Simultanously, Rolf gave me a work-around solution which also does the trick. Trick IE that it actually is an other version by adding the following code in the general metadata of the site.

Code: Select all

<meta http-equiv="X-UA-Compatible" content="IE=8" />

I have tested both options and they both work independently.

Thanks all - Evert

CMS Made Simple Forums

[SOLVED] NCclean menu transparrant in IE, works fine in FF

[SOLVED] NCclean menu transparrant in IE, works fine in FF

Re: NCclean menu transparrant in IE, works fine in FF

Re: NCclean menu transparrant in IE, works fine in FF

Re: NCclean menu transparrant in IE, works fine in FF

Re: NCclean menu transparrant in IE, works fine in FF

Re: NCclean menu transparrant in IE, works fine in FF

Re: NCclean menu transparrant in IE, works fine in FF

Re: NCclean menu transparrant in IE, works fine in FF

Re: NCclean menu transparrant in IE, works fine in FF

Re: NCclean menu transparrant in IE, works fine in FF

Re: NCclean menu transparrant in IE, works fine in FF

Re: [SOLVED] NCclean menu transparrant in IE, works fine in FF