Please login or register.

Login with username, password and session length
Advanced search  

News:

Latest sNews - sNews 1.7 - with its own forums - for discussion and user mods.

Author Topic: Why this isn't working in IE 6  (Read 5369 times)

4Sandrix

  • Hero Member
  • *****
  • Karma: -13
  • Posts: 597
    • http://fedrick.deviantart.com
Why this isn't working in IE 6
« on: March 02, 2007, 10:08:33 pm »

Hi guys

I was coding this design.. First I had problems with png transparency and IE 6, but I then I found the javascript fix for it and now it works fine in all browsers.
After couple of hours I've noticed that this code:

Code: [Select]
#downbtn {
background:  url('images/downbtn.png');
height: 41px;
width: 116px;
float: left;
margin: 0px auto;
}

#downbtn:hover {
background:  url('images/downbtn.png') 0px -41px;
height: 41px;
width: 116px;
float: left;
margin: 0px auto;
}
doesn't work in IE 6, I mean when mouse hovers the Div - it doesn't do anything. what's wrong? :/
Logged
I'm kind of like Han Solo always strokin' my own Wookiee
I'm the root of all that's evil yeah but you can call me Cookie

michael kennedy

  • Full Member
  • ***
  • Karma: 3
  • Posts: 207
    • SpektreDesign
Why this isn't working in IE 6
« Reply #1 on: March 02, 2007, 10:51:19 pm »

The :hover pesudo class incorrectly only works on anchors inside of IE6.  And as far as I know, unless you use some pretty complex javascript workarounds there is no way around this.

What most people do, is merely use anchors as image buttons to achieve the visual "swap" effect.
http://www.cssdreams.com/css/style-that-code/

tarmithius13

  • Sr. Member
  • ****
  • Karma: 7
  • Posts: 469
Why this isn't working in IE 6
« Reply #2 on: March 02, 2007, 10:52:33 pm »

Is it a link you are trying to hover over? If so you can try:
Code: [Select]
#downbtn a:hover {    
    background:  url('images/downbtn.png') 0px -41px;
    height: 41px;
    width: 116px;
    float: left;
    margin: 0px auto;
}
Logged
The trick to flying is to throw yourself at the ground and miss.

Free sNews templates HERE

4Sandrix

  • Hero Member
  • *****
  • Karma: -13
  • Posts: 597
    • http://fedrick.deviantart.com
Why this isn't working in IE 6
« Reply #3 on: March 02, 2007, 11:01:48 pm »

Mike

Thanks mike :)  checking the link you provided ;)

tarmithius13

no It'sa ID for DIV

Strange thing, works fine in IE 7 :/
Logged
I'm kind of like Han Solo always strokin' my own Wookiee
I'm the root of all that's evil yeah but you can call me Cookie

tarmithius13

  • Sr. Member
  • ****
  • Karma: 7
  • Posts: 469
Why this isn't working in IE 6
« Reply #4 on: March 02, 2007, 11:14:25 pm »

What is the code for the div? You might have apply it to a child selector.
Logged
The trick to flying is to throw yourself at the ground and miss.

Free sNews templates HERE

4Sandrix

  • Hero Member
  • *****
  • Karma: -13
  • Posts: 597
    • http://fedrick.deviantart.com
Why this isn't working in IE 6
« Reply #5 on: March 02, 2007, 11:15:51 pm »

Quote from: tarmithius13
What is the code for the div? You might have apply it to a child selector.
What code?

It's an ID for div

Code: [Select]
Logged
I'm kind of like Han Solo always strokin' my own Wookiee
I'm the root of all that's evil yeah but you can call me Cookie

tarmithius13

  • Sr. Member
  • ****
  • Karma: 7
  • Posts: 469
Why this isn't working in IE 6
« Reply #6 on: March 02, 2007, 11:18:20 pm »

What I meant are you implementing anything inside the div?

You could try:
Code: [Select]
div#downbtn:hover {    
    background:  url('images/downbtn.png') 0px -41px;
    height: 41px;
    width: 116px;
    float: left;
    margin: 0px auto;
}
I am not on my PC at the moment so I cannot try any of this.
Logged
The trick to flying is to throw yourself at the ground and miss.

Free sNews templates HERE

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Why this isn't working in IE 6
« Reply #7 on: March 02, 2007, 11:18:32 pm »

sandy: do a search here -- or on your preferred search engine-- for "csshover.htc". There is a solution.
However, tapping in to a:hover is the only really reliable way to get IE6 and less to hover on :hover.
Logged

