Menu Navigation not nested properly on IE

#1 / Sep 07, 2012 6:28am

nuvole

14 posts

Hi, here’s my problem:

I have a css dropdown menu (no javascript) that doesn’t work properly on IE (the last <li> item goes out of the <ul> list). It works also in IE with no EE tags (plain html and css) but when I turn it into a dynamical nav it has this problem.

HTML:

<div id="menu">
<ul id="nav">

{exp:channel:categories category="Edizioni" show_empty="no" channel="edizioni-passate"}
<li>
<a href="http://{path=edizioni/edizioni-passate}class=current">_Edizione {category_name}</a>
</li><!-- Edizioni passate -->

{/exp:channel:categories}


{exp:channel:categories category="Edizioni" show_empty="no" channel="edizione-corrente"}
<li>
<a href="http://{path=edizioni/edizione-corrente}class=current">_Edizione {category_name}</a>
</li><!-- Edizione corrente -->

{/exp:channel:categories}

<li><a href="#class=current">Gallery</a>
          <ul>
{exp:channel:categories category="Edizioni" channel="gallery" show_empty="no"}
            <li><a href="http://{path=gallery}">{category_name}</a></li>
{/exp:channel:categories}
          </ul><!-- anni della Galleria -->
</li><!-- Galleria -->

<li>
<a href="http://{path=contatti}class=current">Contatti</a>
</li><!-- Contatti -->

CSS:

#menu {
display: table;
width: 100%;
height: 33px;
}

#nav {
display: table-cell;
vertical-align: middle;
width: 100%;
margin: 0;
padding: 0;
}

#menu li {
position: relative;
list-style: none;
float: left;
padding-right: 10px;
}

#menu li a {
display: block;
padding: 3px;
text-decoration: none;}

#menu li a:hover {
background-color: #212120;
background-image: url({site_url}images/interface/nav_hover_bar.png);
background-repeat: repeat-x;
background-position: bottom;
}

#menu li .current {
background-color: #212120;
background-image: url({site_url}images/interface/nav_hover_bar.png);
background-repeat: repeat-x;
background-position: bottom;
}

#menu li ul {
position: absolute;
display: none;
width: 4em;
z-index: 99;
}

#menu li:hover ul, #menu li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}

#menu li:hover li, #menu li.hover li {
float: none;
}

#menu li:hover li a, #menu li.hover li a {
background-color: #000000;
}

#menu li li a:hover {
background-color: #e82e8a;
background-image: none;
}

HTML with no EE tags that works:

<div id="menu">
<ul id="nav">
<li><a href="#">Edizione 2011</a></li>
<li><a href="#">Edizione 2012</a></li>
<li><a href="#">Gallery</a>
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
          </ul>
</li>
<li><a href="#">Contatti</a></li>
</ul>

The site I’m working on: http://www.comequandosposi.it/2012/ The nav works in Safari, Firefox, Chrome, but not in Internet Explorer (the item “Contatti” goes away over the Facebook link).

I would appreciate if someone could help me, Thanks.

#2 / Sep 10, 2012 5:04am

Shane Eckert
7174 posts

Hello nuvole,

Thank you for posting your question!

As I understand your question, you have a dynamic menu that works across all browsers but not IE. That’s frustrating! Cross browser issues are not the most fun you can have.

Okay, so when you remove the channel category tags and hard code the menu items in, then it works again. So the thought here is that the channel category tag is responsible for the menu not working in IE. Is that right?

Can you show me the rendered code from IE? Just right click, view source, and then paste in here or use pastie. I do not have IE so I cannot see what is being produced by the block of code you have. That’s going to help me determine what is going on.

As soon as I have that, we can continue the troubleshooting process!

Cheers,
#3 / Sep 10, 2012 5:45am

nuvole
14 posts

Yes, the problem is in the channel category, I suppose (without the EE tags it works well also in IE). Here’s the source in IE (I copied only the navigation menu):

http://pastie.org/4694605

and the screenshots of the menu:

http://i49.tinypic.com/2mnfxvb.jpg

Thank you
#4 / Sep 11, 2012 10:57am

Shane Eckert
7174 posts

Hello nuvole,

I am not seeing anything that would cause this. The rendered code looks fine. What if you take that and put it in a template, does it look the same on IE?

One you have that reproduced you can start playing with the HTML and CSS to get it to look right.

I would like to see the source from an example that is working.

Thank you,
#5 / Sep 12, 2012 5:57am
nuvole
14 posts
Hi, I resolved it by removing
```
#nav {
display: table-cell;
}
```
even if I still haven’t figured out why by doing this now it works.

Thank anyway for your help.
#6 / Sep 12, 2012 2:31pm

Shane Eckert
7174 posts

Hey nuvole,

CSS!! Gotta love it.

Glad that things are resolved!

If you need anything else, please just let me know by opening a new thread.

Cheers,

Thread

nuvole

Shane Eckert

nuvole

Shane Eckert

nuvole

Shane Eckert

Username

Password

Thread