Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
CSS Hovers & Hyperlinks
I’ve been busy lately developing plugins for the Adobe Lightroom Web module, allowing users to automate various types to web photo galleries. My latest project is a gallery index creator. The reason I’m posting here is that I’m having some CSS issues, and I’m hoping someone here might have a few incites.
Here’s the sample: Sample Gallery
It works great in Safari and Firefox.
In IE6, IE7 and Opera, however, the hyperlinks don’t work quite right.
I’m using absolute positioning to hover a link over each box, then stretching the hyperlink to cover the entirety of the box, making them clickable, and hiding the link text using text-indent.
Of course the box color doesn’t change when hovering in IE6; I expected that, knowing that IE6 only supports :hover on anchors.
The problem I really want to fix is that in IE6, IE7 and Opera, the parts of the box occupied by the thumbnails and text aren’t active as hyperlinks. Only the empty areas of the box are clickable.
Any ideas?
I’ve put together a debugging package – relevant code in a single file, eliminating clutter. Hoping that makes it easier to work out the issue. Download the debugging package.
Any and all help greatly appreciated! Thank you!
theturninggate
Offline
Re: CSS Hovers & Hyperlinks
It’s nearly there by doing this:
.gallerybox:hover,.gallerybox a:hover { background-color: transparent; }- html .gallerybox:hover,* html .gallerybox a:hover { background-color: #999; }
IE6 doesn’t like transparent but the #999 sort of works IF the cursor is moved from the bottom but not from the top or sides! Figure that one out!
You could also try a semi- or transparent background image instead of #999
Edit: I just realised it doesn’t work in IE7, but #999 instead of transparent sort of works in IE7.
Last edited by zero (2007-05-29 18:28:10)
Offline
Re: CSS Hovers & Hyperlinks
Yeah, you have the fill the .gallerylink a:hover with a background-color or a background-image, otherwise those browsers think the whole object is empty (it actually is in a way, due to your text-indent).
A transparent or better a semi-transparent image works fine.
Additionally, we once found that adding overflow:hidden to the link box (.gallerylink a) makes the whole thing more stable (older Opera, and iirc IE 6).
(no fan of those huge negative text-indent techniques).
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: CSS Hovers & Hyperlinks
Thanks for the help, guys. I’ve got it all sorted out now.
Based on your advice, I added a 1×1 blank GIF image to the .gallerylink a background. Setting to a rather than a:hover eliminated the bizarre IE behavior where you have to mouseover from the bottom; you can now mouseover from any direction. To .gallerylink a:hover I added a small GIF that only shows up in IE6 that offers some cue of hyperlink activity, since the .gallerybox:hover function doesn’t work there.
Tested in Firefox, Safari, Opera, IE6 and IE7 with good results. Finished results are here.
phiw13, what do you prefer over the negative text-indent trick?
Thanks!
Last edited by theturninggate (2007-05-31 01:15:33)
Offline
Pages: 1