CSS2 :hover Problem in IE6

kwilliams · April 11th, 2006, 04:53 PM

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/...popups-bug.asp and http://www.quirksmode.org/css/ie6_purecsspopups.html).

Here's what I have:

CSS stylesheet:

Code:

/*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.

KWilliams

richard.york · April 12th, 2006, 08:06 AM

I don't see any difference between the two. They seem to take the same amount of time to load.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

richard.york · April 12th, 2006, 08:09 AM

BTW, if you're having problems with Explorer, sometimes it can be a cache issue. Documents get stuck in Explorer's cache all the time, clearing the cache often and refreshing repeatedly may cause your problem to go away.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

kwilliams · April 12th, 2006, 09:30 AM

Hi Rich,

Thanks for the replies. I've posted this problem in the past, and some users are able to load the page in both browsers with no problem. But a lot of users (including me) are having an extremely slow load time for this page in IE6.

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.

KWilliams

kwilliams · April 13th, 2006, 02:17 PM

Ok, with the help of Fang on another forum (see http://www.webdeveloper.com/forum/sh...d.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.

KWilliams

richard.york · April 13th, 2006, 02:26 PM

That's the infamous flicker bug: http://dean.edwards.name/my/flicker.html

HTH!

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

meow · April 13th, 2006, 02:28 PM

My IE only downloads the arrow pic once. Do you have your cache settings set to "Every visit to the page", perhaps?

--
http://yupapa.com

richard.york · April 13th, 2006, 02:28 PM

Also, I've had to reboot machines in the past to get that fix to work. So, don't forget to clear IE's cache, close IE, reboot and then see if it worked.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

meow · April 13th, 2006, 02:32 PM

Quote:

quote:Originally posted by richard.york
That's the infamous flicker bug: http://dean.edwards.name/my/flicker.html

You were quicker this time! :D

--
http://yupapa.com

richard.york · April 13th, 2006, 02:43 PM

> You were quicker this time!

I just saw this bug yesterday. I beleive that the "Every visit to page" cache setting was the cause of that one, I switched it back to "Auto", plugged in the server changes, rebooted, and it was gone.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html