Why does adding float:left to my css make my link unclickable?

Question

I have a view with a section defined thus:

<div id="QuestionBody">
        <p><%=ViewData.Model.Body %></p>
        <div id="QuestionEditLink"><%=Html.ActionLink ("Edit","EditQuestion","Question",new {id=Model.QuestionId},null) %></div>
        <div id="QuestionHistoryLink"><%=Html.ActionLink ("History","ShowHistory","Question",new {postId=Model.PostId,questionId=Model.QuestionId},null) %></div>  
        <div id="AnsweringUser"><a href="/Profile/Profile?userName=https%3A%2F%2Fwww.google.com%2Faccounts%2Fo8%2Fid%3Fid%3DAItOawnZ6IhK1C5cf_9wKstNNfSYIdnRp_zryW4">Answered by Sam</a></div>          
    </div>

and this produces a section with some text and a couple of links under it. I wanted the links to be next to each other. I'm new to css and web development but added this to my style sheet:

#QuestionEditLink
{
    color: #666666;
    width:auto;
    float:left;
    padding:2px;
}

#QuestionHistoryLink
{
    color: #666666;
    width:auto;
    float:left;
    padding:2px;
}

and hey presto the links were nicely aligned. unfortunately they are also not clickable and in fact the cursor doesn't change when moving over them either.

So what did i do wrong? how to I use the css to align the two links next to each other so they are still clickable?

EDIT:

This behaviour is in chrome 8.0.552.215 and in firefox 3.6. It works as I would expect in IE 8, annoyingly.

EDIT2:

I have added the page to JSBin : http://jsbin.com/odefa4/edit which shows the issue. Only the question is styled and shows the problem, the links for the answers work ok...

Answer 1

The fix is pretty simple and cross browser too, add this (to your unclickable link):

#QuestionEditLink, #QuestionHistoryLink {
    position: relative;
    z-index: 10;
}

The fix here is the z-index, but it won't work if position isn't relative/absolute/fixed.

For more info on z-index see https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Have used this all the time, is simple, works in all browsers (IE6+, FF, Chrome, Safari, Opera).

Since others already said about your CSS issues there, I won't add to it. Just providing a solution, by the way, tested it with your provided JSBin, worked as always!

Answer 2

The usual reason is that there's a transparent layer on top. It's normally caused when a box is wider than you think and has a transparent border/padding. Use CSS to apply a temporary border to all items and you'll check whether it's the case.

Update #1

div, span, p{
    border: 1px solid red;
}

Update #2

I can see that #QuestionEditLink and #QuestionHistoryLink are floating. That means that they no longer use space in the page flow. So when you display #AskingUser next it starts at the same point and, being the last one on the page, it gets displayed on top of the two other boxes.

Your layout appears to be fully vertical. I presume you don't need any float: left at all.

BTW, you have lots of duplicate IDs.

Answer 3

hmmm sounds like a simple bug often found with multiple floats, you could try adding a clearing element after the links i would use something like

<b class="clear"></b>

.clear{
float:none;
clear:both;
font-size:0px;
line-height:0px;
height:0px;
}

that should be fairly cross browser, you may need to add   inside so its

<b class="clear">&nbsp;</b>

Answer 4

Your code will be invalid as you are using IDs when this should be a job for classes. This will do what you want:

#AskingUser {
    border: none;
    float: right;
    width:auto;
    padding: 2px;
    position: relative;
    text-align: right;
}

and add

#QuestionBody {
    border-bottom: 1px dotted black;
    overflow: hidden;
}

I've left it as IDs but you should adjust all your CSS and HTML so that they are classes instead

.askingUser {} and <div class="askingUser"></div>

if that makes sense.