[Solved] Menu doesn't work on IE

Pépou · Post by **Pépou** » Thu Aug 07, 2008 7:24 am

Hello,

I've just noticed that my menu is not working properly on internet explorer. On safari or firefox, the menu works perfectly.
You can see what I mean here :
- menu on firefox : http://sd-14692.dedibox.fr/pepou/images/Capture-1.jpg
- menu on IE : http://sd-14692.dedibox.fr/pepou/images/Capture.jpg

Here is my website : http://www.nice-anatomie.fr/

Here is my css sheet :

/*

terrafirma1.0 by nodethirtythree design

http://www.nodethirtythree.com

*/

*

{

padding: 0px;

margin: 0px;

}

body

{

background: #F9F9F7 url(uploads/TerraFirma/a1.gif) repeat-x;

font-size: 11px;

font-family: "trebuchet ms", helvetica, sans-serif;

color: #8C8C73;

line-height: 18px;

}

a

{

color: #FF7800;

text-decoration: underline;

}

a:hover

{

text-decoration: none;

}

sup

{

font-size: 0.5em;

}

p

{

margin-bottom: 14px;

text-align: justify;

}

img.picA

{

position: relative;

top: -2px;

background: url(uploads/TerraFirma/a47.gif) no-repeat;

width: 76px;

height: 74px;

padding: 8px;

}

img.picB

{

position: relative;

top: -2px;

background: url(uploads/TerraFirma/a26.gif) no-repeat;

width: 146px;

height: 75px;

padding: 7px;

}

img.floatleft

{

float: left;

margin: 0px 14px 3px 0px;

}

ul.linklist

{

list-style: none;

}

ul.linklist li

{

border-top: solid 1px #EEEEEE;

padding-top: 5px;

margin: 5px 0px 0px 0px;

}

ul.linklist li.first

{

border-top: 0px;

margin-top: 0px;

padding-top: 0px;

}

#upbg

{

position: absolute;

top: 0px;

left: 0px;

background: #fff url(uploads/TerraFirma/upbg.gif) no-repeat;

width: 747px;

height: 264px;

z-index: 1;

}

#outer

{

position: relative;

width: 747px;

margin: 0 auto;

background: #fff url(uploads/TerraFirma/abg.gif) repeat-y;

}

#inner

{

position: relative;

padding: 13px 30px 13px 30px;

z-index: 2;

}

#header

{

position: absolute;

top: 0px;

left: -104px;

background: url(uploads/TerraFirma/a8.gif) no-repeat;

width: 180px;

height: 309px;

color: #fff;

padding-left: 20px;

}

#header span

{

font-weight: normal;

}

#header h1

{

position: absolute;

font-size: 23px;

letter-spacing: -1px;

top: 30px;

height: 128px;

}

#header h2

{

position: absolute;

font-size: 10px;

font-weight: normal;

color: #FCE2CA;

top: 51px;

}

#header sup

{

color: #FCE2CA;

}

#splash

{

position: absolute;

right: 30px;

background: #EAEAE2 url(uploads/TerraFirma/a10.jpg) no-repeat;

width: 632px;

height: 128px;

}

/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */

#menu_vert {
margin-left: 1px;
margin-right: 1px;
font-size: 9pt
}

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

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper {
/* Fix for Opera 8 */
/* overflow: hidden; */
background: #46461F url(uploads/TerraFirma/a16.gif) repeat-x;
border-bottom: 0px solid #C0C0C0;
width: 100%;
}

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

/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
list-style: none;
margin: 134px 0px 20px 0px;
padding: 0px 20px 0px 0px;
}
#primary-nav ul {
position: absolute;
top: 42px;
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: 5px 10px;
text-decoration: none;
color: #FFFFFF;
position: relative;
}
#primary-nav li a {
border-right: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
}
#primary-nav li li a {
border: 1px solid #C0C0C0;
}
#primary-nav li, #primary-nav li.menuparent {
background: #46461F url(uploads/TerraFirma/a16.gif) repeat-x;
}

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

#primary-nav li.menuactive {
background: #46461F url(uploads/TerraFirma/a16.gif) repeat-x;
}

/* 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.menuparent:hover,
#primary-nav ul li.menuparenth {
/* arrow for menuparents */
background-image: url(images/cms/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}

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

/* 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:hover ul ul ul,
#primary-nav li:hover ul ul ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
display: none;
}
#primary-nav li.menuparenth ul ul ul {
display: none;
}
#primary-nav li.menuparenth ul ul 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 ul ul ul li:hover ul,
#primary-nav ul ul 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;
}
#primary-nav ul ul ul li.menuparenth ul {
display: block;
}
#primary-nav ul ul ul ul li.menuparenth ul {
display: block;
}

/* IE Hacks */
#primary-nav li li {
float: left;
clear: both;
}
#primary-nav li li a {
height: 1%;
}

