CMS Made Simple Forums

Posted: **Tue Aug 26, 2008 2:25 pm**

Beste Allemaal,

Ik heb een website met het standaard horizontale css menu gebruikt. Nu doet het menu het in FF en IE7 wel alleen in IE6 niet, zie: http://nsv46.nl/new/

Ik heb het forum al afgezocht maar ik kon de oplossing niet vinden en ik hoop daarom of iemand mij hiermee kan helpen. In de bijlage heb ik nog een screenshot meegestuurd.

De volgende CSS code heb ik gebruikt:

Deze zit nog om de wrapper:

Code: Select all

.menu_custom {
	width:958px;
	height:21px;
	line-height:21px;
	margin:1px 0px 0px 0px;
	background:url(uploads/nsv/images/menu.jpg) repeat-x;
	border:1px solid #ff0000;
	font-size:11px;
	font-weight:bold;
}

Het menu:

Code: Select all

/* Start of CMSMS style sheet 'Navigation: CSSMenu - Horizontal' */
/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */

#menu_vert {
   margin-left: 1px;
   margin-right: 1px;
}

/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper { 
   /* Fix for Opera 8 */ 
   /*   overflow: hidden;  */ 
   border-bottom: 1px solid #ffffff;
   width: 100%;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li { 
   width: 200px;
}

/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
   list-style: none; 
   margin: 0px; 
   padding: 0px; 
}
#primary-nav ul { 
   position: absolute; 
   top: auto; 
   display: none; 
}
#primary-nav ul ul { 
   margin-top: 1px;
   margin-left: -1px;
   left: 100%; 
   top: 0px; 
}
	
#primary-nav li { 
   margin-left: -1px;
   float: left;
}
#primary-nav li li { 
   margin-left: 0px;
   margin-top: -1px;
   float: none; 
   position: relative; 
}

/* Styling the basic apperance of the menu elements */
#primary-nav a { 
   display: block; 
   margin: 0px; 
   padding: 0px 10px; 
   text-decoration: none; 
   color: #ffffff;
   height:22px;
}
#primary-nav li a { 
   border-right: 1px solid #ff0000;
   border-left: 1px solid #ff0000;
}
#primary-nav li li a { 
   border: 1px solid #ff0000;
height:15px;
}	
#primary-nav li, #primary-nav li.menuparent { 
   background-color: #; 
}
#primary-nav ul li, #primary-nav ul li.menuparent { 
   background-color: #fa572e; 
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive { 
   background-color: #f94215; 
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent, 
#primary-nav ul li.menuparenth { 
/* arrow for menuparents */
   background-image: url(images/cms/arrow.gif); 
   background-position: center right; 
   background-repeat: no-repeat;
   background-color: #fa572e; 
}

#primary-nav ul li.menuparent:hover { 
/* arrow for menuparents */
   background-image: url(images/cms/arrow.gif); 
   background-position: center right; 
   background-repeat: no-repeat;
   background-color: #f94215; 
}

/* Styling the apperance of menu items on hover */

#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 
   background-color: #f94215; 
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/* 
just add 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul ul ul,
for fourth level 
*/
#primary-nav ul, 
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
   display: none; 
}

/* add 
#primary-nav ul ul ul li:hover ul, 
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul { 
   display: block; 
}


/* IE Hacks */
#primary-nav li li { 
   float: left; 
   clear: both;
}
#primary-nav li li a { 
   height: 1%;
}
/* End of 'Navigation: CSSMenu - Horizontal' */

Posted: **Fri Aug 29, 2008 4:05 pm**

In de menu css verander #menuwrapper in dit:

Code: Select all

#menuwrapper { 
   position: relative; 
   width: 100%;
}

en voeg dit toe onderaan de css:

Code: Select all

/* IE6 hacks */
* html #primary-nav ul {
   margin-left: -100%;
   top: 23px;
}
* html #primary-nav a {
   display: inline-block;
}

Volgens mij moet het hiermee lukken..

Posted: **Mon Sep 15, 2008 11:46 am**

Sorry voor de late reactie maar ik was op vakantie :). Ik heb de code aangepast zoals je hebt voorgesteld en dit werkt inderdaad deels.

Het menu is nu wel zichtbaar op zijn plek alleen doen zich nu de volgende problemen voor waar ik niet uit kom (zie afbeelding). De rode rand is nu korter geworden en past zich aan de breedte van het woord. Ook doet het 3e niveau het niet meer in het menu. (te controleren in IE6 op http://nsv46.nl/new/)

Iemand een idee om dit weer op te lossen? In FF en IE7 blijkt wel alles nog te werken dus het is weer een IE6 probleem

Posted: **Sat Sep 20, 2008 11:10 am**

Ik ben er nog steeds niet uit, heeft niemand een idee?

Posted: **Sat Sep 20, 2008 2:31 pm**

Mhm dat gaat inderdaad niet helemaal goed.

Vervang de volgende IE6 hacks onderaan de CSS:

Code: Select all

* html #primary-nav ul {
   margin-left: -100%;
   top: 23px;
}
* html #primary-nav a {
   display: inline-block;
}

door deze IE6 hacks:

Code: Select all

* html #primary-nav ul {
   margin-left: -100%;
   top: 23px;
}
* html #primary-nav ul ul {
   top: 0px;
   left: 200%;
}
* html #primary-nav a {
   display: inline-block;
}
* html #primary-nav li li a {
   display: block;
}

Ik denk dat dit het IE6 probleem op lost.

Posted: **Sat Sep 20, 2008 3:02 pm**

Dit lost inderdaad het probleem op!!

Ik zit alleen nu nog met een schoonheidsfoutje, onderin het menu zit nu een witte lijn (zie afbeelding vorige reply hierboven).

Enig idee hoe ik dat nog weg krijg? Ik heb al geprobeerd om bij * html #primary-nav a de height erbij te zetten maar dit haalt niets uit.

In elk geval alvast bedankt voor je hulp!

Posted: **Sat Sep 20, 2008 3:19 pm**

Code: Select all

#menuwrapper { 
   /* Fix for Opera 8 */ 
   /*   overflow: hidden;  */ 
   border-bottom: 1px solid #ffffff;
   position: relative; 
   width: 100%;
}

Verwijder de border-bottom en refresh

Posted: **Sat Sep 20, 2008 4:51 pm**

Die heb ik er inderdaad zelf ingezet. Helemaal vergeten, bedankt!

CMS Made Simple Forums

[Opgelost] Horizontal menu probleem IE6

[Opgelost] Horizontal menu probleem IE6

Re: Horizontal menu probleem IE6

Re: Horizontal menu probleem IE6

Re: Horizontal menu probleem IE6

Re: Horizontal menu probleem IE6

Re: Horizontal menu probleem IE6

Re: Horizontal menu probleem IE6

Re: Horizontal menu probleem IE6