Well I am about to go bald with this problem. I am in the process of learning how to skin and also skinning my site. Now I have hit abrick wall and it's driving me nuts as I can't figure out why it's happening.
I am using a Vertical menu with dropdown menus from it. This is using the default DNN skin but modified. The problem I have is that when I view the submenus there is a white border round every item, and I have no idea where this is coming from or how to remove it. I have tried commenting out all sorts of parts from the .css file but nothing seems to remove it. I am begining to think that this is a flaw with DNN
Here is a link to an image to you can see the problem: Image of the Borders
This is the HTML code I am using:
<![CDATA[<table class="pagemaster" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<table class="skinmaster" width="100%" border="0" align="center" cellspacing="0"cellpadding="0">
<tr>
<td id="ControlPanel" runat="server" class="contentpane" valign="top" align="center">
</td>
</tr>
<tr>
<td valign="top">
<table class="skinheader" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td valign="middle" align="left">[LOGO]</td>
</tr>
</table>
<table class="menubar" cellspacing="0" cellpadding="3" width="100%" border="0">
<tr>
<td width="100%" valign="middle" align="left" nowrap>[MENU]</td>
</tr>
</table>
<table cellspacing="0" cellpadding="3" width="100%" border="0">
<tr>
<td width="200" valign="top" align="left" nowrap>[CURRENTDATE]</td>
<td width="100%" valign="top" align="center"><b>..::</b> [BREADCRUMB]<b>::..</b></td>
<td width="200" valign="top" align="right" nowrap>[USER] [LOGIN]</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" height="100%">
<table cellspacing="3" cellpadding="3" width="100%" border="0">
<tr>
<td class="toppane" colspan="3" id="TopPane" runat="server" valign="top" align="center"></td>
</tr>
<tr valign="top">
<td class="leftpane" id="LeftPane" runat="server" valign="top" align="center"></td>
<td class="contentpane" id="ContentPane" runat="server" valign="top" align="center"></td>
<td class="rightpane" id="RightPane" runat="server" valign="top" align="center"></td>
</tr>
<tr>
<td class="bottompane" colspan="3" id="BottomPane" runat="server" valign="top" align="center"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
<table class="grass" cellspacing="0" cellpadding="0" width="100%" border="0"><tr>
<td valign="middle" align="center">[COPYRIGHT] [TERMS] [PRIVACY]</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
]]>
This is the CSS code I am using:
<![CDATA[/*
================================
Skin styles for DotNetNuke
================================
*/
.pagemaster {
width: 100%;
height: 100%;
background-color: #FEFEFE;
}
.skinmaster {
height: 100%;
background-image: url(background.jpg);
BORDER-RIGHT: #C9C0Af 0px solid;
BORDER-TOP: #C9C0Af 0px solid;
BORDER-LEFT: #C9C0Af 0px solid;
BORDER-BOTTOM: #C9C0Af 0px solid;
moz-border-radius-bottomleft: 15px;
moz-border-radius-bottomright: 15px;
moz-border-radius-topleft: 3px;
moz-border-radius-topright: 3px;
}
.skinheader {
BACKGROUND-IMAGE: url(background.jpg);
}
.grass {
BACKGROUND-IMAGE: url(grass.gif); HEIGHT:30px;
}
.menubar {
BACKGROUND-IMAGE: url(wood.jpg); HEIGHT:30px;
}
.controlpanel {
width: 100%;
background-color: #FFFFFF;
}
.toppane {
width: 100%;
background-color: transparent;
padding-left: 6px;
padding-right: 4px;
padding-top: 6px;
}
.leftpane {
width: 175px;
background-color: transparent;
padding-left: 6px;
padding-right: 4px;
padding-top: 6px;
}
.contentpane {
width: 100%;
background-color: transparent;
padding-left: 6px;
padding-right: 4px;
padding-top: 6px;
}
.rightpane {
width: 175px;
background-color: transparent;
padding-left: 6px;
padding-right: 4px;
padding-top: 6px;
}
.bottompane {
width: 100%;
background-color: transparent;
padding-left: 6px;
padding-right: 4px;
padding-top: 6px;
}
.MainMenu_MenuContainer
{
BACKGROUND-IMAGE: url(wood.jpg);
/* background-color: transparent; */
}
.MainMenu_MenuBar {
cursor: pointer;
cursor: hand;
height:16px;
background-color: Transparent;
}
.MainMenu_MenuItem {
cursor: pointer;
cursor: hand;
color: white;
font-family: Tahoma, Arial, Helvetica;
font-size: 9pt;
font-weight: bold;
font-style: normal;
background-color: Transparent;
}
.MainMenu_MenuIcon {
BACKGROUND-IMAGE: url(wood.jpg);
cursor: pointer;
cursor: hand;
text-align: center;
width: 15px;
height: 21px;
}
.MainMenu_SubMenu {
BACKGROUND-IMAGE: url(wood.jpg);
z-index: 1000;
cursor: pointer;
cursor: hand;
/*filter:progid<img src='desktopmodules/ntforums/images/emoticons/biggrin.gif' height='20' width='20' border='0' title='Big Grin' align='absmiddle'>XImageTransform.Microsoft.Shadow(color='#696969', Direction=135, Strength=1); */
}
.MainMenu_MenuBreak {
height: 0px;
}
.MainMenu_MenuItemSel {
background-color: #f85959;
cursor: pointer;
cursor: hand;
color: white;
font-family: Tahoma, Arial, Helvetica;
font-size: 9pt;
font-weight: bold;
font-style: normal;
}
.MainMenu_MenuArrow {
border-right: #B89CBB 0px solid;
border-bottom: #B89CBB 0px solid;
border-top: #B89CBB 0px solid;
font-family: webdings;
font-size: 10pt;
cursor: pointer;
cursor: hand;
}
.MainMenu_RootMenuArrow {
font-family: webdings;
font-size: 10pt;
cursor: pointer;
cursor: hand;
}
.StandardButton {
background: #EB613E none;
color: #FFFFFF;
font-family:Verdana, sans-serif;
font-size: 11px;
font-weight: normal;
}
.TreeViewMenu {
width: 175px;
BORDER-RIGHT: #EB613E 0px solid;
BORDER-TOP: #EB613E 0px solid;
BORDER-LEFT: #EB613E 0px solid;
BORDER-BOTTOM: #EB613E 0px solid;
moz-border-radius-bottomleft: 15px;
moz-border-radius-bottomright: 15px;
moz-border-radius-topleft: 3px;
moz-border-radius-topright: 3px
}
.TreeViewMenu_Header {
BACKGROUND-IMAGE: url(wood.jpg);
}
.Head {
font-family: Tahoma, Arial, Helvetica;
font-size: 18px;
font-weight: normal;
color: #333333;
}
]]>