I have created a horizontal navigation menu based on the HouseMenu skin object (and following advice given in tutorial 12). See the nav bar in action here in my test environment. I have tested it in Firefox, Opera, IE7 and Safari and it looks consitent enough across those browsers.

However today I got to check it for the first time on IE6 and the behaviour is not at all consistent. Each indivudal link in the menu appears across the full width of the screen (see this graphic file for a demonstration). I've looked into the skin.css file in an attempt to tweak it but without success (my guess is that it is one of the values set for for #HouseMenuNav li). Below is what I consider is a relevant excerpt from the skin.css file:

/* =====================================
    CSS STYLES FOR HouseMenu SkinObject
   =====================================
*/

/* Horizontal Menu */
#HouseMenuNav
{
    /*menu wrapper div */
    font: bold 100% Arial, Tahoma, Verdana, Helvetica, Sans-Serif;
}
#HouseMenuNav ul
{
    border: 0;
    margin: 0;
    list-style: none;
    float: left;
}
#HouseMenuNav li
{
    font-size: 90%;
    list-style: none;
    float: left;
    padding: 3px 2px 0 0;
}

Any ideas on how this can be addressed?

Thanks

Eoghano

Hello,

Looking at your CSS and comparing it to my CSS for the Horizontal menu it is pretty much exactly the same, so it doesn't appear as though this is the problem. - I've just double checked my menu in IE6 and it works fine.

I was about to suggest double checking the XML settings, but noticed that I left the setup to vertical in my menu and it still displays horizontal. - The v and h settings do not have any effect on these menus.

All I can really suggest is to load up the code from the simple red leaf skin and place the skin on one of your pages to double check everything is working correctly and then break down the code one section at a time in your own skin.

For instance - remove all of the css code apart from the menu and see if you can find the css that is causing the problem.

I've also just had another thought - check your ie.hacks file and make sure you have the same settings as the horizontal skin and that you don't have the settings in there from the vertical menu. - That may cause you problems in IE.

Hope this gives you a starting point, thanks

Lee,
Thanks for the swift and comprehensive reply. I decided to go back to the original horizontal skin that subscribers could download with Tutorial 13. I then uploaded the "Simple Red Leaf Skin 5 Panes" horizontal menu skin - without any changes - to my DNN installation. I then applied it to one page on my site, then checked that page for IE6 compatability (via browsershots.org check out the results here). As you can see the skin from tutorial 13 is exhibiting the exact same problem in IE6! This is making me think that maybe the skin is not IE6 compatible. Or could it be something else? The page with the "Simple Red Leaf Skin 5 Panes" skin applied to it that is causing the problem is this one.
Any ideas?!?!?
Cheers,
Eoghano

Hello,

The 5 pane skin does not have a horizontal menu, it's just the 3 pane skin. - I've just included all of the code for the various skins. - I can see how this can be confusing, I probably should not have included the 5 pane version in the code.

Here's the skin 3 pane skin (horizontal menu) loaded into a test area for you to try in IE6:
http://skins.dnncreative.com/horizo...fault.aspx

The announcements page has the 5 pane version (vertical menu)

Lee,
The links to the page on browsershots.org in my last posting above may give a confusing picture (as I now note it wasn't always a horizontal red leaf skin that broswershots.org picked up). However this new page on browsershots.org does show the horizontal menu going wonky in IE6:
http://browsershots.org/screenshots...8a05e379f/
Eoghano

Try the 3 pane version and see what happens

Okay, now we're making progress! I tried the 3 pane version of the horizintal menu and it worked fine in IE6 (see it here, the page I am trying with the 3 pane skin is this one). I noted that the following lines were not in the iehacks.css file for the 3 pane horizntal menu but were in the corresponding file for the 5 pane menu:

#HouseMenuNav li a:link, #HouseMenuNav li a:visited
{
    width: auto;
    height: 1px;
    voice-family: "\"}\"";
    voice-family:inherit;
     /* for IE 6 and above */
    height: 100%;
}

This same code was in my (four pane) horizontal CSS menu so I deleted it from the iehacks.css file, uploaded the updated skin to DNN, applied it to a page and - hey presto - it worked (see here).

Cheers for help in getting this one sorted!

Eoghano