Solved

Suckerfish CSS Drop Down Menu flies out to the right in IE7

Posted on 2008-10-30
5
306 Views
Last Modified: 2013-12-08
Hello all!  

I'm attempting to tame this Suckerfish menu for use on my website.  Currently it works like a dream in Firefox, dropping down where it should (even over Flash!)  But then i look at it in IE... anything (more specifically IE 6 and IE 7) and it is working - EXCEPT - the drop down first level menu flies out to the RIGHT instead of dropping DOWN.

I have included my modified suckerfish scripting that has gotten me to this point as well as images to show what it looks like in Firefox and in IE for a visual explanation.

All (and prompt) assistance is GREATLY appreciated and desperately needed!
<style type="text/css">
#nav {
float: left;
list-style: none;
background: url(/Pics/Nav/kissmenu_bg.gif) repeat-x;
padding: 0;
padding-left: 309px;
margin: 1px;
}
#nav ul {
float: left;
width: 950px;
list-style: none;
line-height: 20px;
background: white;
font-weight: bold;
padding: 0;
border: solid #41aa05;
border-width: 1px;
margin: 0 0 0 0;
}
#nav a {
color: #333333;
text-decoration: none;
padding: 0;
}
#nav li {
float: left;
width: auto;
}
#nav li ul {
position: absolute;
left: -999em;
z-index: 100;
width: 180px;
w\idth: 180px;
font-weight: bold;
border-width: 1px;
margin: 0;
}
#nav li li {
padding-right: 0;
width: 180px;
}
#nav li ul a {
width: 180px;
w\idth: 180px;
}
#nav li ul ul {
margin: 0 0 0 0;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: #caf0b7;
}
#content {
clear: left;
}
#content a {
color: #7C6240;
}
#content a:hover {
text-decoration: none;
}
#scaffolding {
height: 70px;
background: white;
border-width: 1px 0 0 0;
margin: 1em 0 0 0;
}
#scaffolding a {
text-decoration: none;
text-indent: -999em;
display: block;
height: 70px;
background: url(/images/hdlogo_flip2.gif) no-repeat;
background-position: 181px 0;
}
#scaffolding a:hover {
background-position: 181px -70px;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script>
<ul id="nav">
    <li><a href="http://beta.987kissfm.com/index.aspx"><img height="37" alt="" src="/WebContent/PICS/EMMIS/WRKSFM/Nav/home.gif" width="60" border="0" /></a> </li>
    <li><a href="#"><img height="37" alt="" src="/WebContent/PICS/EMMIS/WRKSFM/Nav/thestation.gif" width="103" border="0" /></a>
    <ul>
        <li><a href="#">Join the KISS Club</a> </li>
        <li><a href="#">The 411 on KISS</a> </li>
        <li><a href="#">Airstaff</a> </li>
        <li><a href="#">Weekend Lineup</a> </li>
        <li><a href="#">WIN with KISS</a> </li>
        <li><a href="#">Photo Gallery</a> </li>
        <li><a href="#">Contact Us</a> </li>
        <li><a href="#">Advertise with Us</a> </li>
    </ul>
    </li>
    <li><img height="37" alt="" src="/WebContent/PICS/EMMIS/WRKSFM/Nav/theshows.gif" width="103" border="0" />
    <ul>
        <li><a href="#">The KISS Wake-Up Club</a> </li>
        <li><a href="#">Life &amp; Times of Shaila</a> </li>
        <li><a href="#">The Michael Baisden Show</a> </li>
        <li><a href="#">Week In Review</a> </li>
    </ul>
    </li>
    <li><img height="37" alt="" src="/WebContent/PICS/EMMIS/WRKSFM/Nav/themusic.gif" width="103" border="0" />
    <ul>
        <li><a href="#">KISS Concert Calendar</a> </li>
        <li><a href="#">KISS iTunes Store</a> </li>
        <li><a href="#">KISS FM - Now in HD</a> </li>
        <li><a href="#">KISS Video Channel</a> </li>
        <li><a href="#">Today's Music News</a> </li>
    </ul>
    </li>
    <li><img height="37" alt="" src="/WebContent/PICS/EMMIS/WRKSFM/Nav/thelifestyle.gif" width="126" border="0" />
    <ul>
        <li><a href="#">KISS Arcade</a> </li>
        <li><a href="#">KISS Soulmate Search</a> </li>
        <li><a href="#">AutoWorld</a> </li>
        <li><a href="#">The Reel with Raqiyah</a> </li>
    </ul>
    </li>
    <li><img height="37" alt="" src="/WebContent/PICS/EMMIS/WRKSFM/Nav/ourcommunity.gif" width="145" border="0" />
    <ul>
        <li><a href="#">KISS Cares</a> </li>
        <li><a href="#">Career Channel</a> </li>
        <li><a href="#">Work for Emmis</a> </li>
    </ul>
    </li>
