Menu
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?
242
Here is one way of doing it. The trick is to apply overflow: auto to the div , which starts a new block formatting context. The result is that the floated button is enclosed within the block area defined by the div tag. You can then add margins to the button if needed to adjust your styling.
You need to float the blocks on the right side not push them over with left margin. Set them to float: right and they'll kick up where you want them. Until you float the elements they want to take up the full width of their parent container.
As long as your anchor has an ID you can link to a location in your view by clicking the div you will just need some javascript. Setting the window. location. hash value will put the focus of the view on the selected ID.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
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.
92
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".
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
