Question

I know this is a common problem with IE6 from my Google search but everything I have tried has failed. Here is my HTML:

<table width="750" border="0" cellspacing="5" cellpadding="5" class="largetable" >
  <tr>
    <td width="65px"><b>SELECT</b></td>
    <td class="plus" width="300px">
      <select id="op" name="">
      <option selected="selected"></option>
      <option>SUM</option>
      <option>AVG</option>
      <option>MIN</option>
      <option>MAX</option>
      </select> 

      <!-- problem here, background image not showing -->
      <a href="#" onclick="add_select(); return false;"></a>

And my CSS:

.plus a {
  background-image:url("../images/plus.png");
  background-repeat:no-repeat;
  border:medium none;
  margin-left:3px;
  padding:6px 4px 6px 30px;
  background-position:2% 100%;
}

The problem is that the background image does not appear. It appears on my Firefox browser but not on IE6.

I have tried using height: 1% and also position:relative and neither worked. I tried tons of other stuff but the damn thing won’t appear.

Answer 1

IE6 won’t render empty inline elements. Adding display: inline-block should fix it. You may prefer to serve that rule in a * html .plus a CSS hack to target only IE; I think it should generally be fine elsewhere though.