5 replies [Last post]
photochops
Offline
newbie
Last seen: 15 years 22 weeks ago
Joined: 2006-01-16
Posts: 4
Points: 0

Alright, currently I am attempting to finish my website, but I have come across a few snags along the way. Obviously ":hover" does not work in IE, so I am using "csshover.htc". It only partly works. Currently on my site this only works on one button.

I have a few more problems, but I am going to try and keep this simple for now. There are many more things that don't work, but I am taking this one step at a time.

The button with :hover that works is named "#what" and the button that doesn't is named "#get". These particular buttons are in the exact same spots, but are different on different pages. Therefore, #what is on one page, once the page is changed #what is gone and in its place is #get. Seemingly simple enough...

Here is the code for #what:

#what {
	position:relative;
	top:12px;
	left:10px;
	height:69px;
	width:185px;
}
#what {background:url(../images/what.gif) no-repeat top left;}
#what a {
	display: block;
	width: 185px;
	height: 69px;
}
#what span {display:none;}
#what:hover {background:url(../images/what.gif) no-repeat bottom left;}

Site code 1:

<div id="what"><a href="http://www.photochops.net/about/what.htm" title="What is a Photochop?"><span>What is a Photochop?</span></a></div>

When the button is hovered over, the image changes, the way it is supposed to...

Here is the code for #get:

#get {
	position:relative;
	top:12px;
	left:10px;
	height:69px;
	width:185px;
}
#get {background:url(../images/getquote.gif) no-repeat top left;}
#get a {
	display: block;
	width: 185px;
	height: 69px;
}
#get span {display:none;}
#get:hover {background:url(../images/getquote.gif) no-repeat bottom left;}

Site code 2:

<div id="get"><a href="http://www.photochops.net/about/getquote.htm" title="Get Quote?"><span>Get Quote</span></a></div>

Both have the exact same code, except for the corresponding image names, etc. I can view my site with #what and the hover will work fine. However, if I replace Site Code 1 with Site Code 2 on the exact same page, hover does not work. I can't understand why.

Confused? You're about to become even more confused. In my CSS I have the #get code directly below the #what code. If I switch their positions, then #get hover works and #what doesn't.

I am completely lost and very confused. I would definitely appreciate some help.

By the way, this problem only exists in IE, so I am guessing it has something to do with "csshover.htc" but I can't be sure.

Thanks,

Casey

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

:hover question...

Is there any reason why you've applied the hover to #get instead of #get a?
(You're probably gonna say "Yes, there is" and try to explain why to which I'll say, "Can you show us the page?" so I'll cut out one step and ask you to do it now anyway.)

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

photochops
Offline
newbie
Last seen: 15 years 22 weeks ago
Joined: 2006-01-16
Posts: 4
Points: 0

:hover question...

I can't believe I didn't spot that. No, there is no reason. I changed it, and now it works. I really appreciate it. Hover doesn't work on the rest of my site still, and probably for the same reason, if I find out it isn't I'll let you guys know.

http://www.photochops.net

Thanks again,

Casey

EDIT:

Yes, this was the problem the :hover wasn't working on my entire website. I believe everything should be working properly now, except the display of the drop down menu. Any help on how to fix that would be greatly appreciated. My website is still unfinished, so it won't be uncommon to find uncompleted pages in my portfolio and my services section.

Thanks

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

:hover question...

What's wrong with the dropdowns? I can't see anything wrong except for the PNG transparency difference in IE.

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

photochops
Offline
newbie
Last seen: 15 years 22 weeks ago
Joined: 2006-01-16
Posts: 4
Points: 0

:hover question...

Oh, is that how IE displays PNGs? I knew it did it incorrectly, but I wasn't aware it messed it up that badly. I guess I'll have to switch to GIF for IE.

Thanks

photochops
Offline
newbie
Last seen: 15 years 22 weeks ago
Joined: 2006-01-16
Posts: 4
Points: 0

:hover question...

Well, I decided to switch to GIF rather than PNG, and I still have the problem. I now know why it is displaying it oddly. It is becuase of this:

#nav ul li ul li a {
text-align:left;
display:block;
font-family:"Century Gothic";
padding-left:12px;
letter-spacing:0;
line-height:22px;
width:149px;
font-weight:normal;
color:#FFFFFF;
}

Once I change that to 0, it looks great, however, the text is now obviously aligned to the left. Is there any way to fix this so the text can be properly placed, but still keep the appearance of the background?

Example:

Thanks