CMS Made Simple Forums

Hey all,

I did a basic site using Cat Template for a friend. Works very nice in FF and Safari on MAC and PC. But in IE I am running into this little issue where the menu is disappearing or the drop down headers cannot be selected. I did not do much in the code or css as this is a "favor" site. Those are the ones that always give you the most trouble.

Here is the site: http://www.kathykielarphotography.com/. When you go to gallery header the drop down menu acts funky.

I am on a MAC so I cannot see if any fixes are working.

It looks like there is a "block" in IE. Any CSS fixes?

Thanks in advance.

Yorgi

Couple of things first IE6 requires a JS to do drop down/fly out menus so you need to look at a default CSS Menu template and copy the IE JS into yours and you have 2 ul for the menu that are giving error warnings and for IE6 JS to work the UL needs to be IDed as primary-nav, you know you can just use CSS to make the activepage bold instead of having in the menu template as it gives an error warning...



 



Current page is 1: HOME

Mark,

First off thank you!

I guess I have to ways to go. One switch the whole design over to a CMS template like CSS MENU TOP 2 Col.

The other is to add this items:



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

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

Not sure which one makes more sense I have a feeling it's number one.

Let me know what you think.

George

The first one is so the JS can assign a class type thing to the menu li so it will act like it should, it will assign menuh to ones w/o any other calls and an h to the end of the others...

If you look at the rest of the style sheet you picked up the other part of your post from you will see calls like li.menuh or menuparenth these are the ones to make IE6 behave like most other modern browsers...

So you need to change your ul to have id="primary-nav" or change the JS to look for id="nav"...

If you look in the folder that path points to you can make another JS with your ID in it and call it to the template, or change your style sheet to reflect the primary-nav calls...

Hope I didn't confuse you to much...

Thanks again. I am confused but will soldier on. When I do this with the basic template like I said it works.

My current CSS is has this for the MENU. Should I change it all to primary-nav
#navcell{
position: relative;
width:900px;
margin:auto;
background:url(uploads/Cat_Template/nav.gif);
height:40px;
text-align: center;
margin-bottom:10px;
z-index:1;
}

#nav{

height:40px;
left: 85px;
padding: 11px 30px 0px 20px;
}
#nav_le{
position: absolute;
height:40px;
width:18px;
left:0px;
background: url(uploads/Cat_Template/nav_le.gif);
}
#nav_re{
position: absolute;
height:40px;
width:18px;
right:0px;
background: url(uploads/Cat_Template/nav_re.gif);
}

#nav a {
font-weight: bold;
color: #ffffff;
text-decoration: none;

}

#nav li li a {
display: block;
font-weight: bold;
color: #ccc;
padding: 0.2em 10px;
}

#nav li li a:hover {
border: 0px solid #000000;
        font-weight: bold;
color: #cc9900;
}

#nav li {
float: left;
position: relative;
width: 120px;
text-align: center;
padding-left: 0px;
cursor: default;
border: 1px solid transparent; /*WICHTIG*/
border-width: 0px 0;
}

#nav li#first {
border-left-width: 1em;

}


#nav li#last {
border-right-width: 1em;
}

#nav li ul {
            text-align:center;
display: none;
position: center;
top: 100%;
left: 1px;
font-weight: normal;
background: #000;
padding: 1px 0 1px 0;
border: solid 1px #666666;
}

#nav li>ul {
top: 1.3em;
left: -100;
}

#nav li li {
display: block;
float: none;
background-color: transparent;
border: 0;
            text-align:left;
            padding-left: 5px;
}
#nav .activeparent{color:#fff;font-weight:bold;}
#nav li ul .activeparent{color:#fff;font-weight:bold;padding: 5px 0 5px 5px;}

#nav li:hover ul, li.over ul {
display: block;

}

Similar to the default:

/* 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: 5px 10px;
  text-decoration: none;
  color: #006699;
}
#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-color: #ececec;
}

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

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


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


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

Thanks
G