Tuesday, July 24, 2007

Gmail Type Loading Indicator Update

After Brian Love brought up different browsers in my previous post, I thought I'd see what it takes to make my example look exactly like Gmail's status in both IE and Firefox. Here is the updated CSS. It's been tested with Firefox, IE6 and IE7 at 800x600, 1024x768 and 1280x1024. It includes a special margin definition for IE.
<style type="text/css">
div#statusContainer {
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 10px;

div#statusMessageContainer {
 position: absolute;
 background-color: #cc4444;
 color: white;
 width: 60px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: .8em;
 padding: 2px;
 right: 0px;
 margin-right: 15px;
<!--[if IE]>
<style type="text/css" media="all">
div#statusMessageContainer { margin-right: -20px; }
// //]]>