/    Sign up×
Community /Pin to ProfileBookmark

CSS2 :hover Problem in IE6

Copy linkTweet thisAlerts:
Apr 11.2006

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: [url]http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp[/url] and [url]http://www.quirksmode.org/css/ie6_purecsspopups.html)[/url].

Here’s what I have:

[b]With .hta file:[/b]
[url]http://www.douglas-county.com/[/url]

[b]Without .hta file:[/b]
[url]http://www.douglas-county.com/index_wohta.asp[/url]

[b]CSS stylesheet:[/b]

[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;
}[/code]

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.

to post a comment
CSS

13 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangApr 12.2006 — If it's the menu you want to do without JavaScript, then that method will not work.
Copy linkTweet thisAlerts:
@kwilliamsauthorApr 12.2006 — Hi Fang,

Thanks for the reply. I did remove the JScript on the .htc file for the "Without .htc" page, but that makes the pure CSS menu not load in IE6. Any suggestions on the :hover method mentioned, or any other methods would be very helpful. Thanks.
Copy linkTweet thisAlerts:
@FangApr 12.2006 — The pure [URL=http://www.cssplay.co.uk/menus/basic_dd.html]css menu[/URL]
Copy linkTweet thisAlerts:
@kwilliamsauthorApr 12.2006 — I will look that article over, but I'm not looking to use tables at all. I'd like to use one CSS stylesheet that will work in FF and IE, and the previously noted articles mentioned that it was possible by adding a few unnecesary elements to the :hover properties. I did that, but it still does not work in IE. If you or anyone can see what I'm doing wrong with my existing CSS stylesheet, please let me know. Thanks.
Copy linkTweet thisAlerts:
@kwilliamsauthorApr 12.2006 — Well, 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.
Copy linkTweet thisAlerts:
@FangApr 12.2006 — It's in the style, as you have done, but is the .htc file correct?
Copy linkTweet thisAlerts:
@kwilliamsauthorApr 12.2006 — It should be correct. This is the code that I have for it (from Vladdy):

<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoHover()" />

<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="RestoreHover()" />

<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="DoActive()" />

<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="RestoreActive()" />

<script language="JScript">

function DoHover()

{ element.className += ' hover';

}

function DoActive()

{ element.className += ' active';

}

function RestoreHover()

{ element.className = element.className.replace(/bhoverb/,'');

}

function RestoreActive()

{ element.className = element.className.replace(/bactiveb/,'');

}

</script>

I'm totally lost on this one. I tried including the .htc file directly in the HTML with no success. So then I tried moving the .htc file from within the CSS stylesheet to the main "body" property, and to the "ul" property...again with no success.

Including it within the "li" property for the navigation does work, but it just takes FOREVER to load in IE6 for me. Any other suggestions would be great. Thanks.
Copy linkTweet thisAlerts:
@kwilliamsauthorApr 12.2006 — Hi again Fang,

Well, I think that I'm done with using this setup. After further research into using .htc files with IE5.5+, I now know that it would be a pain in the butt to continue using. And apparently IE7 won't even use .htc files at all.

So I've found an alternative stylesheet at http://www.xs4all.nl/~peterned/csshover.html that works for me in FF and IE6. I'm going to redo my stylesheet with this model to get it working.

I really appreciate all of your help, and I'll make sure to post my completed CSS code as soon as it's done (hopefully soon). See yah?
Copy linkTweet thisAlerts:
@FangApr 12.2006 — Is the problem that it does not work or that it loads slowly in IE?
Copy linkTweet thisAlerts:
@kwilliamsauthorApr 12.2006 — It loads slowly in IE5.5+ because it's loading the behavior for every "li" property in the menu. That's why I had tried moving it to other properties within CSS, like others had done, but I had no success. So I'm going to mess around with things for a bit, and see what happens.
Copy linkTweet thisAlerts:
@FangApr 12.2006 — Use [URL=http://www.htmldog.com/articles/suckerfish/dropdowns/]Son of Suckerfish dropdowns[/URL], a little JavaScript for IE and NO TABLES.
Copy linkTweet thisAlerts:
@kwilliamsauthorApr 12.2006 — Wow...That looks great! Thanks for the heads-up. I'll keep you posted on my eventual solution. Have a good one, and thanks again for your help?
Copy linkTweet thisAlerts:
@kwilliamsauthorApr 13.2006 — Hello Fang,

Well, I've developed a newly-customized horizontal navigation for our site with the help of your suggested CSS solution at http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones3.html. And it works great!

But I'm 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 you or anyone knows of how/if I can get this to work, that would be great. Thanks.
×

Success!

Help @kwilliams spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...