close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

IE- Dropdown menu not functioning

Thread began 10/29/2010 2:35 pm by info345691 | Last modified 11/04/2010 11:13 am by Jason Byrnes | 1498 views | 10 replies |

info345691

IE- Dropdown menu not functioning

I am working on an new site www.foothillsdrivingschool.ca
There seems to be a problem with IE and the menu writer CSS

The sub drop down menu doesnt allow for you to run your mouse down or over the drop down before it disappears or it only drops down some or doesnt show the rest of the drop down.

I have gone through the forum looking for the solution and have not yet found one that would corrected the current problem.

Sign in to reply to this post

Jason ByrnesWebAssist

The link you provide goes to a server not found error.


Usually, that issue occurs if you do not set a width or height for the menu items.


For the menu to be compatible with IE, the menu items will need to have a width and height specified in pixels.

Sign in to reply to this post

info345691

Menu Not functioning

Sorry my typo! Try this as the site is live:

www.foothillsdrivereducation.ca

I have set the width and height

ul#cssmw {
cursor: default;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
ul#cssmw ul {
cursor: default;
font-size: 0;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
ul#cssmw ul li {
background-image: none;
float: none;
}
ul#cssmw li {
background-image: none;
float: left;
padding: 0 0 0 0;
position: relative;
white-space: nowrap;
z-index: 100;
}
ul#cssmw li ul {
display: none;
top: 0;
}
ul#cssmw li:hover > ul {
display: block;
position: absolute;
}

ul#cssmw li.hover > ul {
display: block;
position: absolute;
}

ul#cssmw li.current > ul {
position: absolute;
}
ul#cssmw > li {
background-image: none;
}
ul#cssmw > li > a {
background-image: url("../cssmw_images/menu_bg.png");
background-repeat: no-repeat;
color: #fff;
display: block;
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: normal;
height: 20px;
line-height: 20px;
margin: 0 1px 1px 0;
padding: 5px 5px 5px 8px;
text-align: left;
text-decoration: none;
text-transform: none;
width: 236px;
}
ul#cssmw > li:hover > a {
background-image: url("../cssmw_images/menu_bg_sel.png");
background-repeat: no-repeat;
color: #fff;
}

ul#cssmw > li.hover > a {
background-image: url("../cssmw_images/menu_bg_sel.png");
background-repeat: no-repeat;
color: #fff;
}

ul#cssmw > li.current > a.current {
background-image: url("../cssmw_images/menu_bg_sel.png");
background-repeat: no-repeat;
color: #fff;
}
ul#cssmw ul.level-1 {
left: 0px;
top: 100%;
}
ul#cssmw ul.level-1 > li {
background-image: none;
}
ul#cssmw ul.level-1 > li > a {
background-image: url("../cssmw_images/menu_bg.png");
background-repeat: no-repeat;
color: #fff;
display: block;
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: normal;
height: 20px;
line-height: 20px;
margin: 0 1px 1px 0;
padding: 5px 5px 5px 8px;
text-align: left;
text-decoration: none;
text-transform: none;
width: 236px;
}
ul#cssmw ul.level-1 > li:hover > a {
background-image: url("../cssmw_images/menu_bg_sel.png");
background-repeat: no-repeat;
color: #fff;
}

ul#cssmw ul.level-1 > li.hover > a {
background-image: url("../cssmw_images/menu_bg_sel.png");
background-repeat: no-repeat;
color: #fff;
}

ul#cssmw ul.level-1 > li.current > a.current {
background-image: url("../cssmw_images/menu_bg_sel.png");
background-repeat: no-repeat;
color: #fff;
}
ul#cssmw ul.level-2 {
left: 250px;
}
ul#cssmw ul.level-2 > li {
background-image: none;
}
ul#cssmw ul.level-2 > li > a {
background-image: url("../cssmw_images/menu_bg.png");
background-repeat: no-repeat;
color: #fff;
display: block;
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: normal;
height: 20px;
line-height: 20px;
margin: 0 1px 1px 0;
padding: 5px 5px 5px 8px;
text-align: left;
text-decoration: none;
text-transform: none;
width: 236px;
}
ul#cssmw ul.level-2 > li:hover > a {
background-image: url("../cssmw_images/menu_bg_sel.png");
background-repeat: no-repeat;
color: #fff;
}

ul#cssmw ul.level-2 > li.hover > a {
background-image: url("../cssmw_images/menu_bg_sel.png");
background-repeat: no-repeat;
color: #fff;
}

ul#cssmw ul.level-2 > li.current > a.current {
background-image: url("../cssmw_images/menu_bg_sel.png");
background-repeat: no-repeat;
color: #fff;
}

