My Monkey Do

A Log of Coding Solutions

css

No table-cell or table-row in IE CSS

by

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>

 

Resizing Background Image

by

Demo: Resizing Background Image Demo

Problem:

I’ve been given a project to make a background image resize with the browser window size while retaining its ratio, not causing scrollbars, and always filling up the whole window.  It seems pretty easy until you actually see it.  Here’s a real life example of it:  http://ringvemedia.com/.  As you can see it pans as the browser is resized larger until a certain point and then it expands.  It never breaks its width to height ratio.

Solution:

The solution is quite simple.  It only involves using some CSS and a table.

First we need to make sure the image doesn’t overflow and cause scrollbars.

html,body,#bg,#bg table,#bg td {
    width:100%;
    height:100%;
    overflow:hidden
}

Then we need to center the div and make sure it’s not too small.

#bg {
    position:absolute;
    width:200%;
    height:200%;
    top:-50%;
    left:-50%;
}

Finally, center the image. I’m not exactly sure why a table is needed in the html, but it does work better in filling the window with it in.

#bg td {
    vertical-align:middle;
    text-align:center;
}

#bg img {
    min-height:50%;
    min-width:50%;
    margin:0 auto;
}

This is some pretty unique css coding and I’ve seen it in a couple places.  Surprisingly (not), it’s the same code at both sites!  I wonder who copied who?  Well, I can’t say I didn’t do that either.