I'm extending a WordPress plugin and one of the things I am doing is taking a table based layout and applying CSS to it so two table rows line up next to each other. This works in all non IE browsers. The results div (#map_table > tbody > tr:first-child + tr) actually shows up in the right place. The map div (#map_table > tbody > tr:first-child) may or may not be in the right spot. Nothing at all is showing up.

Here's the CSS:

/*move the map & results structure around*/
#map_table > tbody > tr{
    display: block;
#map_table > tbody > tr > td {
    display: block;
#map_table > tbody > tr:first-child{
    float: right;
    width: 70%;
#map_table > tbody > tr:first-child + tr{
    float: left;
    width: 30%;

1 answer


You're really going to have to do some DOM manipulation in order to get the desired behavior. IE isn't going to let you treat table rows as simple block elements -- I recommend that you write some light weight javascript to actually transform your table code into <div> based markup with some classes to distinguish their original structure (i.e. - <div class="table">, <div class="trow">, etc.).

Once you achieve this and have HTML elements IE can manipulate as expected, you'll have a couple more pitfalls you'll want to avoid:

Older versions of IE are fickle about the direct child selector ( > ) -- refer to this post for more information: "css-child-selector-doesnt-work-with-ie"

Also, prior to IE 8 there was no support for :first-child and :last-child (or any) pseudo selectors with the exception of :hover, and :focus (on anchor elements with href attributes, explicitly).

I recommend simplifying your markup to have class="first" on the first row and eliminating the direct child selectors (why do you need them?) for a starting point. Let me know if there's more information in the equation and we can address further.

Answered over 6 years ago by Gary Hepting
  • Well the good news is that I'm only worrying about IE8+ so I shouldn't need to worry about the direct child selector and the first child pseudo selector. DOM manipulation may be the only way to get the desired functionality to work but it is a hack that I'm sure will break when you add other extensions that also manipulate the DOM. Patrick Rauland over 6 years ago