#date

{

position: absolute;

top: 0px;

line-height: 52px;

color: #BDBDA2;

right: 30px;

font-weight: bold;

font-size: 12px;

letter-spacing: -1px;

}

#secondarycontent

{

position: relative;

width: 180px;

float: right;

}

#secondarycontent h3

{

position: relative;

top: 4px;

font-size: 16px;

line-height: 25px;

color: #656551;

letter-spacing: -1px;

background: url(uploads/TerraFirma/a22.gif) bottom repeat-x;

padding: 0px 0px 10px 10px;

margin-bottom: 20px;

}

#secondarycontent .content

{

padding: 0px 10px 0px 10px;

margin-bottom: 20px;

}

#primarycontent

{

position: relative;

width: 480px;

float: left;

}

#primarycontent h3

{

position: relative;

top: 4px;

font-size: 18px;

line-height: 25px;

color: #656551;

letter-spacing: -1px;

background: url(uploads/TerraFirma/a22.gif) bottom repeat-x;

padding: 0px 0px 10px 15px;

margin-bottom: 20px;

}

#primarycontent .content

{

padding: 0px 15px 0px 15px;

margin-bottom: 20px;

}

#primarycontent .post

{

margin-bottom: 30px;

}

#primarycontent .post .header

{

position: relative;

}

#primarycontent .post .date

{

position: absolute;

right: 15px;

top: 0px;

line-height: 35px;

color: #AFAFA4;

font-weight: bold;

}

#primarycontent .post .content

{

margin-bottom: 0px;

}

#primarycontent .post .footer

{

position: relative;

top: -10px;

background: url(uploads/TerraFirma/a33.gif) repeat-x;

height: 64px;

}

#primarycontent .post .footer ul

{

list-style: none;

position: absolute;

right: 15px;

bottom: 15px;

}

#primarycontent .post .footer ul li

{

display: inline;

line-height: 14px;

padding-left: 17px;

margin-left: 25px;

background-repeat: no-repeat;

background-position: 0px 2px;

}

#primarycontent .post .footer ul li.printerfriendly

{

background-image: url(uploads/TerraFirma/a41.gif);

}

#primarycontent .post .footer ul li.comments

{

background-image: url(uploads/TerraFirma/a36.gif);

}

#primarycontent .post .footer ul li.readmore

{

background-image: url(uploads/TerraFirma/a38.gif);

}

#footer

{

position: relative;

clear: both;

height: 66px;

text-align: center;

line-height: 66px;

background-image: url(uploads/TerraFirma/a50.gif);

color: #A8A88D;

}

#footer a

{

color: #8C8C73;

}

What can I do to solve this problem ??
Thank you in advance for your help.

Dr.CSS · Post by **Dr.CSS** » Thu Aug 07, 2008 1:21 pm

All drop down/flyout menus need the IE6 JS, look at default CSS Menu page templates and get the call from it, in ...

That is why there is the strange menuh and other calls with h on the end in the primary-nav calls...

Pépou · Post by **Pépou** » Fri Aug 08, 2008 4:56 pm

Thank you for your help. But It didn't change anything. My menu is still not working with IE.

Here is my template :

{sitename} - {title}
{metadata}
{stylesheet}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{literal}

