adipalaz.com

Positioning of inline icons

When it comes to icons on links, for different reasons I prefer to use background images. You can consult the article Inline links with background images - three simple fixes for IE.

After reading the article Different approaches to positioning a comment icon in Basecamp and Backpack, recommended me by Karl Stanton, I've decided to make this page just for testing.

In the following examples the icon is inserted in the HTML document after the text as an inline <img> element. The goals are 1.) to keep the last word together with the icon when the text wraps over 2 lines and 2.) to prevent the jumping of the following content when a hidden icon is displayed on hover. Here are used some techniques from the above mentioned article and from Rimantas' test page.

Narrow the browser window to make the link with the icon wrap. Test with different browsers.

1. 1. The image is absolutely positioned relative to the containing element. With padding. The image is absolutely positioned relative to the containing element. Without padding.

   Not a perfect cross-browser solution.
   In Firefox, when the text wraps, the icon sticks to the end of the first line.
   Problems in Opera.
   Test with different browsers.

   In the following examples, when the link is not hovered, the icon is hidden using the CSS display property:

   The image is absolutely positioned relative to the containing element. With padding. The image is absolutely positioned relative to the containing element. Without padding.

   The problem with a hidden icon, displayed on hover, is that when the icon becomes visible, it sometimes wraps to the next line and pushes the following content down. This is the reason to use absolute positioning (absolutely positioned elements are removed from the flow and don't affect the surrounding content). You may want to put some padding after the text to make space for the icon.

2. 2. <img> with white-space: nowrap and   between the last word and the image 

   The white-space: nowrap helps Internet Explorer to keep the last word together with the icon.
   The non-breaking space   helps Opera to keep the last word together with the icon.
   Gecko-based browsers still risk having the icon knocked off alone on its own line. See the next example.

3. 3. The   + the image are wrapped in a <span> with white-space: nowrap 

   Wrapping the space together with the image in an inline element with white-space: nowrap helps Gecko-based browsers to keep the last word together with the icon. (This technique is more natural when the icon itself is a link. In this case, you can apply the white-space property to the anchor, rather than using extra <span> like in the above example. See Rimantas' test page.)

   In the following example, when the link is not hovered, the icon is hidden using the CSS visibility property:

   The   + the image are wrapped in a <span> with white-space: nowrap 

   The CSS visibility property allows you to hide elements, while reserving the space occupied by them, thus preventing the jumping of the following content when the mouse hovers over the link.

4. 4.

   Demonstration of a jumping content: In the following example the icon is hidden using the CSS display property:

   The icon is inserted after the text as an <img> inline element. XXXX XXXX. The   + the image are wrapped in a <span> with white-space: nowrap 

   Make the browser window so narrow that the last word of the above link reaches the edge of the container and it is almost about to wrap. Hover over the link to make the icon visible and see how it wraps to the next line and pushes this paragraph down.

---