![[Home]](/wiki.gif)
Bug Css Cant Click Links In Float Right BoxesBug Css Cant Click Links In Float Right Boxes
| |
| The Bush Survival Guide - 250 Ways to Make It Through The NExt Four Years Without Misunderestimating the Dangers Ahead, and Other Subliminable Stategeries |
|
Links:
| |
Subjects > Computers > Internet > Web
Another Garnet Quest! Garnet solves difficult problems for you.... See the bottom of this page for how to let Garnet know if this page helped you.
I found a crazy CSS bug today while developing some [Internet Guides]. I added a floating box with a list of the most recently researched guides. I noticed at one point that only some of the links in the box, the links at the top, were clickable. All the rest showed no reaction to the mouse, no hover cursor change, and nothing happened when clicked either (other than maybe some text in the main part of the page, far away from the floating box with links, getting highlighted.)
Here is an example of a page where most of the links in the "Recent Guide Updates" box may not be clickable:
http://www.siql.com/css_bug1/radio_programs.htm
Making the external style sheet to be an internal style definition does not help:
http://www.siql.com/css_bug1/radio_programs.2.htm
Putting a float right DIV around the google adwords table doesn't help:
http://www.siql.com/css_bug1/radio_programs.3.htm
Removing the google/amazon float right, and the recent guide update links still aren't clickable:
http://www.siql.com/css_bug1/radio_programs.4.htm
Taking out the float left removes the problem. Of course then the links aren't in a left floating box anymore. Tried adding in a "display:block", but that also didn't help. Tried putting this floating block as the very first DIV after the BODY, but that didn't help. About the first half of the links are clickable, the rest are not.
Netscape 7.02 doesn't have any problem with these pages. IE 6.0.2800 has the problems.
This article, titles Links not working in DIV sounded like just the solution. http://www.webmasterworld.com/forum83/956.htm?highlight=css+float+links
I tried their idea in this page... The links for Radio Program and below dont work....
http://www.siql.com/css_bug1/radio_programs.5.htm
aha! Finally a solution! One of these threads talked about problems with negative values. I had a negative value for the bottom margin of the QuoteStyle?Create class. (Was trying to decrease the gap between items links.) This is entirely separate from the the DIV class used for the floating recent update menu. Remove the negative bottom margin value, and the problem with unclickable links in the floating divs goes away...
Now to condense the spacing between links, I'll remove the BR tag separating the links, and set the bottom margin of the QuoteStyle?Create to just a few pixels, or maybe 0.5em.
Total time wasted on this problem: 3 or 4 hours.
Lots of CSS bugs listed here, but this bug isn't here yet:
These pages have nothing to do with this problem:
Other interesting CSS things I came across:
If so, I'd like to hear from you.
I spend a lot of time tracking down solutions to many problems and questions, and it takes a lot of time to write about the answers so you can benefit from them. But I hope this page helped you solve your problem, or answered your question, clearly and quickly. If you'd like to support my making more tech tips, please donate a couple of bucks via paypal! For any size donation, I'll send you an Internet Guide on the topic of your choice to include on your website. See [Guides To The Internet] for some examples.
Please also consider making a link to this page from your website.
You can also reach me privately with your questions at [my contact page]!
- Garnet
|
Interested in Planar Array?