Hi,
i have created a CSS skin, but the Menu (dnnmenu) is not working in IE, if you hover over an item the items below the item are being moved upwards. This is not occuring in FireFox. I really need help with this please!
http://funda.2k3srv.atlan.nl/dnn/
CSS used:
body {
text-align: center;
height: 95%;
}
div#MainContent {
width: 848px;
height: 562px;
margin: 10% auto;
text-align: left;
background-color: #532e63;
padding: 3px;
/* Include a hack just to be nice to IE*/
_position: relative;
_top: 0;
}
#LeftTop {background-image: url(images/topF.jpg); background-color: #ffffff; height: 357px; width: 248px; float: left }
#TopMenu { background-color: #ffffff; height: 45px; width: 600px; float: right; }
#SiteContent { background-color: #ffffff; height: 221px; width: 600px; float: right; overflow: auto;}
#LeftMenu1 {background-image: url(images/leftbottom.gif); background-color: #ffffff; height: 205px; width: 39px; float: left; clear: left; }
#LeftMenu2 {background-image: url(images/midbottom.gif); background-color: #e6e6e6; height: 205px; width: 107px; float: left; }
#LeftMenu3 { background-image: url(images/rightbottom.gif); background-color: #123533; height: 205px; width: 102px; float: left; }
#LeftMenu {background-image: url(images/bottomF.jpg); background-color: #ffffff; height: 205px; width: 248px; float: left; clear: left; }
#FooterRight {background-image: url(images/intro.gif); background-color: #ffffff; height: 296px; width: 600px; float: right;}
.main_dnnmenu_CSSContainerRoot {
background-color: #000000;
height: 400px;
}
.main_dnnmenu_CSSControl {
cursor: pointer;
cursor: hand;
background-color: #000000;
height: 400px;
}
.main_dnnmenu_CSSNode { /*TD if menu option for using tables is on*/
cursor: pointer;
cursor: hand;
color: #532e63;
font-size: 11pt;
font-weight: normal;
font-style: normal;
background-color: #ee3224;
height: 30px;
font-family: Arial, Helvetica;
white-space: nowrap; /*Word wrapping menu item now optional*/
padding: 12px 12px 0px 5px; /*explicitly set padding for root menu items*/
margin: 10px 0px 0px 0px;
}
.main_dnnmenu_CSSNodeRoot { /*TD if menu option for using tables is on*/
cursor: pointer;
cursor: hand;
color: #532e63;
font-size: 11pt;
font-weight: normal;
font-style: normal;
background-color: #ee3224;
height: 30px;
font-family: Arial, Helvetica;
white-space: nowrap; /*Word wrapping menu item now optional*/
padding: 12px 12px 0px 5px; /*explicitly set padding for root menu items*/
margin: 10px 0px 0px 0px;
}
.main_dnnmenu_CSSNodeSelectedRoot{
cursor: pointer;
cursor: hand;
color: #532e63;
font-size: 11pt;
font-weight: normal;
font-style: normal;
background-color: #ffffff;
height: 30px;
font-family: Arial, Helvetica;
white-space: nowrap; /*Word wrapping menu item now optional*/
padding: 12px 12px 0px 5px; /*explicitly set padding for root menu items*/
margin: 10px 0px 0px 0px;
}
.main_dnnmenu_CSSSeparator {
cursor: hand;
color: #532e63;
font-size: 11pt;
font-weight: normal;
font-style: normal;
background-color: #ffffff;
height: 30px;
}
.main_dnnmenu_CSSNodeHover {
/*cursor: pointer;
cursor: hand;
color: #532e63;
font-size: 11pt;
font-weight: normal;
font-style: normal;
background-color: #ffffff;
height: 30px;
font-family: Arial, Helvetica;
white-space: nowrap; /*Word wrapping menu item now optional*/
/*padding: 12px 12px 0px 5px; /*explicitly set padding for root menu items*/
/*margin: 10px 0px 0px 0px;*/
}
.main_dnnmenu_icon {
}
.main_dnnmenu_CSSContainerSub {
/*
background-color: #cad5ea;
height: 40px;
cursor: pointer;
cursor: hand;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#696969', Direction=135, Strength=3);
/*padding: 12px 12px 0px 5px; /*explicitly set padding for sub-menus */
}
.main_dnnmenu_arrow {
}
.main_dnnmenu_rootmenuarrow {
}
html file:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="intro.css">
</head>
<body >
<div id="MainContent">
<div id="LeftTop">[LOGIN]</div>
<div id="TopMenu"></div>
<div id="SiteContent">[CONTENTPANE]</div>
<div id="FooterRight"></div>
<div id="LeftMenu1"></div>
<div id="LeftMenu2">[NAV]</div>
<div id="LeftMenu3"></div>
</div>
</body>
</html>