[jQuery] Superfish horizontal menu issue in IE6 / IE7

[jQuery] Superfish horizontal menu issue in IE6 / IE7


Hello everybody!
I am working on finishing a site that another web designer started,
and am a total newb to Superfish and not very strong in CSS/JS
troubleshooting. We are using a horizontal menu with a horizontal
submenu below it. It looks beautiful in FF, in IE 6/7 it is rendering
the submenus vertically. Please help!!! My eternal gratitude to
whomever can help. We are needing to get this site up 2 months ago and
this is the only holdup.
See for yourself:
http://www.moreorlessmyself.com/linc <-- using older libraries
or
http://www.thelincolncenterspokane.com/test/ <--- using the latest
superfish and jquery files
HTML:
<!-- header 980 x 202 -->
            <ul id="primary_nav" class="clearfix sf-menu sf-navbar">
                <li class="primary_nav_home"><a href="index.html" title="The
Lincoln Center Home">Home</a></li>
<li class="primary_nav_about"><a href="about.html"
title="About The Lincoln Center Spokane">About</a>
<ul>
<li class="page_item"><a href="about.html"
title="About The Lincoln Center Spokane">About The Lincoln Center</a></
li>
<li class="page_item"><a
href="management_team.html" title="The Lincoln Center Management
Team">Management Team</a></li>
</ul>
</li>
<li class="primary_nav_services"><a
href="services.html" title="Lincoln Center Services">Services</a>
<ul>
<li class="page_item"><a
href="the_wedding_experience.html" title="The Wedding Experience at
The Lincoln Center Spokane">The Wedding Experience</a></li>
<li class="page_item"><a
href="meetings_and_corporate_events.html" title="Meetings &amp;
Corporate Events at The Lincoln Center Spokane">Meetings &amp;
Corporate Events</a></li>
<li class="page_item"><a
href="special_events.html" title="Special Events at The Lincoln Center
Spokane">Special Events</a></li>
<li class="page_item"><a href="catering.html"
title="Catering at The Lincoln Center Spokane">Catering</a></li>
</ul>
</li>
<li class="primary_nav_facility current_page_item"><a
href="facilities.html" title="Lincoln Center Facilities">Facilities</
a>
<ul>
<li class="page_item"><a
href="monroe_ballroom.html" title="The Monroe Ballroom at The Lincoln
Center Spokane">The Monroe Ballroom</a></li>
<li class="page_item"><a
href="lincoln_ballroom.html" title="The Lincoln Ballroom at The
Lincoln Center Spokane">The Lincoln Ballroom</a></li>
<li class="current_page_item"><a href="#"
title="The Library at The Lincoln Center Spokane">The Library</a></li>
<li class="page_item"><a
href="landau_conference_room.html" title="The Landau Conference Room
at The Lincoln Center Spokane">Landau Conference Room</a></li>
<li class="page_item"><a
href="maxwell_board_room.html" title="The Maxwell Board Room at The
Lincoln Center Spokane">Maxwell Board Room</a></li>
<li class="page_item"><a
href="art_gallery_foyer.html" title="The Art Gallery Foyer at The
Lincoln Center Spokane">Gallery Foyer</a></li>
</ul>
</li>
<li class="primary_nav_pack"><a href="faq.html"
title="Lincoln Center Frequently Asked Questions">FAQ's</a>
</li>
<li class="primary_nav_newsevents"><a
href="public_events.html" title="Lincoln Center News &amp;
Events">News &amp; Events</a>
</li>
<li class="primary_nav_contact"><a
href="location.html" title="Contact The Lincoln Center">Contact</a>
<ul>
<li class="page_item"><a href="location.html"
title="How To Find The Lincoln Center Spokane">Location & Map</a></li>
<li class="page_item"><a href="contact.html"
title="Contact The Lincoln Center Spokane">Contact Info</a></li>
<li class="page_item"><a href="quote.html"
title="Getting Started with your Lincoln Center Event">Getting
Started</a></li>
</ul>
</li>
            </ul>
        </div>