</ul>

Open in new window

firefox-dd.jpg
ie7-dd.jpg
0
Comment
Question by:vcantave
  • 3
  • 2
5 Comments
 

Author Comment

by:vcantave
ID: 22847523
Just a quick aside - we're on a staging server, so I currently cannot post the link for the site in development.   I hope that doesn't hinder any assistance.  Thank you again!
0
 
LVL 16

Expert Comment

by:sh0e
ID: 22847564
Enclose all the main buttons (HOME THE STATION ETC) links in a div.
<style type="text/css">
#nav {
float: left;
list-style: none;
background: url(/Pics/Nav/kissmenu_bg.gif) repeat-x;
padding: 0;
padding-left: 309px;
margin: 1px;
}
#nav ul {
float: left;
width: 950px;
list-style: none;
line-height: 20px;
background: white;
font-weight: bold;
padding: 0;
border: solid #41aa05;
border-width: 1px;
margin: 0 0 0 0;
}
#nav a {
color: #333333;
text-decoration: none;
padding: 0;
}
#nav li {
float: left;
width: auto;
}
#nav li ul {
position: absolute;
left: -999em;
z-index: 100;
width: 180px;
w\idth: 180px;
font-weight: bold;
border-width: 1px;
margin: 0;
}
#nav li li {
padding-right: 0;
width: 180px;
}
#nav li ul a {
width: 180px;
w\idth: 180px;
}
#nav li ul ul {
margin: 0 0 0 0;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: #caf0b7;
}
#content {
clear: left;
}
#content a {
color: #7C6240;
}
#content a:hover {
text-decoration: none;
}
#scaffolding {
height: 70px;
background: white;
border-width: 1px 0 0 0;
margin: 1em 0 0 0;
}
#scaffolding a {
text-decoration: none;
text-indent: -999em;
display: block;
height: 70px;
background: url(/images/hdlogo_flip2.gif) no-repeat;
background-position: 181px 0;
}
#scaffolding a:hover {
background-position: 181px -70px;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script>
<ul id="nav">
    <li><a href="http://beta.987kissfm.com/index.aspx"><img height="37" alt="" src="/WebContent/PICS/EMMIS/WRKSFM/Nav/home.gif" width="60" border="0" /></a> </li>
    <li><div><a href="#"><img height="37" alt="" src="/WebContent/PICS/EMMIS/WRKSFM/Nav/thestation.gif" width="103" border="0" /></a></div>
    <ul>
        <li><a href="#">Join the KISS Club</a> </li>
        <li><a href="#">The 411 on KISS</a> </li>
        <li><a href="#">Airstaff</a> </li>
        <li><a href="#">Weekend Lineup</a> </li>
        <li><a href="#">WIN with KISS</a> </li>
        <li><a href="#">Photo Gallery</a> </li>
        <li><a href="#">Contact Us</a> </li>
        <li><a href="#">Advertise with Us</a> </li>
    </ul>
    </li>
    <div><li><img height="37" alt="" src="/WebContent/PICS/EMMIS/WRKSFM/Nav/theshows.gif" width="103" border="0" /></div>
    <ul>
        <li><a href="#">The KISS Wake-Up Club</a> </li>
        <li><a href="#">Life &amp; Times of Shaila</a> </li>
        <li><a href="#">The Michael Baisden Show</a> </li>
        <li><a href="#">Week In Review</a> </li>
    </ul>
    </li>
    <div><li><img height="37" alt="" src="/WebContent/PICS/EMMIS/WRKSFM/Nav/themusic.gif" width="103" border="0" /></div>
    <ul>
        <li><a href="#">KISS Concert Calendar</a> </li>
        <li><a href="#">KISS iTunes Store</a> </li>
        <li><a href="#">KISS FM - Now in HD</a> </li>
        <li><a href="#">KISS Video Channel</a> </li>
        <li><a href="#">Today's Music News</a> </li>
    </ul>
    </li>
    <div><li><img height="37" alt="" src="/WebContent/PICS/EMMIS/WRKSFM/Nav/thelifestyle.gif" width="126" border="0" /></div>
    <ul>
        <li><a href="#">KISS Arcade</a> </li>
        <li><a href="#">KISS Soulmate Search</a> </li>
        <li><a href="#">AutoWorld</a> </li>
        <li><a href="#">The Reel with Raqiyah</a> </li>
    </ul>
    </li>
    <div><li><img height="37" alt="" src="/WebContent/PICS/EMMIS/WRKSFM/Nav/ourcommunity.gif" width="145" border="0" /></div>
    <ul>
        <li><a href="#">KISS Cares</a> </li>
        <li><a href="#">Career Channel</a> </li>
        <li><a href="#">Work for Emmis</a> </li>
    </ul>
    </li>
</ul>

Open in new window

