• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

My Monkey Do

A Log of Coding Solutions

  • Home
  • Web Hosts
  • Tools
  • About

No table-cell or table-row in IE CSS

May 13, 2011 by Webhead

Internet Explorer, How do I loathe thee?
Let me count the ways.

As stated on the w3schools website,

[quote]The values “inline-table”, “run-in”, “table”, “table-caption”, “table-cell”, “table-column”, “table-column-group”, “table-row”, “table-row-group”, and “inherit” is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.[/quote]

I had a project where I needed to create a photo gallery.  The goal was to get the gallery to look like iStockPhoto with the images all bottom-aligned, evenly spaced, etc, etc.  Well in creating the gallery I had a hard time aligning the photos on the bottom, so I took a look at how istock did it.  They use “table-cell” display option and vertically align the image to the bottom.  So I tried it, but soon found that Internet Explorer does not support that option.  And then I found that istock was no exception.

iStock with Chrome

 

iStock with IE

 

Solution:

I did not personally do this solution as this was not too important.  However someone on Stack Overflow seems to have solved it with jQuery:

$(document).ready(function(){
  if ($.browser.msie && $.browser.version == 7)
  {
    $(".tablecell").wrap("<td />");
    $(".tablerow").wrap("<tr />");
    $(".table").wrapInner("<table />");
  }
});

the above script assumes you have divs using style such as:

<style>
.table     { display: table; }
.tablerow  { display: table-row; }
.tablecell { display: table-cell; }
</style>

 

Filed Under: Coding Tagged With: css, IE crap

Primary Sidebar

Topics

apache apple block editor chrome cms css debug eCommerce embed firebug firefox git gmail goDaddy google hosting htaccess html html 5 IE crap image iPad iPhone javascript jquery linux localization mac os x ms sql mysql open source optimize php php 5.3 responsive rest api seo svg tinymce woocommerce wordpress wpengine xss yii youtube




Categories

  • Coding
  • Off the Shelf
  • Plugins
  • Random Thoughts
  • Server Stuff
  • Tools