Jump to content

CSS2 :hover Problem in IE6


kwilliams
 Share

Recommended Posts

I've continued to have this problem with our old site, which is live until we get our new site out. Basically, our site loads fine in Firefox, but very slowly in IE6. I think it's because of an extra .hta file that exists to make the CSS popups with in IE. So now I'm trying to get rid of that file, and use the CSS :hover fix noted on several articles (Ex: http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp and http://www.quirksmode.org/css/ie6_purecsspopups.html).Here's what I have:With .hta file:http://www.douglas-county.com/Without .hta file:http://www.douglas-county.com/index_wohta.aspCSS stylesheet:

/*Page Properties*/.noPrint { 	display: none; } body {	font-family: arial, sans-serif;	background-color:#FFF;	margin-top:0;	margin-left:0;	margin-bottom:0;	margin-right:0;	color:#000000;}a {	background: transparent;	font-family: arial, sans-serif;	font-size: 12px;	font-style: normal;	font-weight: normal;	letter-spacing: normal;	text-decoration: underline;}a:link,a:visited {	color: #306;}a:hover {	color: #F00;	text-decoration: none;	border: none;}a:active {	color: #306;}a.small {	background: transparent;	font-family: arial, sans-serif;	font-size: 10px;	font-style: normal;	font-weight: normal;	letter-spacing: normal;	text-decoration: underline;}a.small:link,a.small:visited {	color: #306;}a.small:hover {	color: #F00;	text-decoration: none;	border:none;}a.small:active {	color: #306;}p {	font-size:12px;	font-style:normal;	letter-spacing:normal;	text-decoration:none;	color:#000;}p.small {	font-size:10px;}p.red {	font-size:10px;	color:#F00;}div {	font-family: arial, sans-serif;	font-style:normal;	letter-spacing:normal;	text-decoration:none;	color:#000;}div.small {	font-size:10px;}div.red {	font-size:10px;	color:#F00;}td {	font-size:12px;	font-style:normal;	letter-spacing:normal;	text-decoration:none;}td.small {	font-size:10px;}td.topback2 {	background-image:url(../images/topback2.gif)}td.btmlines2 {	background-image:url(../images/btmlines2.gif)}table {	font-family: arial, sans-serif;}/* Light blue-gray border */table.bluegrayborder, table.bluegrayborder td {	border-width:1px;	border-style:solid;	border-color:#CCC;}/* Medium blue border */table.medblueborder, table.medblueborder td {	border-width:1px;	border-style:solid;	border-color:#66C;}/* Dark blue border */table.darkblueborder, table.darkblueborder td {	border-width:1px;	border-style:solid;	border-color:#306;}/* Maroon border */table.maroonborder, table.maroonborder td {	border-width:1px;	border-style:solid;	border-color:#600;}/* Black border */table.blackborder, table.blackborder td {	border-width:1px;	border-style:solid;	border-color:#000;}/* White border */table.whiteborder, table.whiteborder td {	border-width:1px;	border-style:solid;	border-color:#FFF;}/* Cream border */table.creamborder, table.creamborder td {	border-width:1px;	border-style:solid;	border-color:#FFC;}li {	font-size:12px;	font-style:normal;	font-weight:normal;	letter-spacing:normal;	text-decoration:none;	color:#000000;}li.square {	list-style-type: square;	list-style-position:inside;}h1, h2, h3, h4, h5, h6 {	display:inline;	font-style:normal;	font-weight:bold;	letter-spacing:normal;	text-decoration:none;}h1 {	font-size:16px;	color:#600;}h2 {	font-size:14px;	color:#000;}h3 {	font-size:12px;	color:#FFF;}h4 {	font-size:10px;	color:#F00;}/*Form Properties*/form {	color:#000;	font-size: 12px;}.formButton  {	background-color:#ccc;	font-size: 8pt;	font-weight: bold;	width: auto;	height: 20px;	padding: 0px 0px;	margin: 1px;	text-align: center;	cursor:pointer;	border-color:#336;}input, textarea {	padding: 1px;	background-color:#FFF;	border: inset 2px #600;}.blueform {		padding: 1px;	background-color:#FFF;	border: inset 2px #336;}/*Navigation Properties*/div#nav1 {  /* Main Nav Properties */	border: 1px solid #306;	background: #FFFFCC;	font-family: arial,sans-serif;	font-size: 10px;}div#nav1 ul { /* Main Nav Unordered List Properties */	display: block;	margin: 0px;	padding: 0px;	font-family: arial,sans-serif;	font-size: 10px;}div#nav1 li { /* Main List Properties */	display: block;	list-style: inline;	line-height: 1.5em;	font-family: arial,sans-serif;	font-size: 10px;}div#nav1 li:hover, div#nav1 li.hover { /* List Hover Properties */	background: #CCCCFF;	display: inline;	border-width:1px;	text-decoration: none;}div#nav1 ul.sub1 { /* Nav Unordered List 'Sub1' Properties */	position: absolute;	border: 1px solid #330066;	padding: 0px;	background: #FFFFCC;	margin: 0px 0px 0px -1px;	width: 90px; /* MUST BE HERE FOR NS TO WORK*/	display: none;}div#nav1 ul.sub2 {  /* Nav Unordered List 'Sub2' Properties */	position: absolute;	border: 1px solid #330066;	padding: 0px;	background: #FFFFCC;	margin: -16px 0px 0px 90px;	width: 90px; /* MUST BE HERE FOR NS TO WORK*/	display: none;}div#nav1 ul.sub3 {  /* Nav Unordered List 'Sub3' Properties */	position: absolute;	border: 1px solid #330066;	padding: 0px;	background: #FFFFCC;	margin: -16px 0px 0px 90px;	width: 90px; /* MUST BE HERE FOR NS TO WORK */	display: none;}div#nav1 li>ul.sub1 {  /* Nav <LI> to <UL> 'Sub1' Properties */	margin: 0em 0px 0px 0em;} div#nav1 li>ul.sub2 {  /* Nav <LI> to <UL> 'Sub2' Properties */	margin: -1.5em 0px 0px 90px; /* NS */}div#nav1 li>ul.sub3 {  /* Nav <LI> to <UL> 'Sub3' Properties */	margin: -1.5em 0px 0px 90px; /* IE */}div#nav1 ul.root li:hover ul.sub1, div#nav1 ul.root li.hover ul.sub1 { 	display: block;	border-width:1px;	text-decoration: none;}div#nav1 ul.sub1 li:hover ul.sub2, div#nav1 ul.sub1 li.hover ul.sub2 { 	display: block;	border-width:1px;	text-decoration: none;}div#nav1 ul.sub2 li:hover ul.sub3, div#nav1 ul.sub2 li.hover ul.sub3 { 	display: block;	border-width:1px;	text-decoration: none;}div#nav1 a {  /* IE */	color: #330066;	text-decoration: none;	line-height: 1.5em;	display: block;	width: 90px;	height: auto;	font-family: arial,sans-serif;	font-size: 10px;}div#nav1 a:hover,div#nav1 a.hover {	color: #330066;	background: #CCF;	display: block;	width: 90px;	border-width:1px;	text-decoration: none;}.hassub3 { 	background: url('arrows.gif') no-repeat right center;}

I've followed the instructions in both articles by adding text-decoration:none; and border:none; properties to all of the :hover properties, but it's still not working for me in IE6. So if anyone could let me know what I'm doing wrong, that would be great. Thanks for any help.

Edited by Jonas
Link to comment
Share on other sites

from my understanding, IE does not support css2, whereas the proper browsers, like firefox (not sure about opera css2 support) do.

Hi real_illusions,Thanks for the reply. IE does support some of CSS2, but does not support the :hover method properly. So developers are having to resort to IE hacks to get it working properly in IE, because it sucks (in my own personal opinion).I believe that I've come up with another possible solution. I think that the problem I was having with the .htc file was that it was located within the CSS stylesheet using the behavior: url method. I think that was loading the .htc file for each list-item in IE, like this:div#nav1 li { /* Main List Properties */behavior: url(/scriptlibrary/iefixes.htc);...}...which was causing the problem.So I think that if I remove the .htc from the CSS file, and include it on the correct section of the HTML page, it will work properly in IE. I found an article (http://www.howtocreate.co.uk/tutorials/testMenu.html) that tells you to place the .htc file within the (X)HTML, but it's still not working for me in IE. If anyone has any advice on this idea, it would be greatly appreciated. Thanks.
Link to comment
Share on other sites

Ok, with the help of Fang on another forum (see http://www.webdeveloper.com/forum/showthread.php?p=551558), I was able to come up with another solution. But I'm still running into one of the same problems. The arrow background image for the list-items that contain a sub-menu is not working properly in IE6, but it works fine in all other browsers. It basically reloads the arrows image each time a user hovers over the list-item that contains one. You can see this on a test page at http://www.douglas-county.com/suckertest.asp. You can view all of the code, including the CSS stylesheet, by viewing the source code.If anyone knows of how/if I can get this to work, that would be great. Thanks.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...