[tjs]

Hey all,
I'm currently working on a css nav menu with rollovers for my site. It looks perfect in Firefox, but in IE, when the cursor is placed over the button, nothing happens. Here's the sample css I'm using:
Button's normal state

Code:

 #button_name/linkname {
     float: left;
     display: inline;
     list-style: none;
     width: button width here;
     height: button height here;
     margin-left: 0;
     padding-left: 0;
     background-image: url(button_image_here);
     background-repeat: no-repeat;
}

Botton's Hover State

Code:

#button_name/linname:hover {
     float: left;
     display: inline;
     list-style: none;
     width: button width here;
     height: button height here;
     margin-left: 0;
     padding-left: 0;
     background-image: url(rollover_button_image_here);
     background-repeat: no-repeat;
}

If someone can explain this problem, I'd appreciate it.
Thanks

[ste]

i'm not sure if it's possible, but if you could post an example we could have a look and might be able to help you a little more.

[Spaced]

With IE you need to use the a:hover element. IE isn't smart enough to pick up on class:hover.
so what you need is

Code:

#button_name/linname a:hover {your css}

try that hopefully it helps

[tjs]

I tried the "a:hover" element, and then it didn't work in Firefox or IE! Here's my entire CSS file for my page. The part I'm having trouble with is all the way down where it says /* Top Menu */ . Here's the CSS:

Code:

body 
{
	margin: 0;
	padding: 0;
	color: #333333;
	text-align: center;
	background-color: #c0c0c0;
	font: normal 12px "Trebuchet MS", "Lucida Grande", verdana, georgia, sans-serif;
}

/* Links */