4Sandrix

  • Hero Member
  • *****
  • Karma: -13
  • Posts: 597
    • http://fedrick.deviantart.com
Why this isn't working in IE 6
« Reply #8 on: March 02, 2007, 11:21:48 pm »

tarmithius13

no no no there's nothing inside the div :)

agentsmith

thanks mate :)
Logged
I'm kind of like Han Solo always strokin' my own Wookiee
I'm the root of all that's evil yeah but you can call me Cookie

tarmithius13

  • Sr. Member
  • ****
  • Karma: 7
  • Posts: 469
Why this isn't working in IE 6
« Reply #9 on: March 02, 2007, 11:26:17 pm »

It is valid syntax but IE only allows the use of the hover tag on link elements ('a' elements). In order for IE to have the hover effect on other elements, the most used technique, i believe, is the use of javascript to write onmouseover and onmouseout attributes to the element. The onmouseover and onmouseout attributes change the styling of the element on hover essentially giving you the ability to change the style on a hover.
Logged
The trick to flying is to throw yourself at the ground and miss.

Free sNews templates HERE

4Sandrix

  • Hero Member
  • *****
  • Karma: -13
  • Posts: 597
    • http://fedrick.deviantart.com
Why this isn't working in IE 6
« Reply #10 on: March 02, 2007, 11:35:35 pm »

Yeah I was thinking about j-script though :/


BTW

agentsmith
csshover.htc doesn't works for me in IE 6

 :/
Logged
I'm kind of like Han Solo always strokin' my own Wookiee
I'm the root of all that's evil yeah but you can call me Cookie

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6020
  • Semantically Challenged
    • snews.ca
Why this isn't working in IE 6
« Reply #11 on: March 03, 2007, 02:55:08 am »

Sandy... I have the csshover.htc working OK for me in IE6. I am using version 1.4.2, available from Peter Nederlof. You can find the download link about two-thirds down the page. Install it in a folder called htc. Then, copy this into index.php... just above the closing tag:
Quote
Next... try changing your css from div IDs to div classes... I am using div classes and it works fine:
Quote
.downbtn {    
    background:  url('images/downbtn.png');
    height: 41px;
    width: 116px;
    float: left;
    margin: 0px auto;
}

.downbtn:hover {    
    background:  url('images/downbtn.png') 0px -41px;
    height: 41px;
    width: 116px;
    float: left;
    margin: 0px auto;
}
In my offline test site (1.5.27), I use the following css to wrap the entire center function in index.php and...  again... it's working fine in IE6:
Quote
.articlebox {
   background:#f5e5cc;
   border:1px solid #af8951;
   padding: 1em;
   }

.articlebox:hover {
   background:#f8f1e6;
   border:1px solid #ff0000;
   }
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

4Sandrix

  • Hero Member
  • *****
  • Karma: -13
  • Posts: 597
    • http://fedrick.deviantart.com
Why this isn't working in IE 6
« Reply #12 on: March 03, 2007, 08:55:36 pm »

Key

Done but same result :/ It doesn't work. I'm using another behavior for all divs
Code: [Select]
div { behavior: url(iepngfix.htc) }so I thought that's the problem, but when I removed it nothing happened.
Logged
I'm kind of like Han Solo always strokin' my own Wookiee
I'm the root of all that's evil yeah but you can call me Cookie

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Why this isn't working in IE 6
« Reply #13 on: March 03, 2007, 09:16:51 pm »

Quote from: 4Sandrix
csshover.htc doesn't works for me in IE 6
Hm. I suppose there could be things in your construction that might conflict with csshover.htc, unfortunately I'm no expert on how exactly it does its magic. I do know that where ever I've used it there have been no problems with IE6 so far. There is a fairly detailed description of the script at Peter Nederlof's site, mentioned by key's above -- don't know if that might shed some more light on the problem.

Resorting to scripting in order to trick a browser, that doesn't support :hover in the first place, into getting it to react on :hover could naturally be full of potential potholes. If there weren't already a million reasons to steer clear of IE6, this problem could be telling you to recommend other browsers instead. Or, as the saying goes -- A million flies can't be wrong; shit is god for you! :)

If IE6 is a requirement for you, and csshover doesn't solve the problem you're having, maybe you shouldn't use hover in this particular construction (at least for IE6). Sorry, but that's all I can offer. :o
Logged