August 30, 2011

Removing spaces between images in HTML

The following code shows how to use HTML to align a grid of images in rows and columns without tables, with no spaces or gaps between the images. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Image Grid Example</title>
  <!--CSS-->
  <style type="text/css">
  .row {
    line-height:0;
  }
  body {
    background-color: #000000;
  }
  </style>
</head>

<body>
  <div class="row">
  <img src="tile_1.gif" 
  /><img src="tile_2.gif"
  /><img src="tile_3.gif"/>
  </div>

  <div class="row">
  <img src="tile_4.gif"
  /><img src="tile_5.gif"
  /><img src="tile_6.gif"/>
  </div>
  
  <div class="row">
  <img src="tile_7.gif"
  /><img src="tile_8.gif"
  /><img src="tile_9.gif"/>
  </div>
</body>
</html>
There are two somewhat unintuitive techniques required to remove the spaces between the images:
  • There must be no space between the <img> tags. For example, the following code causes an unwanted gap between tile_1 and tile_2:
    <img src="tile_1.gif"/> <img src="tile_2.gif"/>
  • The images must be placed inside a <div> element with the CSS style line-height set to 0
Here is a working demo.
Posted by moock at 12:34 PM

August 10, 2011

Union now supports WebSocket

Starting with Union 1.1.0, OrbiterMicro (Union's JavaScript framework) includes native support for WebSocket. Using WebSocket, JavaScript applications can conduct network communications at speeds that rival ActionScript's XMLSocket and Socket (though no browser currently supports native binary data transfer). Compared to AJAX long-polling techniques (aka Comet), a basic ping (message roundtrip) over WebSocket is about twice as fast as traditional HTTP (see the live test at the link below). WebSocket also reduces bandwidth consumption by removing both redundant HTTP polling and per-message HTTP headers.

In total, Union now supports three transport mechanisms: Flash's XMLSocket, WebSocket, and traditional HTTP (a custom form of Comet). All three transports can be used at same time over the same port, allowing a JavaScript application running on one machine to communicate directly with a Flash application running on another.

For a detailed explanation of how WebSocket communications work, how WebSocket benefits networked applications, and how to use WebSocket with Union Platform, see:

>> Introduction to WebSocket

Posted by moock at 12:08 PM