9

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

BomberMan
  • 1,080
  • 3
  • 13
  • 33
el Dude
  • 4,115
  • 5
  • 22
  • 39
  • Remember that if you won't assign the bounty, half of it will be assigned automatically (to the most upvoted answer), but the other half will be lost (not returned to you anyway), so lost for lost, it will be better to assign it in the 24 hours next to its expiration. – Andrea Ligios Nov 14 '14 at 14:27

5 Answers5

7

Findings

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?

Code Example

HTML

<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>

CSS

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;
}

Live Examples of Code

Included for testing purposes. I find different results from the same code.

Community
  • 1
  • 1
JSuar
  • 20,558
  • 4
  • 40
  • 80
3

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

Banana
  • 7,309
  • 3
  • 19
  • 41
  • `flex` is supported in IE from v10+, doesn't work at all in IE8 (( – el Dude Nov 06 '14 at 17:26
  • aww sucks i didnt know that xD oh well, its still achievable without flex, i will update my answer – Banana Nov 06 '14 at 17:27
  • anyway +1 for effort )) – el Dude Nov 06 '14 at 18:18
  • That's kind of weird way to write code for specific browser. But I'll accept it in case there will be no other solution – el Dude Nov 06 '14 at 19:09
  • well ie 8 passed with window's xp resignation, so there is no more support for it. you could also set the `content="IE=edge"`, it will use the IE's highest supported rendering engine. i have checked and using those tags does not affect the table's rendering in Chrome, but fixes in IE 8. – Banana Nov 06 '14 at 19:14
  • so, there's no way except `table-cell` for `display` styling... seems so – el Dude Nov 06 '14 at 20:34
  • There is always another way, if you tinker with the css enough. But the one suggested by yourself is the simplest. – Banana Nov 06 '14 at 20:36
2

When dealing with IE, you should always put this tag in your head section:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

to instruct it to use the best inbuilt standard mode available.

The second part of the equation is the DTD: IE acts in strange ways when parsing pages with different DTDs; Wikipedia has a great list of what happens in each case, then for IE8:

4.01 Strict with system identifier: Standard

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

4.01 Strict without system identifier: Standard

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

4.01 Transitional with system identifier: Almost Standard

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

4.01 Transitional without system identifier: Quirks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

HTML5: Standard

<!DOCTYPE html>

And so on with XHTML and others. I strongly suggest you to use the HTML5 one.

Since I've no IE8 available to test it, it's a long shot... just try with IE=edge and HTML5 doctype and let us know.

Andrea Ligios
  • 46,329
  • 24
  • 102
  • 208
1

Have you tried adding respond.js and html5 shim to your head section to force support of HTML5 elements across older browsers?

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Just plop this in the head of your document. This should help IE8 recognize the "display: table;" selector.

ben.kaminski
  • 934
  • 3
  • 13
  • 21
1

I may recommend bootstrap or Angular. There is a reason people use these. However, There may be a little css tricks you will have to implement. Remember IE8 was in the late 90s. SO only tags then work the best.

I notice using em (which is 1 = 16 pixels) position relative and move either "top, bottom, left right" work well. Tables are ideal as also using display blocks.

Make sure to always have a separate css file.

<!--[if lt IE 8]>
  <script src="YOUR FILE HERE"></script>
<![endif]-->

Also good reminders are: 1. overflow:work-break; will not work in IE8 use --> overflow-wrap: break-word; 2. if px or % does not work attempt to use em --> this value is 16px per 1em. so .125em is 12.5% of 16 pixels 3. IE7 and IE8 support only these CSS3 selectors: General siblings (element1~element2) and Attribute selectors [attr^=val], [attr$=val], and [attr*=val] 4. supports only the content-box and border-box values, not padding-box (which was added to the spec later). 5. border-radius doesn't work

Kayla Z
  • 11
  • 1