Sign in to reply to this post

neilo

You will need to remove the gaps between the drop-down menu items.

In your cssmw/menu.css file, in the rule for ul#cssmw ul.level-1 > li > a (about line 99), remove the 1px bottom-margin:


ul#cssmw ul.level-1 > li > a {
background-image:url("../cssmw_images/menu_bg.png");
background-repeat:no-repeat;
color:#FFFFFF;
display:block;
font-family:"Trebuchet MS",Geneva,Arial,Helvetica,sans-serif;
font-size:15px;
font-style:normal;
font-weight:normal;
height:20px;
line-height:16px;
margin:0 1px 0 0; /* changed from 0 1px 1px 0 */
padding:5px 5px 5px 8px;
text-align:left;
text-decoration:none;
text-transform:none;
width:236px;
}

Sign in to reply to this post

Jason ByrnesWebAssist

thanks for jumping in Neilo, I was about to post the exact same thing.....

Sign in to reply to this post

info345691

Solution worked!

Thank you both so much for your help, That seems to have corrected the IE dropdown display problem- Will keep that little trick in mind if I run into that again.

Sign in to reply to this post

Jason ByrnesWebAssist

glad to hear it is working.

Sign in to reply to this post

jjenco101368

Having the same problem

My menu works in Firefox, but when I launch it in IE 7, the Level Two items disappear as soon as you attempt to hover the mouse over them.

ul#cssmw {
cursor: default;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
ul#cssmw ul {
cursor: default;
font-size: 0;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
ul#cssmw ul li {
background-image: none;
float: none;
}
ul#cssmw li {
background-image: none;
float: left;
padding: 0 0 0 0;
position: relative;
white-space: nowrap;
}
ul#cssmw li ul {
display: none;
top: 0;
}
ul#cssmw li:hover > ul {
display: block;
position: absolute;
}
ul#cssmw > li {
background-image: url("../cssmw_images/left.gif");
background-position: left top;
background-repeat: no-repeat;
}
ul#cssmw > li > span {
background-image: url("../cssmw_images/right.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}
ul#cssmw > li > span > a {
background-image: url("../cssmw_images/center.jpg");
background-repeat: repeat-x;
color: #fff;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
height: auto;
margin: 0 8px 0 8px;
padding: 5px 5px 5px 5px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: auto;
}
ul#cssmw > li:hover {
background-image: url("../cssmw_images/left_hover.gif");
background-position: left top;
background-repeat: no-repeat;
}
ul#cssmw > li:hover > span {
background-image: url("../cssmw_images/right_hover.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}
ul#cssmw > li:hover > span > a {
background-image: url("../cssmw_images/center_hover.jpg");
background-repeat: repeat-x;
}
ul#cssmw ul.level-1 {
left: 0px;
top: 100%;
}
ul#cssmw ul.level-1 > li {
background-image: none;
}
ul#cssmw ul.level-1 > li > a {
background-color: #fff;
background-image: none;
border-bottom: solid 1px #BABDC2;
border-left: solid 1px #BABDC2;
border-right: solid 1px #BABDC2;
color: #2D2B2E;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
margin: 0 0 0 0;
padding: 5px 5px 5px 5px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
width: auto;
}
ul#cssmw ul.level-1 > li > a:active {
background-color: #D8DCBF;
color: #2D2B2E;
text-decoration: none;
}
ul#cssmw ul.level-1 > li:hover > a {
background-color: #D8DCBF;
color: #2D2B2E;
text-decoration: none;
}
ul#cssmw ul.level-2 {
left: 112px;
}
ul#cssmw ul.level-2 > li {
background-image: none;
}
ul#cssmw ul.level-2 > li > a {
background-color: #fff;
background-image: none;
border-bottom: solid 1px #BABDC2;
border-left: solid 1px #BABDC2;
border-right: solid 1px #BABDC2;
color: #2D2B2E;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
margin: 0 0 0 0;
padding: 5px 5px 5px 5px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
width: 100px;
}
ul#cssmw ul.level-2 > li > a:active {
background-color: #D8DCBF;
color: #2D2B2E;
text-decoration: none;
}
ul#cssmw ul.level-2 > li:hover > a {
background-color: #D8DCBF;
color: #2D2B2E;
text-decoration: none;
}

Sign in to reply to this post

Jason ByrnesWebAssist

you have the width for the second level menu items set to auto.

For the menu to function correctly in IE, you need to specify a pixel based width and height attribute for the menu items.

Sign in to reply to this post

jjenco101368

THANKS! <eom>

Thanks!!!!!!

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...