Bug Css Cant Click Links In Float Right Boxes

Featured: Featured Stories | Picture Gallery

The China Study Part 4 - Scientific Reductionism | ErrorDocument

Chat11.com Web Bible11.com MyBibleCenter.com

	The Bush Survival Guide - 250 Ways to Make It Through The NExt Four Years Without Misunderestimating the Dangers Ahead, and Other Subliminable Stategeries
Links: [50 State Center] Hillary's Secret War A People's History Of The United States

Strange Browser Bugs

CSS Bugs

Sometimes links in float right divisions are not clickable

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.

• Some google searches that I tried for finding a solution to this problem:
  • Links not working in div
  • div float "links not clickable"
  • css bugs "not clickable"
  • css "links dont work" float - Probably a google whack now, there were no results when I tried it.
  • css "links dont work" - This one will bury you in irrelevant results for this problem. Most people's links not working comments were about unimplemented parts of their own design and had nothing to do with this bug.

• No one can figure out the problem in this thread: http://codewalkers.com/forum/index.php?action=displaythread&forum=clientside&id=301&realm=default - Can't Click Links
  • i have created a website in dreamweaver and when i put it live on the internet i go to the page, my navigation are text links like all my other ones. I hover my mouse over a link and it wont click meaning it doesnt display the hand instead of the arrow. If i click it nothing happens as if the text link was not there can anyone tell me why? ... My visitors have told me they can click the links. ... Anyone have any suggestions?

• This page talks about a similar problem, back in 2002, with netscape 4. Someone got around the problem by wrapping A anchors in P tags. Didn't work to solve my bug. http://www.webmasterworld.com/forum83/274.htm

• This thread talks about Having Weird IE6 Bug, http://www.webmasterworld.com/forum83/1568.htm?highlight=css+float+links Also known as the guillotine bug or jumping links bug.

Lots of CSS bugs listed here, but this bug isn't here yet:

• http://css.nu/pointers/bugs-ie.html

These pages have nothing to do with this problem:

• http://www.uk-learning.net/t16181.html

Other interesting CSS things I came across:

• http://glish.com/css/7.asp - 3 column layout, with center column flexible.
• Real world style: http://www.realworldstyle.com/
• http://www.webmasterworld.com/forum83/746.htm CSS Crash Course - Part Four Text Properties & Pseudo Classes

Did This Page Help You?

Tech Tips By Garnet ...

If this page helped you, please contact me and let me know.

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. You can also contact me about your tech problems. If you can afford some donation to cover my time to look into your problem, please mention the amount you can contribute, and that will help me give proper priority to your request.

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

• Many thanks for the information on the CSS negative value => float link problem. I would never have guessed that p {position:relative; top -3px} would have stopped the links working! Roll on the day that browsers implement style-sheet layouts correctly!

• I had the same problem. But there were no negative margins. So I had to carry on. Using the DOM inspector, I found, that the links only seemed to be in the floater, really weren't. Only very long text-links reached into the box, and were clickable. After recognising this, I found the solution is: You may (and should) give a {position:relative}. But you have to give a {right:0px} or something like this too. Peter

Search for books about:

Bobsgear - Get A Free Enterrpise Wiki Space!
Review: The Bobsgear Project was started to develop a variety of Confluence plugins. This installation of the Confluence Enterprise wiki includes flexible attachments, many Confluence plugins, personal blogs, interesting articles, and more. Bobsgear already has spaces related to politics, art and photography wiki, technical issues wiki, ediscovery wiki, health, Christian theology and Sabbath School wiki, the bible, book reviews, and quotations. Bobsgear allows free signup, and invites anyone to create a free hosted Confluence wiki space.

NEW USERS CLICK HERE! for a quick introduction to Wiki.

Elapsed:0