=b){nw=b+"px";}if(w

#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}

{/literal}

{* The above JavaScript is required for CSSMenu to work in IE *}

{menu template='TerraFirma'}

{breadcrumbs starttext='Vous êtes ici' root='Home' delimiter='»'} {content}

Navigation
{menu template='minimal_menu.tpl' start_level='1' collapse='1'}

News

{cms_module module="news"}

Institut d'anatomie normale | Université de Nice Sophia-Antipolis | Faculté de Médecine de nice | Webmaster Yannick Walrave

var pkBaseURL = (("https:" == document.location.protocol) ? "https://sd-14692.dedibox.fr/webmaster/piwik/" : "http://sd-14692.dedibox.fr/webmaster/piwik/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));

Web analytics

Dr.CSS · Post by **Dr.CSS** » Fri Aug 08, 2008 5:53 pm

It's not that your menu don't work, well at least now, it just that it doesn't look right in IE6...

I would give the div around the menu a height and take the margin/padding back to 0px in primary-nav, primary-nav ul, and put 0px in top: 42px, you shouldn't use the primary-nav to make adjustments until you get the div around it in place...

This is not changed but easier to read and is better to have as little white space in CSS as possible...

/* Start of CMSMS style sheet 'TerraFirma: TerraFirma' */
/*terrafirma1.0 by nodethirtythree designhttp://www.nodethirtythree.com*/
* {
padding: 0px;
margin: 0px;
}
body {
background: #F9F9F7 url(uploads/TerraFirma/a1.gif) repeat-x;
font-size: 11px;
font-family: "trebuchet ms", helvetica, sans-serif;
color: #8C8C73;
line-height: 18px;
}
a {
color: #FF7800;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
sup {
font-size: 0.5em;
}
p {
margin-bottom: 14px;
text-align: justify;
}
img.picA {
position: relative;
top: -2px;
background: url(uploads/TerraFirma/a47.gif) no-repeat;
width: 76px;
height: 74px;
padding: 8px;
}
img.picB {
position: relative;
top: -2px;
background: url(uploads/TerraFirma/a26.gif) no-repeat;
width: 146px;
height: 75px;
padding: 7px;
}
img.floatleft {
float: left;
margin: 0px 14px 3px 0px;
}
ul.linklist {
list-style: none;
}
ul.linklist li {
border-top: solid 1px #EEEEEE;
padding-top: 5px;
margin: 5px 0px 0px 0px;
}
ul.linklist li.first {
border-top: 0px;
margin-top: 0px;
padding-top: 0px;
}
#upbg {
position: absolute;
top: 0px;
left: 0px;
background: #fff url(uploads/TerraFirma/upbg.gif) no-repeat;
width: 747px;
height: 264px;
z-index: 1;
}
#outer {
position: relative;
width: 747px;
margin: 0 auto;
background: #fff url(uploads/TerraFirma/abg.gif) repeat-y;
}
#inner {
position: relative;
padding: 13px 30px 13px 30px;
z-index: 2;
}
#header {
position: absolute;
top: 0px;
left: -104px;
background: url(uploads/TerraFirma/a8.gif) no-repeat;
width: 180px;
height: 309px;
color: #fff;
padding-left: 20px;
}
#header span {
font-weight: normal;
}
#header h1 {
position: absolute;
font-size: 23px;
letter-spacing: -1px;
top: 30px;
height: 128px;
}
#header h2 {
position: absolute;
font-size: 10px;
font-weight: normal;
color: #FCE2CA;
top: 51px;
}
#header sup {
color: #FCE2CA;
}
#splash {
position: absolute;
right: 30px;
background: #EAEAE2 url(uploads/TerraFirma/a10.jpg) no-repeat;
width: 632px;
height: 128px;
}
/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */
#menu_vert {
margin-left: 1px;
margin-right: 1px;
font-size: 9pt
}
/* The wrapper clears the floating elements of the menu */
/* Fix for Opera 8 */
.clearb {
clear: both;
}
#menuwrapper {
/* Fix for Opera 8 */
/* overflow: hidden;
*/
background: #46461F url(uploads/TerraFirma/a16.gif) repeat-x;
border-bottom: 0px solid #C0C0C0;
width: 100%;
}
/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li {
width: 200px;
z-index: 100;
}
/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
list-style: none;
margin: 134px 0px 20px 0px;
padding: 0px 20px 0px 0px;
}
#primary-nav ul {
position: absolute;
top: 42px;
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: 5px 10px;
text-decoration: none;
color: #FFFFFF;
position: relative;
}
#primary-nav li a {
border-right: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
}
#primary-nav li li a {
border: 1px solid #C0C0C0;
}
#primary-nav li, #primary-nav li.menuparent {
background: #46461F url(uploads/TerraFirma/a16.gif) repeat-x;
}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive {
background: #46461F url(uploads/TerraFirma/a16.gif) repeat-x;
}
/* 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.menuparent:hover, #primary-nav ul li.menuparenth {
/* arrow for menuparents */
background-image: url(images/cms/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
/* 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: #ff7800;
}
/* 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:hover ul ul ul, #primary-nav li:hover ul ul ul ul, #primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul {
display: none;
}
#primary-nav li.menuparenth ul ul ul {
display: none;
}
#primary-nav li.menuparenth ul ul 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 ul ul ul li:hover ul, #primary-nav ul ul 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;
}
#primary-nav ul ul ul li.menuparenth ul {
display: block;
}
#primary-nav ul ul ul ul li.menuparenth ul {
display: block;
}
/* IE Hacks */
#primary-nav li li {
float: left;
clear: both;
}
#primary-nav li li a {
height: 1%;
}
#date {
position: absolute;
top: 0px;
line-height: 52px;
color: #BDBDA2;
right: 30px;
font-weight: bold;
font-size: 12px;
letter-spacing: -1px;
}
#secondarycontent {
position: relative;
width: 180px;
float: right;
}
#secondarycontent h3 {
position: relative;
top: 4px;
font-size: 16px;
line-height: 25px;
color: #656551;
letter-spacing: -1px;
background: url(uploads/TerraFirma/a22.gif) bottom repeat-x;
padding: 0px 0px 10px 10px;
margin-bottom: 20px;
}
#secondarycontent .content {
padding: 0px 10px 0px 10px;
margin-bottom: 20px;
}
#primarycontent {
position: relative;
width: 480px;
float: left;
}
#primarycontent h3 {
position: relative;
top: 4px;
font-size: 18px;
line-height: 25px;
color: #656551;
letter-spacing: -1px;
background: url(uploads/TerraFirma/a22.gif) bottom repeat-x;
padding: 0px 0px 10px 15px;
margin-bottom: 20px;
}
#primarycontent .content {
padding: 0px 15px 0px 15px;
margin-bottom: 20px;
}
#primarycontent .post {
margin-bottom: 30px;
}
#primarycontent .post .header {
position: relative;
}
#primarycontent .post .date {
position: absolute;
right: 15px;
top: 0px;
line-height: 35px;
color: #AFAFA4;
font-weight: bold;
}
#primarycontent .post .content {
margin-bottom: 0px;
}
#primarycontent .post .footer {
position: relative;
top: -10px;
background: url(uploads/TerraFirma/a33.gif) repeat-x;
height: 64px;
}
#primarycontent .post .footer ul {
list-style: none;
position: absolute;
right: 15px;
bottom: 15px;
}
#primarycontent .post .footer ul li {
display: inline;
line-height: 14px;
padding-left: 17px;
margin-left: 25px;
background-repeat: no-repeat;
background-position: 0px 2px;
}
#primarycontent .post .footer ul li.printerfriendly {
background-image: url(uploads/TerraFirma/a41.gif);
}
#primarycontent .post .footer ul li.comments {
background-image: url(uploads/TerraFirma/a36.gif);
}
#primarycontent .post .footer ul li.readmore {
background-image: url(uploads/TerraFirma/a38.gif);
}
#footer {
position: relative;
clear: both;
height: 66px;
text-align: center;
line-height: 66px;
background-image: url(uploads/TerraFirma/a50.gif);
color: #A8A88D;
}
#footer a {
color: #8C8C73;
}
/* End of 'TerraFirma: TerraFirma' */

