I have run into a problem using the [NAV] skin object and the DNNMenu navigation provider with Safari for the MAC. The problem does not show up with IE, Firefox PC, or Firefox MAC.
When using Safari, there is an extra vertical space below the last root item in the menu. If you have access to a MAC and Safari, you can view the problem at http://www.protegemusicacademy.com.
I have inspected the generated code using Firebug and everything looks normal. Through the process of applying styling to the elements in the navigation structure, I have narrowed the problem to one of the outer-most <span> tags that encloses the menu structure. For some reason, Safari does not render these tags correctly. It is almost as if one of these span tag is being rendered as a block element. Here is all of the menu specific CSS.
/* Main Menu */
/* <span> Top of Root Menu */
.CSSControl
{
}
/* <table>Sub Menu */
.CSSContainerSub
{
cursor: hand;
cursor: pointer;
}
/* Base State */
/* <div> */
.CSSNodeRoot
{
font-family: Arial, Sans-Serif, Helvetica;
color: black;
font-size: 10pt;
border-bottom: #ff8b00 1px solid;
width: 152px;
margin-bottom: 3px;
padding-left: 4px;
background-color: #F1F1F1;
}
/* <span> */
.CSSNodeRoot span
{
white-space: nowrap;
line-height: 20px;
background-color: transparent;
}
/* <tr> */
.CSSNode
{
cursor: hand;
cursor: pointer;
margin-left: 4px;
}
/* <td> */
.CSSNode td
{
font-family: Arial, Sans-Serif, Helvetica;
color: black;
font-size: 10pt;
border-bottom: #ff8b00 1px solid;
padding-top: 4px;
padding-bottom: 3px;
padding-left: 4px;
background-color: #F1F1F1;
white-space: nowrap;
}
/* Selected State */
/* <div> */
.CSSNodeSelectedRoot
{
font-family: Arial, Sans-Serif, Helvetica;
color: black;
font-size: 10pt;
border-bottom: #ff8b00 1px solid;
width: 152px;
margin-bottom: 3px;
padding-left: 4px;
background-color: #F1F1F1;
font-weight: bold;
}
/* <span> */
.CSSNodeSelectedRoot span
{
white-space: nowrap;
line-height: 20px;
background-color: transparent;
}
/* <tr> */
.CSSNodeSelectedSub
{
cursor: hand;
cursor: pointer;
margin-left: 4px;
}
/* <td> */
.CSSNodeSelectedSub td
{
white-space: nowrap;
font-family: Arial, Sans-Serif, Helvetica;
color: black;
font-size: 10pt;
border-bottom: #ff8b00 1px solid;
padding-top: 4px;
padding-bottom: 3px;
padding-left: 4px;
background-color: #F1F1F1;
font-weight: bold;
}
/* <???> */
.CSSNodeHover
{
}
/* Hover State */
/* <div> */
.CSSNodeHoverRoot
{
font-family: Arial, Sans-Serif, Helvetica;
color: black;
font-size: 10pt;
border-bottom: #ff8b00 1px solid;
width: 152px;
margin-bottom: 3px;
padding-left: 4px;
background-color: #C1C1C1;
}
/* <span> */
.CSSNodeHoverRoot span
{
white-space: nowrap;
line-height: 20px;
background-color: transparent;
}
/* <tr> */
.CSSNodeHoverSub
{
cursor: hand;
cursor: pointer;
margin-left: 4px;
}
/* <td> */
.CSSNodeHoverSub td
{
white-space: nowrap;
font-family: Arial, Sans-Serif, Helvetica;
color: black;
font-size: 10pt;
border-bottom: #ff8b00 1px solid;
padding-top: 4px;
padding-bottom: 3px;
padding-left: 4px;
background-color: #C1C1C1;
}
/* Breadcrumb State */
/* <div> */
.CSSBreadCrumbRoot
{
font-family: Arial, Sans-Serif, Helvetica;
color: black;
font-size: 10pt;
border-bottom: #ff8b00 1px solid;
width: 152px;
margin-bottom: 3px;
padding-left: 4px;
background-color: #F1F1F1;
font-weight: bold;
}
/* <span> */
.CSSBreadCrumbRoot span
{
white-space: nowrap;
line-height: 20px;
background-color: transparent;
}
/* <tr> */
.CSSBreadCrumbSub
{
cursor: hand;
cursor: pointer;
margin-left: 4px;
}
/* <td> */
.CSSBreadCrumbSub td
{
white-space: nowrap;
font-family: Arial, Sans-Serif, Helvetica;
color: black;
font-size: 10pt;
border-bottom: #ff8b00 1px solid;
padding-top: 4px;
padding-bottom: 3px;
padding-left: 4px;
background-color: #F1F1F1;
font-weight: bold;
}
/* <td> */
.CSSIcon
{
}
/* <img> */
.CSSNodeRoot img, .CSSNodeRoot td img, .CSSNodeSelectedRoot img, .CSSNodeSelectedRoot td img, .CSSNodeHoverRoot img, .CSSNodeHoverRoot td img
{
margin-right: 5px;
}
.CSSSeparator
{
}
.CSSLeftSeparator
{
}
.CSSRightSeparator
{
}
.CSSLeftSeparatorSelection
{
}
.CSSRightSeparatorSelection
{
}
.CSSLeftSeparatorBreadCrumb
{
}
.CSSRightSeparatorBreadCrumb
{
}
Thanks...