inline div issue in ie7 - html

Question

I've created a simple widget in JQuery that wraps texboxes in a div, adds a clear text button and a placeholder. Added the main bits for this at http://jsfiddle.net/BpkDN/, something in the CSS which I can't find is messing the styling up in ie7. Seems to work in every other version.
Here is an extract of what my widget produces:
CSS:
::-ms-clear {
display: none;
}
.jui-textbox {
border: 1px solid #DADADA;
position: relative;
padding:0 !important;
white-space: nowrap;
background: #fff;
overflow: hidden;
height: 33px;
line-height: 33px;
display: inline-block;
*display:inline;
margin: 10px 0;
}
.jui-textbox input {
background-color: transparent;
color: #313131;
height: 33px !important;
line-height:33px\9;
width: 300px;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
padding: 0;
margin: 0 5px !important;
border: none;
float:left;
}
.jui-textbox-placeholder {
position: absolute;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
color: #A1A1A1;
height: 33px;
line-height: 33px;
padding: 0;
margin: 0;
left: 5px;
overflow: hidden;
cursor: text;
}
.jui-textbox-hover {
border: 1px solid #CACACA;
}
.jui-textbox-active {
border: 1px solid #a1a1a1;
}
.jui-textbox-clear.show{
display:inline-block !important;
*display:inline !important;
}
.jui-textbox-clear {
display:none;
cursor: pointer;
background: #fff;
border-left: 1px solid #a1a1a1;
width: 33px;
height: 33px;
background-image:url(icons/x.png);
background-position:center;
background-repeat:no-repeat;
}
.jui-hoverable:hover,.jui-hoverable-hovered
{ background-color: #f1f1f1;}
textarea:focus, input:focus{
outline: none;
}
Html
<div class="jui-textbox">
<div class="jui-textbox-placeholder" unselectable="on" style="font-size: 14px;">
Default
</div>
<input type="text" style="width: 300px;">
<div class="jui-textbox-clear jui-hoverable jui-icons-x"></div>
</div>

Answer 1

Try this:
CSS:
::-ms-clear {
display: none;
}
.jui-textbox {
width: 300px;
border: 1px solid #DADADA;
position: relative;
padding:0 !important;
white-space: nowrap;
background: #fff;
overflow: hidden;
height: 33px;
line-height: 33px;
display: inline-block;
/**display:inline;*/
margin: 10px 0;
}
.jui-textbox input {
background-color: transparent;
color: #313131;
height: 33px !important;
line-height:33px\9;
width: 300px;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
padding: 0;
margin: 0 5px !important;
border: none;
float:left;
}
.jui-textbox-placeholder {
position: absolute;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
color: #A1A1A1;
height: 33px;
line-height: 33px;
padding: 0;
margin: 0;
left: 5px;
overflow: hidden;
cursor: text;
}
.jui-textbox-hover {
border: 1px solid #CACACA;
}
.jui-textbox-active {
border: 1px solid #a1a1a1;
}
.jui-textbox-clear.show{
display:inline-block !important;
*display:inline !important;
}
.jui-textbox-clear {
display:none;
cursor: pointer;
background: #fff;
border-left: 1px solid #a1a1a1;
width: 33px;
height: 33px;
background-image:url(icons/x.png);
background-position:center;
background-repeat:no-repeat;
position: absolute;
right: 0;
}
.jui-hoverable:hover,.jui-hoverable-hovered
{ background-color: #f1f1f1;}
textarea:focus, input:focus{
outline: none;
}
HTML:
<div class="jui-textbox">
<div class="jui-textbox-placeholder" unselectable="on" style="font-size: 14px;">
Default
</div>
<input type="text" style="width: 300px;">
<div class="jui-textbox-clear jui-hoverable jui-icons-x"></div>
</div>
<br/>
<div class="jui-textbox">
<div class="jui-textbox-placeholder" unselectable="on" style="font-size: 14px;">
Focused
</div>
<input type="text" style="width: 266px;">
<div class="jui-textbox-clear jui-hoverable jui-icons-x show"></div>
</div>
Tested in IE7 (Vista).
Demo: http://jsfiddle.net/PENFT/
Another solution, but it's not very clean:
Removing width from .jui-textbox.
Adding float:left; to ".jui-textbox" and changing <br/> with <br
style="clear:both" />.
Note: <br style="clear:both" /> its so dirty.

Answer 2

In this case JavaScript is the simple hack, because in IE7 :focus doesn't work. Take a look at the ie7-js project.
IE7.js is a JavaScript library to make
Microsoft Internet Explorer behave
like a standards-compliant browser. It
fixes many HTML and CSS issues and
makes transparent PNG work correctly
under IE5 and IE6.
Upgrade MSIE5.5-7 to be compatible with MSIE8.
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
You can also refer to this SO question. IE7 doesn't support this pseudo class.