display:table killing me in IE

Posted by subpixel on Stack Overflow See other posts from Stack Overflow or by subpixel
Published on 2010-05-17T23:37:57Z Indexed on 2010/05/17 23:40 UTC
Read the original article Hit count: 314

Filed under:

css-tables

I want to create horizontally-aligned table cells like the ones on this page.

I've followed the instructions, and I've even copied the css and markup verbatim, but no matter what I do IE 8 renders my table cells as blocks (stacked on top of each other instead of aligned next to each other).

css:

<style type="text/css">

body.TableStyles {
    display: inline-table;
    border-spacing: 4px;
}

div.maketable p {
    display: table-cell;
    width: 20%;
    background-color: #cdf;
    padding: 4px;
}

</style>

markup:

<body class="TableStyles">
<div class="maketable">
        <p>< prev</p>

        <p>next ></p>
</div>

</body>

Related posts about css-tables

CSS Tables & min-width container?

as seen on Stack Overflow - Search for 'Stack Overflow'
<div id="wrapper"> <div id="header">...</div> <div id="main"> <div id="content">...</div> <div id="sidebar">...</div> </div> </div> #wrapper { min-width: 900px; } #main { display: table-row; } #content { display: table-cell;… >>> More
css display:table first column too wide

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a css table setup like this: <div class='table'> <div> <span>name</span> <span>details</span> </div> </div> The css for the table is: .table{ display:table; width:100%; } .table div{ text-align:right; display:table-row; border-collapse:… >>> More
CSS Equivalent of Table Rowspan with Fluid Height

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm trying to accomplish the following using CSS: <table border="1" width="300px"> <tr> <td rowspan="2">This row should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.</td> <td>Here is some sample text. And some additional sample… >>> More
display:table killing me in IE

as seen on Stack Overflow - Search for 'Stack Overflow'
I want to create horizontally-aligned table cells like the ones on this page. I've followed the instructions, and I've even copied the css and markup verbatim, but no matter what I do IE 8 renders my table cells as blocks (stacked on top of each other instead of aligned next to each other). css: <style… >>> More
Front-end structure of large scale Django project

as seen on Programmers - Search for 'Programmers'
Few days ago, I started to work in new company. Before me, all front-end and backend code was written by one man (oh my...). As you know, Django app contains two main directories for front-end: /static - for static(public) files and /templates - for django templates Now, we have large application… >>> More

Developer IT

display:table killing me in IE - Developer IT

display:table killing me in IE

css-tables

Related posts about css-tables

CSS Tables & min-width container?

css display:table first column too wide

CSS Equivalent of Table Rowspan with Fluid Height

display:table killing me in IE

Front-end structure of large scale Django project

Categories cloud