CSS:
body{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-
weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup,sub{line-height:-1px;vertical-align:text-top;}sub{vertical-
align:text-bottom;}
input, textarea, select{font-family:inherit;font-size:inherit;font-
weight:inherit;}
/* GLOBAL
------------------- */
body { background:#171717 ; font: 63.7%/1.55 Verdana, Arial, sans-
serif; color:#333 ; }
/* =Clearfix */
.clearfix:after { content: ""; display: block; height: 0; clear: both;
visibility: hidden; }
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
.clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
/* HEADER
------------------- */
#header { background: #171717 url(../img/img_home.jpg) no-repeat 0 0;
width: 980px; height:202px; }
#header h1 {}
#header h1 a { display: block; width: 260px; height: 202px; }
#header p { margin-left: 300px; }
/* NAVIGATION
------------------- */
#primary_nav { background:#753425; padding-bottom: 36px; font-family:
Avenir, Arial, sans-serif; margin: 0;}
#primary_nav li { float: left; text-align: center; background: #171717
url(../img/bg_prim_nav_bl.gif) repeat-x top; margin: 0; list-style:
none; }
#primary_nav a { display: block; height:36px; text-transform:
uppercase; text-decoration: none; font-size: 1.1em; color:#ccc; line-
height: 2.7 }
#primary_nav a:hover,
#primary_nav li.sfHover a,
#primary_nav li.sf-breadcrumb a { color:#ffffff; background:
#753425; }
#primary_nav li.current_page_item a,
#primary_nav li.current_page_parent a,
#primary_nav li.current_page_ancestor a { color:#ffffff; background:
#753425 url(../img/bg_prim_nav_current.gif) repeat-x top; }
#primary_nav .primary_nav_home a { width: 115px; }
#primary_nav .primary_nav_about a { width: 120px; }
#primary_nav .primary_nav_services a { width: 160px; }
#primary_nav .primary_nav_facility a { width: 160px; }
#primary_nav .primary_nav_pack a { width: 115px; }
#primary_nav .primary_nav_newsevents a { width: 180px; }
#primary_nav .primary_nav_contact a { width: 130px; }
#primary_nav ul { width: 980px; margin: 0; }
#primary_nav .current_page_item ul,
#primary_nav .sfHover ul { display: block !important;
visibility:visible !important; width:100%; background:#753425; }
#primary_nav ul li { }
#primary_nav ul li a { background: #753425; text-transform:none;
width: auto !important; padding: 0 18px; font-size: 1em; line-height:
2.4; color:#fff; float:right;}
#primary_nav ul li a:hover { text-decoration: underline;}
#primary_nav ul li.current_page_item a,
#primary_nav li.current_page_ancestor ul li a,
#primary_nav li.current_page_item ul li a { background: #753425; }
/* MAIN CONTENT
------------------- */
.columns { margin: 0 20px 30px;}
.columns.no_margin { margin-bottom: 0;}
.col_left { width: 300px; float:left; margin-right: 20px; }
.col_left.intro {width: 720px; margin-right: 0;}
.col_left.wide {width: 620px; margin-right: 0;}
.half {width: 460px !important; margin-right: 0; }
.wide ul.col_left { margin-right:0; }
.col_mid { width: 302px; float: left; }
.col_right { width: 300px; float:right; }
.col_right.wide {width: 620px;}
.col_right.first {margin-top: 45px; }
.col_right.faqjump {margin-top: 60px; }
/* BASIC STRUCTURE
------------------- */
#page_wrap { margin: 0 0;}
#container { background: #f7f6ef url(../img/home_head_bg.png) repeat-x
top center; }
.wrap { width: 980px; margin: 0 auto; background:#fff;}
#container .wrap {background: #fff url(../img/bg_flax.png) 560px
bottom no-repeat; padding-bottom:1px; }
/* TYPE
------------------- */
p { font-size: 1.2em; margin-bottom: 15px; letter-spacing:-0.008em;}
small {}
strong { font-weight:bold;}
em {}
/*h1, h2 { font-family:Georgia, "Times New Roman", Times, serif;}*/
h1, h2, h3,h5 { font-family: Verdana, Arial, Helvetica, sans-serif; }
h1 { font-size: 2.2em;}
h2 { font-size: 3.2em; margin: 10px 0 5px; letter-spacing: -.05em}
#homeH2 { margin: 15px 0 -10px 0; }
h3 { font-size: 1.8em; margin: 1.4em 0 .45em; color:#000; }
#homeH3 { margin: 0 0 10px 0; color:#333333 }
h4 { font-size: 1.4em; font-weight: normal; text-transform: uppercase;
border-bottom: 1px solid #edecec; margin:20px 0 13px; font-family:
Verdana, Arial, Helvetica, sans-serif;}
h5 { font:bold 1.5em/1.3 Arial, Helvetica, sans-serif; margin-top:
15px; color:#272727;}
h5 em {font-size: 1.65em; }
h5 a {text-decoration: none; }
h5 a:hover {text-decoration:underline }
p.intro {font-size: 1.4em; margin-bottom: 20px; }
p.readMore { line-height: 2; margin:0 0 20px 8px; text-align:right; }
p.readMore a { color:#666666; background-image:url(../img/
readMoreArrow.gif); background-repeat:no-repeat; background-
position:right center; padding:18px; }
p.date {color:#cccccc; font-size:1em !important; text-transform:
uppercase;}
p.small { font-size: 1em; color:#ccc; }
/* LINKS
------------------- */
a { color:#753425 ; text-decoration:underline; }
a:hover { text-decoration: none; }
.hide { text-indent:-9999em; outline: none; }
.alignright { float:right; }
.alignleft { float:left; }
/* LIST STYLES
------------------- */
ul { margin: 0 0 1em 1.5em; }
ol {}
li { list-style: outside; list-style-type:disc; font-size: 1.2em;
margin-bottom: 1px; letter-spacing:-0.01em;}
div.col_right ul {margin-left: 0;}
div.col_right li {list-style: none;}
/* ETC
------------------- */
.faq_article { border-bottom:1px solid #EDECEC; padding-bottom:20px;
margin-bottom:20px; }
ul.col_left,
ul.col_right {width: 200px; padding-left: 20px; margin-left: 0;}
span.clear{clear:both;}
.wide ul.col_left,
.wide ul.col_right {width: 290px; }
/* HOME PAGE IMAGE LINKS
------------------- */
.teaser a { display: block; width: 310px; height:128px; margin-bottom:
15px; /*margin-top:40px;*/ }
.teaser.wide a { width: 597px; }
.teaser a:hover { background-position: bottom left !important; }
#home_corporate a { background:url(../img/corp.png) no-repeat 0 0; }
#home_wedding a{ background:url(../img/wed.png) no-repeat 0 0; }
#home_special a { background:url(../img/spec.png) no-repeat 0 0; }
/* OTHER IMAGE LINKS
------------------- */
a .right_img {border: 3px solid #CCCCCC; margin-bottom: 5px;}
a:hover .right_img {border: 3px solid #CCCCCC;}
img.alignright { padding:0; margin:0 10px 10px 15px; }
img.alignleft { padding:0; margin:0 15px 10px 10px; }
a img, a:hover img { border: none; }
/* TABLES
------------------- */
table {}
td {}
table{font-size:1.2em;}
table.tariff{width:620px;margin-bottom:20px;}
table tr td{padding:4px;/*border-top:1px solid #e0dfdf;*/ border-
bottom: 1px solid #e0dfdf;}
table tr td.center{text-align:center;}
table tr td.noline{text-align:center;border-bottom: 0px;}
table tr td.feature{text-align:left;width:218px;}
table tr td.data{text-align:right;width:134px;text-align:center;}
table tr td.data.c{text-align:center;width:134px;text-align:center;}
table tr.title{font-size:1.4em;background:#e7e3d0;color:#666;border-
bottom:1px solid #cfcbba;}
table tbody tr.price td{color:#000;font-weight:bold;padding:12px
4px;vertical-align:top;}
/* FOOTER
------------------- */
p#spaver {padding-bottom: 80px;}
#footer { background:#171717 url(../img/bg_footer_tile2.png) repeat-x
top center; color:#f5f5f5; }
#footer .wrap { background:#272727 url(../img/bg_footer_tile.png)
repeat-x top center; padding-top: 39px;}
#footer .columns { margin-bottom: 0; background: url(../img/
bg_footer_flax.png) no-repeat bottom left; }
#footer .item {margin-bottom: 8px; }
#footer a {color:#dbd8bd;}
#footer ul { margin: 0; }
#footer li {list-style: none;}
#footer p {font-size:1.2em; color:#cccccc;}
#footer h4 { font-family: Verdana, Arial, Helvetica, sans-serif;
color:#f1f1f1; margin:0 0 13px;}
#footer h5 { color:#FFF7ED; margin:0; font-size: 1.3em; font-family:
Arial, Helvetica, sans-serif; text-transform: none; font-weight:
normal; }
#footer h5 a { text-decoration: none;}
#footer h5 a:hover { text-decoration: underline;}
/* PLUGINS
------------------- */
/* SUPERFISH
------------------- */
.sf-menu ul {
    position:        absolute;
    top:            -999em;
    left:0;
    /*width:            10em; left offset of submenus need to match (see below)
*/
}
.sf-menu ul li {
}
.sf-menu li:hover {
    visibility:        inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
    float:            left;
    position:        relative;
}
.sf-menu a {
    display:        block;
    position:        relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left:            0;
    top:            36px; /* match top ul list item height */
    z-index:        80;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left:            10em; /* match ul width */
    top:            0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
    left:            10em; /* match ul width */
    top:            0;
}
/*** adding sf-navbar class in addition to sf-menu creates an all-
horizontal nav-bar menu ***/
.sf-navbar {
    height:            36px;
    /* padding-bottom:    2.5em; */
    position:        relative;
}
.sf-navbar li {
    position:        static;
}
.sf-navbar a {
    border-top:        none;
}
.sf-navbar li ul {
    /*width:            44em; IE6 fix*/
}
.sf-navbar li li {
    position:        relative;
}
.sf-navbar li li ul {
}
.sf-navbar li li {
    /*width:            100%;*/
}
.sf-navbar ul li {
    width:            auto;
    float:            left;
}
.sf-navbar a, .sf-navbar a:visited {
    border:            none;
}
.sf-navbar li.current {
}
.sf-navbar li:hover,
.sf-navbar li.sfHover,
.sf-navbar li li.current_page_item,
.sf-navbar a:focus, .sf-navbar a:hover, .sf-navbar a:active {
}
.sf-navbar ul li:hover,
.sf-navbar ul li.sfHover,
ul.sf-navbar ul li:hover li,
ul.sf-navbar ul li.sfHover li,
.sf-navbar ul a:focus, .sf-navbar ul a:hover, .sf-navbar ul a:active {
}
ul.sf-navbar li li li:hover,
ul.sf-navbar li li li.sfHover,
.sf-navbar li li.current li.current,
.sf-navbar ul li li a:focus, .sf-navbar ul li li a:hover, .sf-navbar
ul li li a:active {
}
ul.sf-navbar .current_page_item ul,
ul.sf-navbar .current_page_parent ul,
ul.sf-navbar .sf-breadcrumb ul
ul.sf-navbar ul li:hover ul,
ul.sf-navbar ul li.sfHover ul {
    left:            0;
    top:            36px; /* match top ul list item height */
}
ul.sf-navbar .current_page_parent ul ul {
    top:             -999em;
}
.sf-navbar li li.current_page_item > a {
    text-decoration: underline !important;
}
ul.sf-navbar li ul {
    display:block !important;
    visibility:visible !important;
}
























































































































































































































































































































































































































    • Topic Participants

    • chris