Menu
I've created three variations of table menu
see this example
first - pure html table - works fine in all browsers.
Second and third are the CSS styled menu with table-row table-cell displays
But IE8 doesn't render them correctly.
Is there a way to create pure CSS menu that works fine in all browsers and acts exactly as usual table menu?
(I need longer items take up more spaces and wrap into rows etc as long as table behaves)
What I need is pure CSS solution which doesn't depend on browser versions or something like this
241
A lot of sites and folks report that display: table is supported by IE8, but that it doesn't work as desired.
However, I found the code below, taken from http://quirksmode.org/css/css2/display.html#table, will display the tables as desired with IE10 > Browser Mode: IE8 but not with IE10 > Browser Mode: Compat View.
The takeaway is that you shouldn't rely on the poor support of CSS with IE8. Although it would be nice to have a single solution across various browsers and versions, it's probably easier at this point to accommodate older IE versions. Also, I agree with the comment from this answer as tables could be a possible option to explore: "Honestly if what you are displaying is tabular data, then use a table. Tables are only evil when used for layout."
Finally, you'll find an extensive breakdown of the recommended meta tag here: What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?
<p><code>display: table</code> tells the element to display as a table. Nested elements should be displayed as <code>table-row</code> and <code>table-cell</code>, mimicking the good old TRs and TDs.</p>
<div class="example">Live examples:
<br />This example has divs with display: table, table-row, and table-cell, all properly nested.
<div class="first table">display: table
<div class="second row">display: table-row
<div class="third cell">display: table-cell and some more content</div>
<div class="third cell">display: table-cell</div>
</div>
<div class="second row">display: table-row
<div class="third cell">display: table-cell</div>
<div class="third cell">display: table-cell</div>
</div>
</div>The outermost div of this example has display: block, and not table.
<div class="first">display: block
<div class="second row">display: table-row
<div class="third cell">display: table-cell and some more content</div>
<div class="third cell">display: table-cell</div>
</div>
<div class="second row">display: table-row
<div class="third cell">display: table-cell</div>
<div class="third cell">display: table-cell</div>
</div>
</div>This example has no divs with display: table-row
<div class="first table">display: table
<div class="third cell">display: table-cell and some more content</div>
<div class="third cell">display: table-cell</div>
</div>
</div>
div.example {
width: 25em;
border: 5px double;
padding: 5px;
}
div.example div {
margin: 0.5em;
padding: 0.5em;
}
.first {
border: 1px solid #cc0000;
}
.second {
border: 1px solid #00cc00;
}
.third {
border: 1px solid #0000cc;
}
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
Included for testing purposes. I find different results from the same code.
196
Your compatibility issue with the 2nd and 3rd tables will be solved using the following link in the <head> part of your web page:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
for more information, have a look at THIS page from the Internet Explorer Dev Center
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
