Dropdown Menu List Style - Not Working In Internet Explorer?

[kbwarriors]

Internet Explorer (even 9) has been nothing but a royal and complete pain in the *** thus far. I finally got a dropdown menu working via CSS and it works great in Firefox and Chrome. However! There's one major problem.. When ever I add a list-style-image or even a list-style-type tag, it appears above everything in Internet Explorer. I'll post the code below, and if anyone can figure out this problem or how to fix it i'll sign my soul to you. PLEASE READ: To see the list effects, I have only added them to two areas at the moment. Diablo 3's "Class Guide" menu and the sub-menu "Barbarian" should have the list-style effects applied to them. View the site in internet explorer to see the problem for yourself *REMOVED* For Analytics purposes Here's the code:/* THE CSS MENU * KEEP COLORS:#1B1B1B, #808080, #282828, #FFD100*/ #nav {float:left;margin:0;padding:0;}#nav li .sub {list-style-image:url(../images/list.png…#nav li a, #nav li {float:left;/*border-radius: 40px 0 / 40px 0;*/}#nav li {list-style:none;position:relative;z-ind…#nav li a {padding: 8px 1.5em;text-decoration:none;color:white;b… solid #808080;border-left:1px solid #404040;border-top:1px solid #404040;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#808080), to(#1B1B1B));background: -webkit-linear-gradient(top, #808080, #1B1B1B); background: -moz-linear-gradient(top, #808080, #1B1B1B);background: -ms-linear-gradient(top, #808080, #1B1B1B);background: -o-linear-gradient(top, #808080, #1B1B1B);filter: progid:DXImageTransform.Microsoft.gradie… endColorstr='#1B1B1B'); /* IE6 & IE7 */-ms-filter: "progid:DXImageTransform.Microsoft.gradi… endColorstr='#1B1B1B')"; /* IE8 */box-shadow: inset 3px 3px 15px #404040;}#nav li a:hover {background:#282828;color:#FFD100;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#808080), to(#000));background: -webkit-linear-gradient(top, #808080, #000); background: -moz-linear-gradient(top, #808080, #000);background: -ms-linear-gradient(top, #808080, #000);background: -o-linear-gradient(top, #808080, #000);filter: progid:DXImageTransform.Microsoft.gradie… endColorstr='#000000'); /* IE6 & IE7 */-ms-filter: "progid:DXImageTransform.Microsoft.gradi… endColorstr='#000000')"; /* IE8 */box-shadow: inset 3px 3px 15px #000;}/* SUBMENU */#nav li ul {display:none;position:absolute;left:0;t…#nav li:hover > ul {display:block;z-index:100;}#nav li ul li, #nav li ul li a {float:none;}#nav li ul li a {width:150px;display:block;} /* SUB SUB MENU */ #nav li ul li ul {display:none;}#nav li ul li:hover ul {left:100%;top:0;}

Edited August 1, 2012 by kbwarriors

[dsonesuk]

I would consider using an actual background image instead of list style, as list styling tends to be inconsistent in look, and positioning in different browsers.

[kbwarriors]

