Hi there,

I am having a little difficulty skinning the menu bar in DotNetNuke 5 so was wondering if I could ask you guys for some advice.

Below is a screenshot of what I currently have,

At the moment the text labels are moving about when unselected/selected, but not on hover.  I'm not quite sure why but I guess I have done something drastically wrong with the CSS...

/*--------- dnn menu style ----------*/
/* main menu td */
.main_dnnmenu_bar
{
 cursor:pointer;
 font-size: 11px;
 background-color:transparent;
 width:970px;
}

/*  Main Menu Normal  */
.main_dnnmenu_rootitem 
{ 
 color: #375162;
 font-size: 13px;
 font-weight:bold;  
 text-align:center;
 text-transform:uppercase;
 white-space:nowrap;
 background:url(../images/menu_inactive.png) no-repeat;
 float:left;
 Width:76px;
 Height:85px;
}

.main_dnnmenu_rootitem span 
{ 
 color:#375162;
 position:relative;
 left:-32px;
 top:32px;
}

.main_dnnmenu_rootitem span.icn 
{ 
 position:relative;
 left:15px;
 top:10px;
}

/*  Main menu hover  */
.main_dnnmenu_rootitem_hover
{ 
 color:#ffffff;
 font-size: 13px;
 font-weight:bold;
 text-align:center;
 text-transform:uppercase;
 white-space:nowrap;
 background:url(../images/menu_hover.png) no-repeat;
 float:left;
 Width:76px;
 Height:85px;
}

.main_dnnmenu_rootitem_hover span 
{ 
 color:#ffffff;
 position:relative;
 left:-32px;
 top:32px;
}

.main_dnnmenu_rootitem_hover span.icn 
{ 
 position:relative;
 left:15px;
 top:10px;
}

/*  Main menu selected  */
.main_dnnmenu_rootitem_selected
{
 color:#ffffff;
 font-weight:bold;
 text-align:center;
 font-size: 13px;
 text-transform:uppercase;
 white-space:nowrap;
 background:url(../images/menu_active.png) no-repeat;
 float:left;
 Width:76px;
 Height:85px;
}

.main_dnnmenu_rootitem_selected span 
{ 
 color:#ffffff;
 position:relative;
 left:-32px;
 top:32px;
}

.main_dnnmenu_rootitem_selected span.icn 
{ 
 position:relative;
 left:15px;
 top:10px;
}

The icons are both 48x48 png images.  Basically I'm trying to get them in the middle of each button with the textual label in the middle of the bit below it.  At the moment if I remove the image the text moves too, this isn't so good, I'd rather they were completely independent but not sure if I can do this.

Any help would be greatly appreciated as CSS is not my thing :(

Nick.