Hi

I'm creating an intranet web-site for my employer, and I'm having trouble with the CSS being only partially shown in the browser.

The trouble is that the selctor in the last section (bold) is not working when I open the web-page in the browser: it should change the position of the corresponding picture to reflect the current page, but this does not happen.

The strange thing is that it DOES work in the preview window i Sharepoint Designer. The rest of the code is working fine, and the static and hover images are working prefectly, so I think the selector is the problem.

Does anybody know why it doesn't show up in browsers?

Any help would be greatly appreciated.

This is the CSS code:

#outer {
	width:604px;
	Margin-left:auto;
    Margin-right:auto;
}

#main-nav { padding-left: 0px; 
}  
/*/  
#main-nav { padding-left: 11px; overflow: hidden; }  
/* End Hack */ 

#main-nav dt {
          float:left;        
}
#main-nav dt a {
          display:block;
          height: 0px !important;
          height /**/;46px; /* IE 5/Win Hack */
          padding: 46px 0 0 0;
          overflow:hidden; 
          background-repeat:no-repeat;
          
}
#main-nav dt a:hover {
          background- -48px;
}

#main-nav {height: 46px; }
#main-nav dl {margin:0;padding:0; }

#main-nav dt#hardware, 
#main-nav dt#hardware a { width: 150px; background-image: url(../images/nav/Hardware.gif);} 
#main-nav dt#solutions, 
#main-nav dt#solutions a { width: 150px; background-image: url(../images/nav/Solutions.gif); } 
#main-nav dt#compliance, 
#main-nav dt#compliance a { width: 150px; background-image: url(../images/nav/Compliance.gif); } 
#main-nav dt#backlog, 
#main-nav dt#backlog a { width: 150px; background-image: url(../images/nav/Backlog.gif); }
}

div.hardware dt#hardware, 
div.hardware dt#hardware a, 
div.solutions dt#solutions, 
div.solutions dt#solutions a, 
div.compliance dt#compliance, 
div.compliance dt#compliance a, 
div.backlog dt#backlog, 
div.backlog dt#backlog a { 
background- -90px;
}