a:link { text-decoration: none; color: #1f62b0;  } 

a:visited { text-decoration: none; color: #6b99b8;  }

a:active { color: #99335c; border-bottom-color: #99335c; }

a:hover { color: #99335c; border-bottom-color: #99335c; }

/* Html Elements */

h6 { font-weight: normal; margin: 5px 0 10px; padding: 0; line-height: 1.8em; }

h5 { font-weight: normal; margin: 5px 0 10px; padding: 0; line-height: 1.8em; }

h4 { font-weight: normal; margin: 5px 0 10px; padding: 0; line-height: 1.8em; }

h3 { font-weight: normal; margin: 5px 0 10px; padding: 0; line-height: 1.8em; }

h2 { font-weight: normal; margin: 5px 0 10px; padding: 0; line-height: 1.8em; }

h1 { font-weight: normal; margin: 5px 0 10px; padding: 0; line-height: 1.8em; }

h6 a
{
	font-weight: normal;
	border-bottom-width: 0;
}

h5 a
{
	font-weight: normal;
	border-bottom-width: 0;
}

h4 a
{
	font-weight: normal;
	border-bottom-width: 0;
}

h3 a
{
	font-weight: normal;
	border-bottom-width: 0;
}

h2 a
{
	font-weight: normal;
	border-bottom-width: 0;
}

h1 a
{
	font-weight: normal;
	border-bottom-width: 0;
}

h1 { font-size: 28px; }

h2 { font-size: 26px; }

h3 { font-size: 24px; }

h4 { font-size: 20px; }

h5 { font-size: 18px; }

h6 { font-size: 16px; }

pre
{
	color: #555555;
	margin: 20px;
	padding: 20px;
	line-height: 1.8em;
}

blockquote
{
	color: #555555;
	margin: 20px;
	padding: 20px;
	line-height: 1.8em;
}

ol
{
	color: #555555;
	margin: 20px;
	padding: 20px;
	line-height: 1.8em;
}

ul
{
	color: #555555;
	margin: 20px;
	padding: 20px;
	line-height: 1.8em;
}

ul
{
	list-style-type: square;
}

pre { background-color: #f9f9f9; border: 1px solid #bbbbbb; }

blockquote { background-color: #f9f9f9; border: 1px solid #bbbbbb; }

ins { text-decoration: none; font-weight: bold; color: #555555; }

del { color: #555555; }

acronym { cursor: help; }

abbr { cursor: help; }

/* Structure */

#container
{
	width: 750px;
	text-align: left;
	margin: 20px auto;
	line-height: 1.6em;
	vertical-align: middle;
}

#header
{
	padding: 0;
	color: #cfcfcf;
	margin: 0 0 20px;
	text-align: center;
	border: 0;
	vertical-align: middle;
}

#wrapper
{
	float: left;
	width: 99.7%;
	color: #333333;
	margin-bottom: 10px;
	border-left: 1px solid #999999;
	border-right: 1px solid #000000;
	background: #f6f4f4 url(images/bg.png) top left repeat-y;
}

#content-wrapper
{
	width: 60%;
	float: left;
}

#content
{
	width: 116%;
	float: left;
}

#sidebar-wrapper
{
	width: 27%;
	float: right;
	color: #888888;
	background-color: #333333;
}

#sidebar
{
	float: right;
	width: 110%;
}

#footer
{
	clear: both;
	color: #999999;
	padding: 10px 0;
	text-align: center;
	margin: 20px 0 40px;
	background-color: #222222;
	border: 1px solid #000000;
}

/* Header */

#header h1 {
	margin: 0;
	padding: 30px 0 15px;
	line-height: 1.0em;
	background-color: #FFFFFF;
}

#header h2 { margin: 0; padding: 0 0 30px; text-transform: uppercase; font-size: 13px; color: #888888; line-height: 1.0em; }

/* Content */

#content dl { padding: 0; margin: 20px; }

#content dt { font-size: 24px; color: #99335c; line-height: 1.6em; }

#content dd { padding: 0; margin: 10px 0; }

#content dd.summary 
{ 
	color: #777777; 
	font-size: 10px; 
	margin-bottom: 20px;
	padding-bottom: 11px; 
	border-bottom: 1px solid #aaaaaa; 
}

#content dd.summary a:visited { border-bottom-width: 0; }

#content dd.summary a:link { border-bottom-width: 0; }

#content dd p.img { float: left; margin: 0 15px 0 0; }

#content dd p.img img { padding: 8px; border: 1px solid #bbbbbb; background-color: #f9f9f9; }

/* Sidebar */

#sidebar ul {
	padding: 0;
	list-style-type: none;
	margin: 15px 9px 50px 9px;
}

#sidebar li { margin: 0; padding: 0; color: #eeeeee; border-bottom: 1px solid #777777; }

#sidebar li.title { margin: 0 5px 10px; text-transform: uppercase; border-bottom-color: #666666; color: #888888; }

#sidebar li a:visited
{
	color: #bbbbbb;
	display: block;
	padding: 10px 5px; 
	border-bottom-width: 0;
}

#sidebar li a:link
{
	color: #bbbbbb;
	display: block;
	padding: 10px 5px; 
	border-bottom-width: 0;
}

#sidebar li a:active
{
	color: #000000;
	background-color: #46D4F8;
}

#sidebar li a:hover
{
	background-color: #ff4d94;
	background: url('tnp2.gif');
	color: #FFFFFF;
}

/* Footer */

#footer p { margin: 0; padding: 0 10px 10px; }

#footer a:visited { color: #999999; border-bottom-color: #999999; }

#footer a:link { color: #999999; border-bottom-color: #999999; }

#footer a:active { color: #bbbbbb; border-bottom-color: #bbbbbb; }

#footer a:hover { color: #bbbbbb; border-bottom-color: #bbbbbb; }

/* Top Menu */


.top {
	padding-left: 0;
	font-size: large;
	font-style: normal;
	font-weight: normal;
	font-family: Trebuchet MS, Verdana, Arial, Helvetica;
	line-height: normal;
	font: 18px/70px Trebuchet MS, Verdana, Arial, Helvetica;
	padding: 0px 0 0 0;
	float: left;
	display: inline;
	list-style: none;
	width: 93.7px;
	height: 67px;
	margin-left: 0;
	background-image: url(tnblue.gif);
	background-repeat: no-repeat;
	vertical-align: middle;
	text-align: center;
	text-indent: inherit;
	color: #FFFFFF;
	text-decoration: none;
	text-transform: none;
	margin-top: 0px;
	margin-bottom: 0px;
	background-color: #E0E0E0;
	word-spacing: 0px;
}
 .top:hover {
    padding-left: 0;
	font-size: large;
	font-style: normal;
	font-weight: normal;
	font-family: Trebuchet MS, Verdana, Arial, Helvetica;
	line-height: normal;
	font: 18px/70px Trebuchet MS, Verdana, Arial, Helvetica;
	padding: 0px 0 0 0;
	float: left;
	display: inline;
	list-style: none;
	width: 93.7px;
	height: 67px;
	margin-left: 0;
	background-image: url(tngreen.gif);
	font-weight: bold;
	cursor: pointer;
	background-repeat: no-repeat;
	vertical-align: middle;
	text-align: center;
	text-indent: inherit;
	color: #000000;
	text-decoration: none;
	text-transform: none;
	margin-top: 0px;
	margin-bottom: 0px;
	background-color: #E0E0E0;
	background: url('tngreen.gif');
	word-spacing: 0px;
} 

#top:hover
{
	background-color: #ff4d94;
	background: url('tngreen.gif');
	color: #000000;
}

 .top_over {
	float: left;
	display: inline;
	list-style: none;
	width: 93.7px;
	height: 67px;
	margin-left: 0;
	padding-left: 0;
	background-image: url(tngreen.gif);
	background-repeat: no-repeat;
	vertical-align: middle;
	text-align: center;
	text-indent: inherit;
	font-size: large;
	color: #000000;
	font-style: normal;
	text-decoration: none;
}
 .top_active {
	float: left;
	display: inline;
	list-style: none;
	width: 93.7px;
	height: 67px;
	margin-left: 0;
	padding-left: 0;
	background-image: url(tngreen.gif);
	background-repeat: no-repeat;
	vertical-align: middle;
	text-align: center;
	text-indent: inherit;
	font-size: large;
	color: #000000;
	font-style: normal;
	text-decoration: none;
}

[Spaced]

Do you have an example of this page up online, I'd like to see your html. From your css it seems, at least in your .top class you've got a lot of stuff you don't need. But I wouldn't mind see the actual structure.