Note that there are some explanatory texts on larger screens.

plurals
  1. POtable-cell in ie6 and 7
    text
    copied!<p>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 (<a href="http://devexpress.com/Support/Center/p/Q281686.aspx" rel="nofollow noreferrer">http://devexpress.com/Support/Center/p/Q281686.aspx</a>, there is a sample solution attached to that ticket too)</p> <p>The html/css looks something like (i have added the background:red to highlight the cell): </p> <pre><code>&lt;table class="nav-menu" cellspacing="0"&gt; &lt;tr&gt; &lt;td class="nav-item nav-item-selected"&gt;menu 1&lt;/td&gt; &lt;td id="td0" style="height:1px;width:2px;background:red"&gt; &lt;div style="height:1px;width:2px;overflow:hidden;"&gt; &lt;/div&gt; &lt;/td&gt; &lt;td class="nav-item"&gt; menu 2&lt;/td&gt; &lt;td id="td1" style="height:1px;width:2px;background:red"&gt; &lt;div style="height:1px;width:2px;overflow:hidden;"&gt; &lt;/div&gt; &lt;/td&gt; &lt;td class="nav-item"&gt; menu 3&lt;/td&gt; &lt;td id="td2" style="height:1px;width:2px;background:red"&gt; &lt;div style="height:1px;width:2px;overflow:hidden;"&gt; &lt;/div&gt; &lt;/td&gt; &lt;td class="nav-item"&gt; menu 4&lt;/td&gt; &lt;td id="td3" style="height:1px;width:2px;background:red"&gt; &lt;div style="height:1px;width:2px;overflow:hidden;"&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; .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; } </code></pre> <p>I have no control over the td with the id (td id="td0") and I don't want it displayed.</p> <p>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.</p> <p>I have looked at <a href="https://stackoverflow.com/questions/6956365/display-table-cell-does-not-work-in-ie-7">display :table-cell does not work in ie 7?</a> and <a href="https://stackoverflow.com/questions/249103/ie7-and-the-css-table-cell-property">IE7 and the CSS table-cell property</a> but I don't think they help me.</p> <p>So:</p> <p>a) how can i get the menu to display similar to table-cell in ie6 or 7</p> <p>OR</p> <p>b) how can i get ie6 and 7 to ignore this rule </p> <pre><code>.nav-menu td { display: none; } </code></pre> <p>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.</p> <pre><code> #td0 { display: none; } </code></pre> <p>Thanks</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload