37 replies [Last post]
Klayemore
Offline
newbie
Last seen: 17 years 9 weeks ago
Joined: 2005-06-10
Posts: 4
Points: 0

Hi, i have been doing relentless research on trying to make the :hover property work on objects such as form buttons in IE. They work fine in FF but IE does'nt display them at all.

For example, i have a form button with the class "gobutton"

the CSS for this class is as follows:

.gobutton {
width: 20px;
height: 20px;
background-color: #C8D3E3;
border: 1px solid #9DB0CD;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}
.gobutton:hover {
background-color: #9DB0CD;
}

Now when i hover over the button in IE it doesn't work. This also happens for textfields etc. I have already been through resources such as 'whatever:hover' and can't find (or understand) the solution.

Your help would be MUCH appreciated.

Cheers,
Klaye Morrison | FMSTUDIOS

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

:hover problem in IE

Hover won't work in IE for anything except links.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Klayemore
Offline
newbie
Last seen: 17 years 9 weeks ago
Joined: 2005-06-10
Posts: 4
Points: 0

:hover problem in IE

Yes i know that, so how do i fix it?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

:hover problem in IE

If you knew that it is impossible already, then why are you even asking the question?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 17 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

:hover problem in IE

Why not just make it a link?

Verschwindende wrote:
  • CSS doesn't make pies

Klayemore
Offline
newbie
Last seen: 17 years 9 weeks ago
Joined: 2005-06-10
Posts: 4
Points: 0

:hover problem in IE

because i can't exactly make form objects links. Don't worry, i have used onmouseout and onmouseover instead. thanks for your help :?

Pman
Pman's picture
Offline
Enthusiast
Sweden
Last seen: 14 years 23 weeks ago
Sweden
Timezone: GMT+2
Joined: 2004-04-15
Posts: 60
Points: 0

Whatever:hover

Ok whatever:hover works...I've used it, I'll try and get it straight.

Download the csshover.htc here:
http://www.xs4all.nl/~peterned/htc/csshover.htc

upload it to a folder called htc on your server.

Ok, when that's done you'll add this:

style="behavior:url('htc/csshover.htc')"

To every document's bodytag (atleast to every document that is supposed to hover correctly Wink...)

OK, now you'll need to add a class to your cssfile, I called mine highlite since I used it to highlite things, original eh ? And in my case it was about changing the opacity, but you can alter bgcolor or whatever...

.gobutton {
width: 20px;
height: 20px;
background-color: #C8D3E3;
border: 1px solid #9DB0CD;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}
.gobutton:hover {
background-color: #9DB0CD;
}

Now, since you've made everything according to the masterplan, you just call upon the class .gobutton in the acctual tag and it should work.

In short:

1. Upload file to folder and name that folder htc.
2. Add style="behavior:url('htc/csshover.htc')" to every document where the hover should appear.
3. Deefine you CSS and call the class...

Good luck - Patric.

Anything that happens to irritate you, will happen atleast once more
- p-ahlqvist.com - Online, not entirely done contentwise, but I'm up

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

:hover problem in IE

If your going to use csshover.htc on the body tag then wrap it in MS conditional comments then the validator will ignore it.

<!--[IF IE]><body style="behavior: url(./scripts/csshover.htc)"><![endif]-->

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Pman
Pman's picture
Offline
Enthusiast
Sweden
Last seen: 14 years 23 weeks ago
Sweden
Timezone: GMT+2
Joined: 2004-04-15
Posts: 60
Points: 0

:hover problem in IE

Aaaah, brilliant, thanks Hugo...That I had no idea of.

Patric.

Anything that happens to irritate you, will happen atleast once more
- p-ahlqvist.com - Online, not entirely done contentwise, but I'm up

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

:hover problem in IE

Was just about to make a minor correction to that as it would produce two body tags in IE, perhaps better would be

<!--[IF IE]><style type="text/css">
           body{behavior: url(./scripts/csshover.htc) }
   </style><![ENDIF]-->

In the head.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Pman
Pman's picture
Offline
Enthusiast
Sweden
Last seen: 14 years 23 weeks ago
Sweden
Timezone: GMT+2
Joined: 2004-04-15
Posts: 60
Points: 0

:hover problem in IE

Okidoki, had no time to make any changes and won't have for some time...Going on 5 weeks paid holiday this afternoon, but I thank thee Wink....

P

Anything that happens to irritate you, will happen atleast once more
- p-ahlqvist.com - Online, not entirely done contentwise, but I'm up

Kiwi_Dunc
Offline
newbie
Sydney, Australia
Last seen: 17 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2005-07-24
Posts: 9
Points: 0

:hover problem in IE

Ok I am new at this.

I have written a number of style sheets to update my web site.

I am using css hover for a drop-down menu it has. The file works great on my local system. As soon as I upload it to my web host the hover will not work.

The file is called from a css style sheet called menustyles.

no matter where I put the htc file and change the address it will just not work

behavior:url("http://www.thebluemarlin.co.nz/htc/csshover.htc");}

I have even tried pasting the code directly into each html file and still nothing.

Any ideas

Regards Duncan

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 13 years 30 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

:hover problem in IE

Kiwi_Dunc wrote:

behavior:url("http://www.thebluemarlin.co.nz/htc/csshover.htc");} I have even tried pasting the code directly into each html file and still nothing. Any ideas Regards Duncan

Try putting this inside of <head> somewhere:

<!--[if IE]>
<style>
body { behavior:url(/htc/csshover.htc);}
</style>
<![endif]-->

And, of course, double-check that the file is in the right directory on your server.

- Antibland

Kiwi_Dunc
Offline
newbie
Sydney, Australia
Last seen: 17 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2005-07-24
Posts: 9
Points: 0

:hover problem in IE

Thanks for the prompt rely - Antibland

but your suggestions do not work

I now the that comment you suggested within the header of the html page and the htc file in three places on the server, being the root folder, a directory called htc, and a directory called css which is where the other css files are located.

I am obviously doing something wrong and just can not figure it out

Duncan

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

:hover problem in IE

Your server is set to send .htc files as mime-type text/x-component isn't it ?

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Kiwi_Dunc
Offline
newbie
Sydney, Australia
Last seen: 17 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2005-07-24
Posts: 9
Points: 0

:hover problem in IE

Hugo

Firstly - after failing as much as I have today I took a trip to the local bar to console myself, so coding for today is history.

The server is a host, so I have no idea what it is set to do.

It is an apache system and has a number of other linux services available.

sorry for sounding like a complete numbty, but I am.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

:hover problem in IE

Hugo,

The link Kiwi_Dunc posted works and Firefox tells me the csshover.htc is served as text/plain. Thats the same mime type as my server serves the file and it works for me. Is text/x-component bad or good?

Kiwi_Dunc,

You shouldn't need quotes around the filename in the url(...). I don't know if it makes any difference if they are there. Your server is serving file ok - I can grab it. I can only think the links in your page are wrong. For a url(...) item I always try to use an site absolute link but not a full url or relative file reference. That is "/csshover.htc" (or /css/csshover.htc), not "http://www.somewebsite.com/csshover.htc" or "../csshover.htc". That way no matter where the file is referenced the browser should be able to access it (very important if your site uses tricks to generate nice urls that map to a single page and complex query string).

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

:hover problem in IE

Interesting Chris when you say 'your server' is that a localhost Win or an Apache/ Linux setup ? as far as I was aware htc files need to be sent as text/x-component, at least that's what I needed to get the file working on my amp Linux hosting server, my localhost amp setup on a Win box works fine as text/plain, hmm need to look at that as slightly confused now. FF does indeed read the file from Kiwi_Duncs site and lists it as text/plain, but IE will not read it .

I think that paths may still prove the problem here, Kiwi_dunc have you tried url(htc/csshover.htc) ?

I would loose the other attempts and stick with just the one so as not to get confused.

This basic structure should work:

<!--[IF IE]><style type="text/css"> 
           body{behavior: url(htc/csshover.htc) } 
   </style><![ENDIF]-->

As for the path it would seem to be the right one for your files if it doesn't work then maybe it is a problem with the mime type.

I'll see if I can find any other problems that can arise with this file.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Kiwi_Dunc
Offline
newbie
Sydney, Australia
Last seen: 17 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2005-07-24
Posts: 9
Points: 0

:hover problem in IE

Guys thank you for the comments.

I am at work now so can not check what is the exact path I have inserted and I have made so many changes it could well be anything.

I like Hugo's comment about text/x-component, it is a very simular explanation to this Apache configuration text I was reading.

http://www.excelsystems.com/200505htmlcomponents.htm

I have asked the question of my web host and should know this evening if their setup is htc ready.

I am sure the problem will turn out to be my path coding as you suggest, I just do not have a good enough grasp of it to understand if my syntax is correct or not.

Thanks agin

Duncan

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

:hover problem in IE

Duncan it would be quite easy to test if the mime type was the problem by setting the type in an .htaccess file.

Create a plain text file, name it .htaccess (note the period at the beginning) in this file put this line:

AddType text/x-component .htc

Save and upload the file to your document root or the directory that has the main page. The mime type is now set for all pages served from that directory and any sub directories.

N.b windows editors may reject the lack of extension with a .htaccess file, if so one could just edit the name on the Apache server.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Kiwi_Dunc
Offline
newbie
Sydney, Australia
Last seen: 17 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2005-07-24
Posts: 9
Points: 0

:hover problem in IE

Cheers Hugo

I will give that a go as soon as I get home.

Regards Duncan

Kiwi_Dunc
Offline
newbie
Sydney, Australia
Last seen: 17 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2005-07-24
Posts: 9
Points: 0

:hover problem in IE

Hugo

I contacted my web host.

They replied with a request simular to your htaccess file suggestion.

I have uploaded that file as per your instructions and changed the path in the css file to read url(htc/csshover.htc)

Still no go.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

:hover problem in IE

Duncan have you decided to link to the .htc file from the external stylesheet, although that does work, somewhere in the dark recesses of my brain I remember some sort of problem with that which is why I was going with the embedded style rule as the safest option whilst tracking down the problem, it's always safest to stick to one method otherwise one may introduce other problems into the equation.

I see that you have put the .htaccess file in the /css directory as I can't now display the contents, but still can with the copy that you have left in the /htc directory.

I think that the .htaccess file needs to be in the parent directory from where the main page is called , i.e your main top level directory which has your main index page rather than a sub directory.

I may be wrong on this, let us know where you placed the htaccess file, also have you got cpanel installed on your host as it makes changing the mime types easier at the server ini file level which is better than using .htaccess.

Another thing all these HTC files work better if IE is in 'Standards mode' you need a Doctype at the top of the page.

Sidenote: when all is done it would be a good idea to turn off 'Directory Indexing' on your site as it's a slight security risk

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

:hover problem in IE

Kiwi_Dunc, can you post a link to your page?

Hugo, my server runs Gentoo Linux and Apache 2.0.54. csshover behaviour in IE seems to work fine for me. Can you check out this page (csshover.htc) in both IE and FF. Hovering over the thumbnails should show a larger image. All the hovers are on <li> elements.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

:hover problem in IE

Hugo wrote:
I think that the .htaccess file needs to be in the parent directory from where the main page is called , i.e your main top level directory which has your main index page rather than a sub directory.

Thats the best place for it to go. It will then work anywhere on your site. An .htaccess file works on the current folder and any subfolders - unless a directive is overridden by another .htaccess file in one of thoese folders. So you could put the .htaccess file in the same folder as the .htc files.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

:hover problem in IE

Chris your page checks out in both FF and IE on Win XP, yet HTC components are supposed to be delivered as text/x-component, this becomes confusing .

On the basis that Chris's page works as text/plain I guess we have to assume that mime type is not the problem, I wonder if the selector rules are specific enough CSSHover does have requirements in that respect.

I would still prefer to see the htc file called from the html file rather than the stylesheet for the moment.

I have to go out otherwise I would investigate further, but when I get back will resume the hunt, if Chris hasn't solved it Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Kiwi_Dunc
Offline
newbie
Sydney, Australia
Last seen: 17 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2005-07-24
Posts: 9
Points: 0

:hover problem in IE

Hugo

I put the htaccess file in the root folder. The /www folder

I put the htc file in three locations The /www folder, the /htc folder and /css folder

I tried adding that htc line

<!--[IF IE]><style type="text/css"> 
           body{behavior: url(htc/csshover.htc) } 
   </style><![ENDIF]-->


into the header with both the comment brackets in and out.

All to no avail

your comment "Another thing all these HTC files work better if IE is in 'Standards mode' you need a Doctype at the top of the page" has me a bit lost so I am doing some reading to see how to add it.

Chris my page address is thebluemarlin.co.nz

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 17 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

:hover problem in IE

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

:hover problem in IE

Duncan you should be able to use this version, It's html rather than Xhtml as you would then have to edit your empty tags to be closed.

Copy and paste this at the very top of the page:

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 


I would make this a matter of priority with this particular problem

N.b: this declaration needs either the full url or no url and no definition to put browsers into standards mode, don't use the common type seen that has no url but states 'strict' or 'transitional' as that wont work correctly.

Now I must go out.

Hugo.

I

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Kiwi_Dunc
Offline
newbie
Sydney, Australia
Last seen: 17 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2005-07-24
Posts: 9
Points: 0

:hover problem in IE

Oh

I forgot to say Hugo yes my web host does have cpanel. I have accessed it and gone to the MIME type. I can see all the system MIME types and one User Added Type which appears to be the line from the htaccess file

Regards Duncan

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

:hover problem in IE

Kiwi_Dunc,

Your page works fine for me in IE - the menu backgrounds are changing colour and the submenu blocks are appearing.

If its still not working for you, hit the refresh button a few times to make sure the browser loads fresh copies of all the files and isn't relying on its cached versions.

One note, you should really surround the IE conditional comments with html comments as Hugo showed.

<!--[IF IE]><style type="text/css">
           body{behavior: url(htc/csshover.htc) }
   </style><![ENDIF]-->

If it then works for you, I would get rid of the csshover.htc reference from the CSS file (where it will never validate) and just keep the IE conditional comment (inside HTML comments) in your html file (where it will validate).

Hugo, just to be safe I have added the mime type text/x-component to my apache configuration Smile

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 17 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

:hover problem in IE

Use <ctrl> and refresh (or <command> with Macs, I guess) to hard-refresh the page and re-download everything.

Verschwindende wrote:
  • CSS doesn't make pies

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

:hover problem in IE

thepineapplehead wrote:
Use <ctrl> and refresh

You learn something new every day - that beats my *click* *click* *click* and hope. Thanks TPH. Laughing out loud

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

:hover problem in IE

Looks good to go now.

Doctype in place, ergo standards mode.

Correct conditional comments and path to file in the html.
(as Chris said if this works get rid of the entry in the external stylesheet as it will never validate)

Works fine for me in IE, I was going to post to say what Chris covered in the forced refresh ( Ctrl+F5 ) advice. Changing mime file types does not change 'Last Modified Headers' so it was possible that you were still working from the cache.

Still unclear what the actual problem was ? would be interested to see how vital the Doctype and therefore correct standards mode rendering is to the functioning of the csshover.htc script, and still unclear why the file works sent as text/plain.

I'm sure that when I first tried using the file on my hosting server as opposed to my localhost server it did not respond which is why I added the text/x-component to my htaccess.

Chris I'll have to try deleting the mime type and see what happens as I am still confused as to the fact that you are able to run either from your Linux AMP setup. out of interest anyone up for seeing how standards mode effects things ? Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 17 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

:hover problem in IE

Hugo wrote:

Works fine for me in IE, I was going to post to say what Chris covered in the forced refresh ( Ctrl+F5 ) advice.

thepineapplehead wrote:
Use <ctrl> and refresh

:twisted:

Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

:hover problem in IE

Being pedantic TPH ?

Sorry I should have said in the advice Chris gave to ensure that a fresh copy was being viewed, rather than a cached copy.

Didn't intend to detract from your useful note on using Ctrl+F5 (couldn't find 'refresh' on my keyboard ) Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 17 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

:hover problem in IE

Hehehehe Laughing out loud

Yes, being pedantic, as ever. (Makes a change from semantics, I guess).

Verschwindende wrote:
  • CSS doesn't make pies

Kiwi_Dunc
Offline
newbie
Sydney, Australia
Last seen: 17 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2005-07-24
Posts: 9
Points: 0

:hover problem in IE

Guys

Your are right in one respect. My site is now working for everyone except me. I may have to trouble shoot my desktop system at home. My wifes laptop works, my office laptop works, in-fact everyone at my office can get it to work, my neighbor, just not the f---en system I am developing the site from Evil

Hugo thankyou for your suggestions and patience and the same to everyone else who help me through this

Regards Duncan