Question

I’m building a “add tag” widget and I’m having a problem getting my click handler to fire in IE7. The widget works almost exactly like adding tags in Stack Overflow… as you type, it suggests tags. When the user clicks in the “add tag box”, the text input needs to focus. My code works on all browsers except IE7… for some reason the click handler isn’t being fired. I have a feeling it has to do with my CSS and/or HTML and the box model problems in IE7.

Here’s my jsfiddle: (use IE and turn on IE7 (both browser and document)

http://jsfiddle.net/YYgy8/2/

Here’s an example of the markup:

<div id="tags">
    <div id="editor">
        <ul id="taglist">
            <li class="tag">
                <span class="tagname">Tag1</span>
            </li>
            <li class="tag">
                <span class="tagname">Tag2</span>
            </li>
            <li id="tag-editor">
                <input type="text" id="tag-editor-input">
            </li>
        </ul>
        <div class="clear"></div>
    </div>
</div>

And using jquery, I’m adding a click handler to the editor that should focus the text input:

$('#editor').click(function(){
    $('#tag-editor-input').focus();
    alert ('click!');
});

Here’s my CSS:

#tags {margin:1em;}
#editor {
    border:1px solid #ccc; background-color:#fff;
    padding:0.2em 0.4em;
    margin-bottom:1em;
}
#taglist {
    list-style:none; padding:0; margin:0;
}
#taglist > li {
    margin:2px 5px 2px 0; 
    float:left;
}
.tag {
    padding:0.2em; 
    border:1px solid #ccc; 
    background-color:#F2F1B3;
    margin-right:5px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font-size:1em;
    line-height:1.3em;
    position:relative;
}
.tagname {
    display:block;
    max-width:100px;
    min-width:30px;
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
#tag-editor {
    border:1px solid #eee;
}
#tag-editor-input {
    border:0; 
    padding:0.2em; 
    font-size:1em; 
    line-height:1.3em; 
    width:10px; 
    max-width:100px; 
    min-width:10px;
    -webkit-text-size-adjust: none;
    outline:none;
}

.clear {clear:both;}

Answer 1

Update #editor class (overflow:hidden; is added):

#editor {
    border:1px solid #ccc; background-color:#fff;
    padding:0.2em 0.4em;
    margin-bottom:1em;
    overflow:hidden;
}

Now it works for me:
http://jsfiddle.net/YYgy8/10/