[OPGELOST] Menu moet toch uitklapbaar

Loupol · Post by **Loupol** » Thu May 13, 2010 2:06 pm

Hoi Evert,

Als ik jouw link in IE 7 bekijk werken de submenu's niet. In IE 8 en de "goede browsers" wel.
Nog een laatste..ik vind dit stukje onderaan in het CSS vreemd.

Code: Select all

 /* --> */
    </style>
    <!--[if lt IE 7]>
    <style media="screen" type="text/css">
    .col1 {
	    width:100%;
	}
    </style>
    <![endif]-->

Ikzelf zou dat zo niet doen. Heb je dit al eens weggehaald?

groet,
Cees

Loupol · Post by **Loupol** » Thu May 13, 2010 2:20 pm

Hoi Evert,

Ik denk dat dit de oorzaak is:

Als je met IE 7 naar je menu kijkt op de pagina die je opgeeft, dan zul je zien als je de meest rechtse tab "voor kinderen" aanwijst, dat het submenu deels getoond wordt. Ik vermoed dat de volgorde van je div's niet klopt bij IE 7 waardoor je menu achter de div van je content blok verdwijnt. Misschien z-index instellen en ik heb ook al eens gemerkt dat de div id 'menuwrapper' narigheid kan veroorzaken.

Het zal nog even puzzelen zijn, maar ik ben ervan overtuigd dat je het in deze hoek moet zoeken.

succes!

groet,

Cees

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

Het zit inderdaad ergens in de CSS.
Z-index gebruik ikzelf niet, staat wel in ce CSS van het menu maar er staat duidelijk bij dat je daar niet aan moet rotzooien...

Ik heb ergens position: relative veranderd zodat ik nu al wel iets zie, maar de submenu's verdwijnen als je op een subitem wilt hoveren.
Ik word er horensdol van. %@*&! Internet Explorer!

Hover maar eens over alle menuitems heen. Je zult zien dat de onderkant er soms niet aanzit, en dat bovendien de submenuitems niet bereikbaar zijn.
http://kidsfoodcare.nl/index.php?page=voor-kinderen

Groeten Evert

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

Ik heb nu de site-opmaak-template wat veranderd (met bijbehorende CSS).

Het menu is nu zichtbaar in IE maar... zoals je ziet op mijn site is het sub-menu transparant en niet klikbaar. Wie weet hoe dit kan?!?

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

Please....!

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

BIJNA OPGELOST!

Ik heb de template zo aangepast dat het content area (tussen de header en de footer) in een aparte div zit die een z-index beneden de nul heeft.
Hierdoor werkt het menu dus wel in IE en FF etc, maar de links die in de contentarea staan die zijn nu niet meer klikbaar. Wie weet de oplossing?

Hier even mijn template en CSS

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>

<!--********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'}
          </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='Voor kinderen'}
		</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 -->




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

CSS:

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;
    }
	a {
    	color:#369;
        z-index:1;
	}
	a:hover {
		color:#fff;
		background:#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;
	}
	/* Header styles */
	
    #header {
        clear:both;
        float:left;
        width:100%;
    }
	
	#topheader {
	    clear:both;
        float:left;
        width:100%;
		height: 18px;
		background: #00a8db;
    }

#menu {
position: absolute;
top: 106px;
left:260px;
height: 25px;
}
	
	#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;
border: 0px solid red;
clear: both;
position: relative;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
padding-bottom: 10px;
z-index:-1;
}

#middle_area a {
z-index: 20;
}

#main_left_column {
width: 180px;
float: left;
border: 0px solid blue;
position: relative;
}

#main_right_column {
width: 600px;
border: 0px solid yellow;
float: right;
left: 200px;
}


	/* 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;
}

Evert B. · Post by **Evert B.** » Sun May 23, 2010 11:55 am

OPGELOST!

Er zijn twee oplossingen voor mijn probleem:

1. (afkomstig van Rolf):
Voeg onderstaande code toe aan je algemene metadata om IE te denken dat het een andere versie is.

Code: Select all

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

2. (afkomstig van Dr. CSS)
Verwijder alle position van de diverse div's uit het styleshee en zet alles op zijn plaats met margins en floats.

Beiden werken uitstekend, ik ben er super blij mee!

Thanks voor het meedenken allemaal!

Evert

CMS Made Simple Forums

[OPGELOST] Menu moet toch uitklapbaar

Re: Menu moet toch uitklapbaar

Re: Menu moet toch uitklapbaar

Re: Menu moet toch uitklapbaar

Re: Menu moet toch uitklapbaar

Re: Menu moet toch uitklapbaar

Re: [ BIJNA opgelost...] Menu moet toch uitklapbaar