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

后端未结

关注

 7  2169

I have a link inside a div that floats to the right of the screen. The link does not work in FF or Chrome, but works in IE (have only tested with IE8).

The simplest

相关标签:

7条回答

春和景丽

2020-12-25 15:19

My solution: make sure the z-index of the offending div is greater than those around it (that may be overflowing).

0 讨论(0)
发布评论:

提交评论
- 加载中...
逝去的感伤

2020-12-25 15:20

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...

梦谈多话

2020-12-25 15:23

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">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/

0 讨论(0)

[愿得一人]

2020-12-25 15:24
```
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".
0 讨论(0)
发布评论:

提交评论
- 加载中...
抹茶落季

2020-12-25 15:28
Put this to your styles
```
#menucontainer { clear: both; }
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

鱼传尺愫

2020-12-25 15:31

Set the element with the ID menucontainer to have the attribute: clear and the value: both, or at least left.

He ID menucontainer overlaps your link.

<html>
<head>
<title>test</title>
<style type="text/css">
#logo {
 left:10px;
 float:left;
 top:10px;
 background-color:red;
} 
#feedback {
 float: right;
 background-color:yellow;
}
ul#menu
{
    position:relative;
}
ul#menu li
{
     display: inline;
     list-style: none;       
}
ul#menu li.last {
    margin-right: 50px;
}
#menucontainer {
clear:left;
}
</style>
</head>
<body>
<div class="page">
<div id="header">
    <div id="logo">logo</div>
    <div id="feedback"><a href="http://www.norge.no">test link</a></div>
    <div id="menucontainer"><ul id="menu"><li>test 1<li>test2</ul></div>
</div>
</div>

</body>

0 讨论(0)

1 2 下一页