3

I've created a custom HTML combo box. Everything's working good except Webkit browsers (Chrome and Safari) render the focus highlight wonky. Here's what it looks like on Chrome and Safari:

Focus as rendered in Chrome

Notice the protruding focus border on the bottom of the drop down image.

Here's the same thing in IE and Firefox:

Focus rendered in Firefox

Focus rendered in IE9

As you can see, IE and Firefox both render the focus using a nice rectangle, but Chrome renders it wonky.

Here's the relevant HTML:

<div style="height:32px;" class="ko-select-container" tabindex=0>
    <div class="selected-option">
        <span>Select a Value</span>
    </div>
    <div style="float:right;">
        <!-- Drop down image height is 32px !-->
        <img src="DropDown.png" />
    </div>
    <div style="clear:both" />
</div>
Judah Gabriel Himango
  • 58,906
  • 38
  • 158
  • 212

1 Answers1

4

Try adding vertical-align: top to the img. That gap looks suspiciously like the usual problem.

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349