Pépou · Post by **Pépou** » Sat Aug 09, 2008 11:10 am

mark wrote: It's not that your menu don't work, well at least now, it just that it doesn't look right in IE6...

I would give the div around the menu a height and take the margin/padding back to 0px in primary-nav, primary-nav ul, and put 0px in top: 42px, you shouldn't use the primary-nav to make adjustments until you get the div around it in place...

I didn't really get where I've got to give the div around the menu a height.. ??

I'm sorry I'm not very good...

I really appreciate your help !! Thanks !

Dr.CSS · Post by **Dr.CSS** » Sat Aug 09, 2008 8:30 pm

Well you can change the border on the menu wrapper to 1px from 0px and you will see it goes all the way to the top almost, in Firefox, that is what IE is doing, it's sort of dumb that way...

Pépou · Post by **Pépou** » Sun Aug 10, 2008 1:44 pm

I'm really sorry but I don't understand what I have to change to put the menu at the right place. In fact when I put :

Code: Select all

/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
   list-style: none;
   margin: 0px;
   padding: 0px;
}

The menu goes at the top of the window.

Sorry...

sn3p · Post by **sn3p** » Sun Aug 10, 2008 2:40 pm

I made a few changes in your CSS, I think this should work for FF, IE6 & IE7:

Code: Select all

#menuwrapper {
	position: relative;
	display: block;
	background: #46461F url("uploads/TerraFirma/a16.gif") repeat-x;
	margin-top: 134px;
	width: 100%;
	z-index: 100;
}

#primary-nav li li {
	width: 200px;
}

#primary-nav, #primary-nav ul {
	list-style: none;
	padding: 0;
}

#primary-nav ul {
	position: absolute;
	top: 28px;
}

#primary-nav ul ul {
	position: absolute;
	top: 0px;
	left: 100%;
	margin-top: 1px;
	margin-left: -1px;
}

Pépou · Post by **Pépou** » Sun Aug 10, 2008 4:12 pm

Thank you very much sn3p and mark.
It's now working perfectly !!

CMS Made Simple Forums

[Solved] Menu doesn't work on IE

[Solved] Menu doesn't work on IE

Re: Menu doesn't work on IE

Re: Menu doesn't work on IE

Re: Menu doesn't work on IE

Re: Menu doesn't work on IE

Re: Menu doesn't work on IE

Re: Menu doesn't work on IE

Re: Menu doesn't work on IE

Re: Menu doesn't work on IE