Fix'd. It turned out just to be a CSS issue - float:left instead of right... DOH.
On Feb 5, 11:34 am, "ch...@chris-reilly.com" <ch...@chris-reilly.com> wrote: > 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 > orhttp://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 & > Corporate Events at The Lincoln Center Spokane">Meetings & > 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 & > Events">News & 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; > > }