I tried adding it as a "background-image" but for some reason it's just not showing up on any browser. I've tried .sub {background-image:url(../images/list.png);#nav .sub {background-image:url(../images/list.png);

[kbwarriors]

Scratch that, it's also not working in Firefox. It's appearing above the list items and their background when I do a list style as if there was some list-style-position:top outside property. However nothing shows up at all when I do that same tag as a background-image tag. So frustrating...

[Ingolme]

Do you have a block element inside the list item?Edit: I see, you do. And you have set the list-style-position to inside. The bullet appears above because a block does not allow content on the same line. Setting the list-style-position to "inside" makes the bullet act like content that's inside the list item.

Edited May 15, 2012 by Ingolme

[kbwarriors]

The only elements that have a display: block are: #nav li:hover > ul {display:block;z-index:100;}#nav li ul li, #nav li ul li a {float:none;}#nav li ul li a {width:150px;display:block;}

[Ingolme]

I just looked at your site and edited my previous post. It's the list-style-position that's causing the problem.A background image would work well. Be sure to set it to no-repeat and add some padding on the left to prevent content from covering the bullet image.

[kbwarriors]

The background images are now actually appearing but it's moving the entire list item over. I'm thinking it has something to do with using #nav li .sub as the markup to display the background images. This way is pushing list items in the #nav id to the left along with the background images. I tried position:relative and position:absolute Should I be placing the background-image markup in a different tag?

[dsonesuk]

You either add the gradient to li element, and then add background-image to anchor element, OR add span element within anchor element, that will wrap round link text, make it a block element, apply background-image to that, use text-indent or padding-left to create a gap for image to show beside text.

[kbwarriors]

Well, that did it! That was so easy too. This is basically the markup that fixed it and it seems to work in all browsers so far. .sub {background-image:url(../images/list.png);background-repeat:no-repeat;background-position:right;display:block;}.sub:hover {background-image:url(../images/list-hover.png);background-repeat:no-repeat;}

[dsonesuk]

.sub:hover { background-image: url("../images/list-hover.png"); background-repeat: no-repeat; margin-left: -11px; padding-left: 13px;}.sub { background-position: left center; display: block;}

Edited May 15, 2012 by dsonesuk

[helen2263]

Internet Explorer (even 9) has been nothing but a royal and complete pain in the *** thus far. I finally got a dropdown menu working via CSS and it works great in Firefox and Chrome. However! There's one major problem.. When ever I add a list-style-image or even a list-style-type tag, it appears above everything in Internet Explorer. I'll post the code below, and if anyone can figure out this problem or how to fix it i'll sign my soul to you. PLEASE READ: To see the list effects, I have only added them to two areas at the moment. Diablo 3's "Class Guide" menu and the sub-menu "Barbarian" should have the list-style effects applied to them. View the site in internet explorer to see the problem for yourself. http://www.kbwarriors.com/ Here's the code:/* THE CSS MENU * KEEP COLORS:#1B1B1B, #808080, #282828, #FFD100*/ #nav {float:left;margin:0;padding:0;}#nav li .sub {list-style-image:url(../images/list.png…#nav li a, #nav li {float:left;/*border-radius: 40px 0 / 40px 0;*/}#nav li {list-style:none;position:relative;z-ind…#nav li a {padding: 8px 1.5em;text-decoration:none;color:white;b… solid #808080;border-left:1px solid #404040;border-top:1px solid #404040;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#808080), to(#1B1B1B));background: -webkit-linear-gradient(top, #808080, #1B1B1B); background: -moz-linear-gradient(top, #808080, #1B1B1B);background: -ms-linear-gradient(top, #808080, #1B1B1B);background: -o-linear-gradient(top, #808080, #1B1B1B);filter: progid:DXImageTransform.Microsoft.gradie… endColorstr='#1B1B1B'); /* IE6 & IE7 */-ms-filter: "progid:DXImageTransform.Microsoft.gradi… endColorstr='#1B1B1B')"; /* IE8 */box-shadow: inset 3px 3px 15px #404040;}#nav li a:hover {background:#282828;color:#FFD100;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#808080), to(#000));background: -webkit-linear-gradient(top, #808080, #000); background: -moz-linear-gradient(top, #808080, #000);background: -ms-linear-gradient(top, #808080, #000);background: -o-linear-gradient(top, #808080, #000);filter: progid:DXImageTransform.Microsoft.gradie… endColorstr='#000000'); /* IE6 & IE7 */-ms-filter: "progid:DXImageTransform.Microsoft.gradi… endColorstr='#000000')"; /* IE8 */box-shadow: inset 3px 3px 15px #000;}/* SUBMENU */#nav li ul {display:none;position:absolute;left:0;t…#nav li:hover > ul {display:block;z-index:100;}#nav li ul li, #nav li ul li a {float:none;}#nav li ul li a {width:150px;display:block;} /* SUB SUB MENU */ #nav li ul li ul {display:none;}#nav li ul li:hover ul {left:100%;top:0;}

OMG, your drop down menu style is exactly what i've been looking for can I please ask what you've used to get that style or if I can be cheeky and ask if you would not mind sharing the HTML and CSS style code with me. If you do no wish it please do not hesitate to let me know I will respect understand your wishes. Thanks helen