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

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 example looks like this:

<html>
<head>
<title>test</title>
<style type="text/css">
#logo {
 left:10px;
 float:left;
 top:10px;
} 
#feedback {
 float: right;
}
ul#menu
{
    position:relative;
}
ul#menu li
{
     display: inline;
     list-style: none;       
}
ul#menu li.last {
    margin-right: 50px;
}
</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>

If i remove any of the float styles or position styles, the link becomes clickable in Chrome and Firefox. (but then my layout is off).

My question is: What's causing this, and is there a reliable way to solve it?

17
задан Per-Frode Pedersen 23 September 2010 в 11:22
поделиться