0
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
ID: 22847568
Sorry, made a mistake.  Put the div tag in the wrong place.
<style type="text/css">
#nav {
float: left;
list-style: none;
background: url(/Pics/Nav/kissmenu_bg.gif) repeat-x;
padding: 0;
padding-left: 309px;
margin: 1px;
}
#nav ul {
float: left;
width: 950px;
list-style: none;
line-height: 20px;
background: white;
font-weight: bold;
padding: 0;
border: solid #41aa05;
border-width: 1px;
margin: 0 0 0 0;
}
#nav a {
color: #333333;
text-decoration: none;
padding: 0;
}
#nav li {
float: left;
width: auto;
}
#nav li ul {
position: absolute;
left: -999em;
z-index: 100;
width: 180px;
w\idth: 180px;
font-weight: bold;
border-width: 1px;
margin: 0;
}
#nav li li {
padding-right: 0;
width: 180px;
}
#nav li ul a {
width: 180px;
w\idth: 180px;
}
#nav li ul ul {
margin: 0 0 0 0;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: #caf0b7;
}
#content {
clear: left;
}
#content a {
color: #7C6240;
}
#content a:hover {
text-decoration: none;
}
#scaffolding {
height: 70px;
background: white;
border-width: 1px 0 0 0;
margin: 1em 0 0 0;
}
#scaffolding a {
text-decoration: none;
text-indent: -999em;
display: block;
height: 70px;
background: url(/images/hdlogo_flip2.gif) no-repeat;
background-position: 181px 0;
}
#scaffolding a:hover {
background-position: 181px -70px;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script>
<ul id="nav">
    <li><a href="http://beta.987kissfm.com/index.aspx"><img height="37" alt="" src="/WebContent/PICS/EMMIS/WRKSFM/Nav/home.gif" width="60" border="0" /></a> </li>
    <li><div><a href="#"><img height="37" alt="" src="/WebContent/PICS/EMMIS/WRKSFM/Nav/thestation.gif" width="103" border="0" /></a></div>
    <ul>
        <li><a href="#">Join the KISS Club</a> </li>
        <li><a href="#">The 411 on KISS</a> </li>
        <li><a href="#">Airstaff</a> </li>
        <li><a href="#">Weekend Lineup</a> </li>
        <li><a href="#">WIN with KISS</a> </li>
        <li><a href="#">Photo Gallery</a> </li>
        <li><a href="#">Contact Us</a> </li>
        <li><a href="#">Advertise with Us</a> </li>
    </ul>
    </li>
    <li><div><img height="37" alt="" src="/WebContent/PICS/EMMIS/WRKSFM/Nav/theshows.gif" width="103" border="0" /></div>
    <ul>
        <li><a href="#">The KISS Wake-Up Club</a> </li>
        <li><a href="#">Life &amp; Times of Shaila</a> </li>
        <li><a href="#">The Michael Baisden Show</a> </li>
        <li><a href="#">Week In Review</a> </li>
    </ul>
    </li>
    <li><div><img height="37" alt="" src="/WebContent/PICS/EMMIS/WRKSFM/Nav/themusic.gif" width="103" border="0" /></div>
    <ul>
        <li><a href="#">KISS Concert Calendar</a> </li>
        <li><a href="#">KISS iTunes Store</a> </li>
        <li><a href="#">KISS FM - Now in HD</a> </li>
        <li><a href="#">KISS Video Channel</a> </li>
        <li><a href="#">Today's Music News</a> </li>
    </ul>
    </li>
    <li><div><img height="37" alt="" src="/WebContent/PICS/EMMIS/WRKSFM/Nav/thelifestyle.gif" width="126" border="0" /></div>
    <ul>
        <li><a href="#">KISS Arcade</a> </li>
        <li><a href="#">KISS Soulmate Search</a> </li>
        <li><a href="#">AutoWorld</a> </li>
        <li><a href="#">The Reel with Raqiyah</a> </li>
    </ul>
    </li>
    <li><div><img height="37" alt="" src="/WebContent/PICS/EMMIS/WRKSFM/Nav/ourcommunity.gif" width="145" border="0" /></div>
    <ul>
        <li><a href="#">KISS Cares</a> </li>
        <li><a href="#">Career Channel</a> </li>
        <li><a href="#">Work for Emmis</a> </li>
    </ul>
    </li>
</ul>

Open in new window

0
 

Author Comment

by:vcantave
ID: 22847610
EUREKA!!!!!!!!!!

Thank you - I swear, I don't know why I didn't come here sooner.  I've been cracking my head on this literally? since 7:00 PM EDT. *smh*

I could have been home with a drink!!!

Now I just have to figure out how to make the drop downs look sexier.  If you are willing to share any thoughts, please do.  But THANK YOU!!  I may name my first born sh0e the Master!
0
 

Author Closing Comment

by:vcantave
ID: 31511941
GOD BLESS sh0e!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
Several part series to implement Internet Explorer 11 Enterprise Mode
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question