I’m constantly finding myself needing to reference this for colleagues or for myself so it’s only appropriate to add it to the blog. If you’re working with Internet Explorer on a regular basis and let’s be honest, if you’re in web design, you will be.
Here are the supported conditional mark ups for each version of IE:
height: 200px; /* normal browsers */
_height: 300px; /* IE6 */
.height: 250px; /* IE7 */
*height: 350px; /* All IEs */
Brilliant article on fluid image layout by Ethan. The technique allows for images to resize as the window resizes. Similar fluid techniques have been around for content layout but nothing for images. Most solutions required maintenance by the author to resize posted images to fit the column/row width/height restrictions of their website. This was restrictive for both readers and authors where as a fluid image layout would help large images look good at high as well as low resolution.
The first step is taken by using the css property max-width. Setting it to 100% allows the image to resize with the browser in standards compliant browsers (i.e. not IE). See Ethan’s test case for fluid images here.
I’ve been meaning to clean up and do a fluid style design for my blog for a while now. This in combination with Ethan’s other fluid grid design article over at a list apart might be enough to get me started.
