Question

I am using a DevExpress ASPxMenu. The html it produces creates a td element between every menu item. I have already asked DevExpress how I can remove this td via a setting or add a class and they say it can’t be done (http://devexpress.com/Support/Center/p/Q281686.aspx, there is a sample solution attached to that ticket too)

The html/css looks something like (i have added the background:red to highlight the cell):

<table class="nav-menu" cellspacing="0">
    <tr>
        <td class="nav-item nav-item-selected">menu 1</td>
        <td id="td0" style="height:1px;width:2px;background:red">
           <div style="height:1px;width:2px;overflow:hidden;"> </div>
        </td>
        <td class="nav-item"> menu 2</td>
        <td id="td1" style="height:1px;width:2px;background:red">
           <div style="height:1px;width:2px;overflow:hidden;"> </div>
        </td>
        <td class="nav-item"> menu 3</td>
        <td id="td2" style="height:1px;width:2px;background:red">
           <div style="height:1px;width:2px;overflow:hidden;"> </div>
        </td>
        <td class="nav-item"> menu 4</td>
        <td id="td3" style="height:1px;width:2px;background:red">
           <div style="height:1px;width:2px;overflow:hidden;"> </div>
        </td>
    </tr>
</table>

.nav-menu 
{
    width:400px;
    height:35px;
    background: transparent;
}
.nav-menu td 
{
    display: none;
}
.nav-item
{
    font: 1em/1.167em Helvetica,Arial,sans-serif!important;
    color: #5A81B3;
    padding-left: 4px;  
    display: table-cell!important;
    border: 0px;    
    border-right-color: #DFE9EF;
    border-right-style:Solid;
    border-right-width: 1px;    
 }
 .nav-item-selected,
 .nav-item:hover
 {    
      color: #5A81B3;
      background: url("../images/arrow-nav.gif") no-repeat scroll 8px 100% #DFE9EF; 
  }

I have no control over the td with the id (td id=”td0″) and I don’t want it displayed.

The above works great in FF and IE8/9 but not IE6/7. I have tried different displays but they just break FF and IE8/9.

I have looked at display :table-cell does not work in ie 7? and IE7 and the CSS table-cell property but I don’t think they help me.

So:

a) how can i get the menu to display similar to table-cell in ie6 or 7

OR

b) how can i get ie6 and 7 to ignore this rule

.nav-menu td 
{
    display: none;
}

Would prefer to avoid javascript if I can. I also don’t want to use the rule below as the id is generated by .net.

  #td0 
  {
      display: none;
  }

Thanks

Answer 1

Instead of hiding the element through display, you could hide its visibility. This, however, won’t collapse the cell and the space it occupies will still be there. It might (or might not) satisfy your needs:

.nav-menu td  {
    visibility: hidden;
}

.nav-menu .nav-item {
    visibility: visible;
}

If you really need to get rid of that space, then you can force the cell to occupy zero pixels like this:

.nav-menu td  {
    visibility: hidden;
    width: 0 !important;
}

.nav-menu td div {
    display: none;
}

You can view a demo here: http://jsfiddle.net/7z7qr/