ansaurus

Question

Anchor tag becomes non-working link in a div with float: right;

Answer 1

+1 A:

I've had the same problem before. When you hover over the anchor, the cursor doesn't change to the pointer, and you can't click on the link.

Every time, it has been due to a positioned element that overlaps the anchor, effectively becoming a layer between the mouse and the anchor. Usually it is an image like you have.

Make sure that the image isn't so wide that it's boundary or css width property isn't overlapping the anchor. If that isn't the reason, do the same with the menucontainer.

Do you use firebug for firefox? If not, it might help discover any overlapping issues.

I have a question within an answer for you...why are you relatively positioning the ul#menu without declaring a top,bottom,left, or right attribute? Just curious. I'm not used to seeing those not there.

kevtrout 2010-09-23 11:23:00

Thanks for a well explained answer. To answer your question: I believe the ul#menu li.last makes sure that the menu starts from the right and grows to the left. It appears that position:relative on the ul#menu is not necessary, and is probably left over from another attempt on right justifying the menu.

Per-Frode Pedersen 2010-09-24 05:51:37

Answer 2

A:

Put this to your styles


#menucontainer { clear: both; }

Ventus 2010-09-23 11:23:48

Answer 3

A:

ul#menu
{
    position:relative;
    overflow:auto;
}

appears to fix it.

I believe its because the floats aren't cleared, and you haven't specified any widths, so the two floated elements are "overlapping".

Ross 2010-09-23 11:24:05

Answer 4

A:

Try this

HTML

<html>
    <head>
    </head>
    <body>
        <div class="page">
            <div id="header">
                <div id="logo">logo</div>
                <div id="feedback"><a href="http://www.norge.no"&gt;test link</a></div>
                <br class="clear" />
                <div id="menucontainer">
                    <ul id="menu" class="clear">
                        <li>test 1</li>
                        <li>test2</li>
                    </ul>
                </div>
            </div>
        </div>
        </body>
</html>

css

.clear{
    clear:both;
}
#logo {
    float:left;
    margin:10px;
} 

#feedback {
    float: right;
}

ul#menu
{
}
ul#menu li
{
    float:left;
}
ul#menu li a{
    display:block;
}
ul#menu li.last {
    margin-right: 50px;
}

working demo

http://jsfiddle.net/C9r7f/

JapanPro 2010-09-23 11:25:25

ansaurus

tags:

views:

answers:

Anchor tag becomes non-working link in a div with float: right;

related questions