tags:

views:

37

answers:

2

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

Your HTML is not well formed. The < and > before and after previous and next need to be escaped as &lt; and &gt; , respectively. This is probably forcing the browser into some quirks mode where it isn't CSS conform

seanizer
Thanks for pointing that out, but removing those characters altogether has no effect.
subpixel
ok, does your html have a valid xhtml doctype declaration? see http://www.cs.tut.fi/~jkorpela/quirks-mode.html for explanation
seanizer
A: 

instead of doing this, why not use <ul><li> to achieve the effect?

Martin Ongtangco