[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:
Home
About
About The Lincoln Center
Management Team
Services
The Wedding Experience
Meetings &
Corporate Events
Special Events
Catering
Facilities
The Monroe Ballroom
The Lincoln Ballroom
The Library
Landau Conference Room
Maxwell Board Room
Gallery Foyer
FAQ's
News & Events
Contact
Location & Map
Contact Info
Getting
Started
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:#ff; background:
#753425; }
#primary_nav li.current_page_item a,
#primary_nav li.current_page_parent a,
#primary_nav li.current_page_ancestor a { color:#ff; 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; mar
[jQuery] Re: Superfish horizontal menu issue in IE6 / IE7
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"
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:
>
>
>
> href="index.html" title="The
> Lincoln Center Home">Home
>
> title="About The Lincoln Center Spokane">About
>
> title="About The Lincoln Center Spokane">About The Lincoln Center li>
> href="management_team.html" title="The Lincoln Center Management
> Team">Management Team
>
>
> href="services.html" title="Lincoln Center Services">Services
>
> href="the_wedding_experience.html" title="The Wedding Experience at
> The Lincoln Center Spokane">The Wedding Experience
> href="meetings_and_corporate_events.html" title="Meetings &
> Corporate Events at The Lincoln Center Spokane">Meetings &
> Corporate Events
> href="special_events.html" title="Special Events at The Lincoln Center
> Spokane">Special Events
> title="Catering at The Lincoln Center Spokane">Catering
>
>
> href="facilities.html" title="Lincoln Center Facilities">Facilities a>
>
> href="monroe_ballroom.html" title="The Monroe Ballroom at The Lincoln
> Center Spokane">The Monroe Ballroom
> href="lincoln_ballroom.html" title="The Lincoln Ballroom at The
> Lincoln Center Spokane">The Lincoln Ballroom
> title="The Library at The Lincoln Center Spokane">The Library
> href="landau_conference_room.html" title="The Landau Conference Room
> at The Lincoln Center Spokane">Landau Conference Room
> href="maxwell_board_room.html" title="The Maxwell Board Room at The
> Lincoln Center Spokane">Maxwell Board Room
> href="art_gallery_foyer.html" title="The Art Gallery Foyer at The
> Lincoln Center Spokane">Gallery Foyer
>
>
>
> title="Lincoln Center Frequently Asked Questions">FAQ's
>
> href="public_events.html" title="Lincoln Center News &
> Events">News & Events
>
>
> href="location.html" title="Contact The Lincoln Center">Contact
>
> title="How To Find The Lincoln Center Spokane">Location & Map
> title="Contact The Lincoln Center Spokane">Contact Info
> title="Getting Started with your Lincoln Center Event">Getting
> Started
>
>
>
>
>
> 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, textar
