2 replies [Last post]
kace
Offline
newbie
Seattle
Last seen: 14 years 26 weeks ago
Seattle
Timezone: GMT-8
Joined: 2006-12-19
Posts: 5
Points: 0

EDIT: All I was missing was the JS file!! Duuurrrrrr...

so I got a great horizontal nav from http://www.tjkdesign.com/articles/new_drop_down/default.asp

I finally got it working with all my images (which I am quite proud of as this is the first time I've tried doing some tricky css stuff) but it doesn't work quite right in ie6 or ie7, fine in firefox

I changed the order of some parts in the css page to get my images in there correctly.

the first 2 items as they are displayed function properly; hover on the button in the nav and the sub nav displays below in the yellow, but the second 2 with the images in place don't in ie.

...but if one of the first 2 functional is hovered on first, then down to the sub nav, then over to the images that were added, their correct sub nav is displayed.

is this a z-index issue?

page in question
http://kaceaudio.com/test/KaceDropDown2.html
http://kaceaudio.com/test/kaceDropDown2.css
http://kaceaudio.com/test/kaceDropDown_ie5.css
http://kaceaudio.com/test/kaceDropDown_ie.css
http://kaceaudio.com/test/kaceDropDown_ieMac.css
http://kaceaudio.com/test/kaceDropDown.js

HTML

@import "KaceDropDown2.css";
/*\*//*/
@import "kaceDropDown_ieMac.css";
/**/

@import "kaceDropDown_ie.css";

@import "kaceDropDown_ie5.css";

Kace Audio

text
more text

CSS

body {font-size:small;font-family:Verdana, serif;color:#000;padding:0;margin:0;background:#aa0 url(http://www.kaceaudio.com/test/images/background.jpg) repeat-x;}

img {border:0}

#header {font-weight:normal;padding:0 0 0 0;margin:0;background:#ff0 url(http://www.kaceaudio.com/test/images/kaceHeader.gif) 0px no-repeat;color:#ff0;height:56px;}

h1 {border-bottom:1px dotted #999;margin:0 0 10px 10px;font-size:1em;line-height:2em;}

h2 {border-left:10px solid #c30;color:#c30;padding-left:10px;margin:0 0 10px 10px;font-size:.9em}

p {margin:5px 10px}

#wrapper {background:#fff;width:700px;max-width:100%;margin:25px auto;border:0px solid #000;padding-bottom:20px}

#header p{color:#3a3;width:10em;background:#fff;margin:0;padding:5px}

p#cc {margin-top:20px;border-top:1px dotted #999;padding-top:10px;}
/************************************************/
/* Pure CSS Drop Down Menu [TJK_dropDown] v1.1 */
/* Copyright 2006, Thierry Koblentz */
/* TJKDesign.com. all rights reserved. */
/************************************************/

/* zeroing padding/margin for all elements */
#kaceDropDownMenu,
#kaceDropDownMenu * { margin:0;padding:0; }
/* "Master" UL (the whole Menu) */
#kaceDropDownMenu {position:relative;background:#000 url(http://www.kaceaudio.com/test/images/navBG2.gif); no-repeat 100% 50%;width:700px;max-width:100%;float:left;margin-bottom:3.5em; height:51;
}
/* sub-menu ULs */
#kaceDropDownMenu li ul {

cursor:default;
width:680px;
height:21px; !important
max-width:100%;
position:absolute;
border:0px solid #ccc;
top:51px;
background:#000;
padding:none;
padding-right:20px !important;
background-position:0 0 !important;
left:-9000px;
}

/* All LIs */
#kaceDropDownMenu li {
cursor:pointer;
float:left;
/* width:10em;
/* background-color:#009 url(http://www.kaceaudio.com/test/images/subNavBG.gif); */
text-align:center;
list-style-type:none;
font-weight:bold;
border:0px solid #fff; /*upper buttons*/
float:right;
height:72px;
}
/* sub-menu LIs */
#kaceDropDownMenu li ul li {
padding:0 10px 0 0;
border:none;
width:auto;
max-width:none;
height:21px;
}

