brandnewbox.co.uk

Microsoft forces backward step in email design

Outlook 2007 is to use MS Word’s rendering engine rather than its new Internet Explorer 7 engine, breaking most modern CSS designed emails.

Making RSS pretty using XSL and CSS

In Ben Hammersley’s Making Your RSS Feed Look Pretty in a Browser he discusses using CSS to improve the display of RSS feeds in web browsers.

This article discusses using the alternative method of using XSL.

Removing padding from IE buttons

Internet Explorer automatically adds padding to buttons in HTML forms.
This space stretches according to the length of the button’s text.

HTML Star Hack

Original sources: css-discuss, CSS Hub

* html input { overflow: visible; }

The * ensures that this rule is only applied to Internet Explorer.

Using CSS to produce an image gallery

UPDATE: an alternative version of this method has been added at the bottom of this article that takes a semantically marked up gallery and converts it to use the following technique using javascript.

An image gallery is a common web page requirement - a list of thumbnail images that link to larger versions of the images. In my example, the thumbnails have a maximum size, but can be of any dimensions within that size. Here is a technique to neatly display these images using CSS.

The finished image gallery can be viewed here

Generate list of images

As an image gallery is in essence a list of images, the logical HTML markup to use is an unordered list. Within each list item, the thumbnail image is displayed with a label, and it links to the full-sized image.

For starters, let’s use:

<ul>
  <li>
  <a href="big-image">
    <img src="thumbnail-image" alt="Label" />
  </a></li>
  ...
</ul>

Arranging images in rows and columns

To line the thumbnails in rows across the page we use the CSS:

li { display: inline; float: left; }

Traditionally we would have used tables, but by using CSS the number of columns can vary according to the width available.

As the thumbnails can all be differect dimensions, we can add a width and a height to get a more uniform grid

li { 
  display: inline; 
  float: left;  
  width: 101px; 
  height: 101px; 
}

Adding a background slide image

To make it a bit prettier let’s add a background image to the <li>:

li { 
  display: inline; 
  float: left; 
  width: 101px; 
  height: 101px; 
  margin: 4px;  
  background: transparent url(frame.gif) no-repeat top left; 
}

Centering the thumbnail

To centre the thumbnail within its container we’ll change the markup to make the thumbnail image a background image to tha <a> link. This allows us to use CSS to centre it easily and works well across browsers.

HTML:

<li>
  <a href="" 
    style="background-image: url(thumbnail-image)" /></a>
</li>

CSS:

li a { 
  display: block; 
  width: 101px;
  height: 101px;
  background-position: center; 
  background-repeat: no-repeat;
  text-decoration: none;
}

Displaying labels

Moving the thumbnail image into a background image loses the image’s label from the HTML. To put it back in, we include it within a <span> in the <a> tag.

HTML:

<li><a href="" 
  style="background-image: url(thumbnail-image)" />
  <span>Label</span>
  </a></li>

CSS:

li { height: 115px; }
li a span { 
  font-size: 9px; 
  position: relative; 
  top: 103px; 
  color: #666;  
  text-transform: uppercase; 
  display: block; 
  text-align: center; 
} 
li a:hover span { color: red; }

A working example of an image gallery can be found here

As one of the commenter below suggests, ideally the gallery should be marked up semantically - images should be tagged as <img>’s. An alternative method that uses javascript to ‘juggle’ a more semantically sound version of the gallery into the format above has been produced: an unobtrusive Javascript and CSS based image gallery

CSS Hacks

Browser bugs and differences in intrepreting the W3C specifications prevent CSS-based web designs from displaying the same on all web browsers.

CSS hacks take advantage of further browser bugs to hide CSS rules from browsers that mis-interpret them. In effect we use one bug to fix another.

The use of CSS hacks to fix problems is problematic. Future versions of browsers could fix one of the bugs being used, but not the other, so careful choice of hack is needed and they should only be used for old versions of browsers where it is known that neither or both the bugs still exist in the current version.

On a maintenance level it complicates stylesheets. Hacks can be difficult to spot and so should be commented in the code. My technique for doing this is to mark each occurence in the stylesheet with a comment, and for at least the first occurrence provide a link that provides a brief description of the bug and the hack.

The aim of this section is provide permanent links to hacks that I have used within my own code.