/* All anchors */
#kaceDropDownMenu li a {
color:#666;
border:none;
text-decoration:none;
display:block;
float:left;
/* padding:0 .4em;*/
padding-left: 2em;
/* padding-top:1em;*/
height:2em;
line-height:2em;
text-align:center;
}
/* sub-menu Anchors */
#kaceDropDownMenu li ul li a {
position:relative !important; /* ie Mac */
cursor:pointer !important;
white-space:nowrap;
line-height:1.7em;
height:1.7em;
font-weight:400;
font-size:10px;
border:none;
color:#666;
background-position:0 50% !important;
}
/* font color */
#kaceDropDownMenu li a:hover,
#kaceDropDownMenu li a:focus,
#kaceDropDownMenu li a:active {border:none;color:#000}

/* position and z-index for the sub-menus */
#kaceDropDownMenu li:hover ul,
#kaceDropDownMenu li.msieFix ul {left:0;z-index:10}

/* Current location - class on Body must match LI's id */
.button4 #kaceDropDownMenu li#button4 a,
.button3 #kaceDropDownMenu li#button3 a,
.button2 #kaceDropDownMenu li#button2 a,
.button1 #kaceDropDownMenu li#button1 a{color:#000;cursor:default}

.button4 #kaceDropDownMenu li#button4 ul,
.button3 #kaceDropDownMenu li#button3 ul,
.button2 #kaceDropDownMenu li#button2 ul,
.button1 #kaceDropDownMenu li#button1 ul {left:0;z-index:5}

/* background images and border colors */

#button4:hover /*, #button4:focus,
.button4 #kaceDropDownMenu li#button4*/ {background:#0f0 url(http://www.kaceaudio.com/test/images/butTechHov.gif); width:112px } /* hover button bg */
#kaceDropDownMenu li#button4 ul {background:#e2facd url(http://www.kaceaudio.com/test/images/subNavBG.gif) }/* current location */
#button4,/* #button4 li a, */
.button4 #kaceDropDownMenu li#button4 ul {border:none; background:#00f url(http://www.kaceaudio.com/test/images/butTech.gif); width:112px} /*sub button images */

#button3:hover /*, #button3:focus,
.button3 #kaceDropDownMenu li#button3*/ {background:#ffe1cc url(http://www.kaceaudio.com/test/images/butEngHov.gif) }/* current location */
#kaceDropDownMenu li#button3 ul {background:#e2facd url(http://www.kaceaudio.com/test/images/subNavBG.gif) }
#button3,/*#button3 li a, */
.button3 #kaceDropDownMenu li#button3 ul {border:none; background:#00f url(http://www.kaceaudio.com/test/images/butEng.gif); width:103px}

#button2:hover,#button2:focus,
#kaceDropDownMenu li#button2 ul,
.button2 #kaceDropDownMenu li#button2 {background:#fffcd0 url(http://www.kaceaudio.com/test/images/subNavBG.gif) }/* current location */
#button2,#button2 li a,
.button2 #kaceDropDownMenu li#button2 ul {border:none}

#button1:hover,#button1:focus,
#kaceDropDownMenu li#button1 ul,
.button1 #kaceDropDownMenu li#button1 {background:#fccae5 url(http://www.kaceaudio.com/test/images/subNavBG.gif) }/* current location */
#button1,#button1 li a,
.button1 #kaceDropDownMenu li#button1 ul {border:none}

/* "trigger" and "msieFix" classes */
#kaceDropDownMenu li.msieFix a {color:#000 !important}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 36 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You're missing the

You're missing the javascript file.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kace
Offline
newbie
Seattle
Last seen: 14 years 26 weeks ago
Seattle
Timezone: GMT-8
Joined: 2006-12-19
Posts: 5
Points: 0

Tyssen, you just made my

Tyssen, you just made my day...

I have no idea why I thought that wasn't important, but it certainly was. It now

Thank you so much! If you need any help with music software just let me know, (as that is my area of expertise).