How to fix Internet Explorer and Firefox form encoding issues when posting data to a server having a different encoding

HTML posted about 1 month ago by christian

This snippet explains how to fix Internet Explorer and Firefox form encoding issues when posting data to a server having a different encoding than the source system.

This happens, for example, when you host a form on a server using ISO-8859-1 that posts data to a server using UTF-8.

The fix for Firefox (and Opera and other sensible browsers) is to use the accept-charset attribute:

   1  <form ...  accept-charset="utf-8">

The fix for Internet Explorer is to use a hack:

   1  <form ...  accept-charset="utf-8">
   2    <input type="hidden" name="enc" value="&#153;">
   3  </form>

The hidden input field will make Internet Explorer understand that you want it to support UTF-8.

Tagged utf-8, iso-8859-1, internet explorer, firefox, encoding, form

Google Maps Version 3 Example with Markers and InfoWindow

HTML posted 6 months ago by christian 

   1  <style media="screen" type="text/css">
   2    #map { width:960px; height:330px; }
   3  </style>
   4  
   5  
   6  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
   7  
   8  <div id="map"></div>
   9  
  10  <script type="text/javascript">
  11    var map;
  12    var marker;
  13    var initialized = false;
  14  
  15    var infowindow = new google.maps.InfoWindow({
  16      content: '',
  17      //disableAutoPan: true // Not compatible with InfoWindows. They are cropped...
  18    });
  19  
  20    // Triggered when map is loaded or moved
  21    var boundsChangedListener = function() {
  22      if(initialized == true) { return };
  23  
  24      initialized = true;
  25  
  26      addMarkers();
  27    };
  28  
  29    function addMarkers() {
  30      var bounds = map.get_bounds();
  31      var southWest = bounds.getSouthWest();
  32      var northEast = bounds.getNorthEast();
  33  
  34      var lngSpan = northEast.lng() - southWest.lng();
  35      var latSpan = northEast.lat() - southWest.lat();
  36  
  37      var icon = '/images/icons/xxx-club-16.gif';
  38  
  39      for (var i = 0; i < 10; i++) {
  40        var point = new google.maps.LatLng(
  41          southWest.lat() + latSpan * Math.random(),
  42          southWest.lng() + lngSpan * Math.random()
  43        );
  44  
  45        var marker = new google.maps.Marker({
  46          position: point, 
  47          map:      map, 
  48          icon:     icon, 
  49          title:    "Marker"
  50        });   
  51  
  52        addMarker(marker);
  53      }
  54    }
  55  
  56    function addMarker(marker) {
  57      google.maps.event.addListener(marker, 'mouseover', function() {
  58        marker.html = 'Marker xxx';
  59        infowindow.open(map, marker);
  60      });
  61  
  62      google.maps.event.addListener(marker, 'mouseout', function() {
  63        infowindow.close();
  64      });
  65    }
  66  </script>
  67  
  68

Tagged google-maps, maps, google

How to stretch content to fill browser's height

HTML posted about 1 year ago by christian

Note that load_translations and store_translations have been removed.

   1  <html>
   2  <body>
   3  <style type="text/css">
   4  html, body {
   5    overflow: hidden; 
   6    height: 100%; 
   7    max-height: 100%; 
   8    margin: 0;
   9    padding: 0;
  10  }
  11  
  12  #container {
  13    display: block;
  14    overflow: hidden;
  15    background-color: green;
  16    height: 100%; /** IE 6 */
  17    min-height: 100%;
  18  }
  19  
  20  #navigation { overflow: auto; float: left; width: 260px; background: white; height: 100%; }
  21  
  22  #content { overflow: auto; background: blue; margin-left: 260px; height: 100%; border-bottom: 2px solid white;}
  23  
  24  </style>
  25    <div id="container">
  26      <div id="navigation">
  27  		<p>Content</p>
  28  		<p>Content</p>
  29  		<p>Content</p>
  30  		<p>Content</p>
  31  		<p>Content</p>
  32  		<p>Content</p>
  33  		<p>Content</p>
  34  		<p>Content</p>
  35  		<p>Content</p>
  36  		<p>Content</p>
  37  		<p>Content</p>
  38  		<p>Content</p>
  39  		<p>Content</p>
  40  		<p>Content</p>
  41  		<p>Content</p>
  42  		<p>Content</p>
  43  		<p>Content</p>
  44  		<p>Content</p>
  45  		<p>Content</p>
  46  		<p>Content</p>
  47  		<p>Content</p>
  48  		<p>Content</p>
  49  		<p>Content</p>
  50  		<p>Content</p>
  51  		<p>Content</p>
  52  		<p>Content</p>
  53  		<p>Content</p>
  54  		<p>Content</p>
  55  		<p>Content</p>
  56  		<p>Content</p>
  57  		<p>Content</p>
  58  		<p>Content</p>
  59  		<p>Content</p>
  60  		<p>Content</p>
  61  		<p>Content</p>
  62  		<p>Content</p>
  63  		<p>Content</p>
  64  		<p>Content</p>
  65  		<p>Content</p>
  66  		<p>Content</p>
  67  		<p>Content</p>
  68  		<p>Content</p>
  69  		<p>Content</p>
  70  		<p>Content</p>
  71  		<p>Content</p>
  72  		<p>Content</p>
  73  		<p>Content</p>
  74  		<p>Content</p>
  75  		<p>Content</p>
  76  		<p>Content</p>
  77  		<p>Content</p>
  78  		<p>Content</p>
  79  		<p>Content</p>
  80  		<p>Content</p>
  81  		<p>Content</p>
  82  		<p>Content</p>
  83  		<p>Content</p>
  84  		<p>Content</p>
  85  		<p>Content</p>
  86  		<p>Content</p>
  87  		<p>Content</p>
  88  		<p>Content</p>
  89  		<p>Content</p>
  90  	</div>
  91      <div id="content">
  92  		<p>Content</p>
  93  		<p>Content</p>
  94  		<p>Content</p>
  95  		<p>Content</p>
  96  		<p>Content</p>
  97  		<p>Content</p>
  98  		<p>Content</p>
  99  		<p>Content</p>
 100  		<p>Content</p>
 101  		<p>Content</p>
 102  		<p>Content</p>
 103  		<p>Content</p>
 104  		<p>Content</p>
 105  		<p>Content</p>
 106  		<p>Content</p>
 107  		<p>Content</p>
 108  		<p>Content</p>
 109  		<p>Content</p>
 110  		<p>Content</p>
 111  		<p>Content</p>
 112  		<p>Content</p>
 113  		<p>Content</p>
 114  		<p>Content</p>
 115  		<p>Content</p>
 116  		<p>Content</p>
 117  		<p>Content</p>
 118  		<p>Content</p>
 119  		<p>Content</p>
 120  		<p>Content</p>
 121  		<p>Content</p>
 122  		<p>Content</p>
 123  		<p>Content</p>
 124  		<p>Content</p>
 125  		<p>Content</p>
 126  		<p>Content</p>
 127  		<p>Content</p>
 128  		<p>Content</p>
 129  		<p>Content</p>
 130  		<p>Content</p>
 131  		<p>Content</p>
 132  		<p>Content</p>
 133  		<p>Content</p>
 134  		<p>Content</p>
 135  		<p>Content</p>
 136  		<p>Content</p>
 137  		<p>Content</p>
 138  		<p>Content</p>
 139  		<p>Content</p>
 140  		<p>Content</p>
 141  		<p>Content</p>
 142  		<p>Content</p>
 143  		<p>Content</p>
 144  		<p>Content</p>
 145  		<p>Content</p>
 146  		<p>Content</p>
 147  		<p>Content</p>
 148  		<p>Content</p>
 149  		<p>Content</p>
 150  		<p>Content</p>
 151  		<p>Content</p>
 152  		<p>Content</p>
 153  		<p>Content</p>
 154  		<p>Content</p>
 155  
 156  	</div>
 157    </div>
 158  </body>
 159  </html>
 160

Tagged fill, stretch, fullscreen, height, css

How to get min-width and max-width working in IE 6

HTML posted about 1 year ago by christian

Far from optimal, but should work in most cases:

   1  <!--[if IE 6]>
   2  <link rel="stylesheet" type="text/css" href="ie6-is-a-shitty-browser.css" />
   3  <![endif]-->


   1  #wrapper { 
   2     width:expression(document.body.clientWidth < 950 ? "950px" : "100%" ); 
   3  }

Note that users might get security warnings.

Tagged ie6, hack, min-width, max-width

How to make rounded buttons with the button element

HTML posted about 1 year ago by christian

25 pixel high buttons at your service:

   1  button { 
   2  	border: 0; 
   3  	padding: 0;
   4  	font-variant: small-caps;
   5  	height:25px;
   6  	background: transparent url('../images/button-background-left.png') no-repeat;
   7  	cursor: pointer;
   8  	text-align: center; 
   9  }
  10  
  11  button span { 
  12  	font-family: georgia,serif;
  13  	line-height: 25px;
  14  	background: transparent url('../images/button-background.png') no-repeat top right;
  15  	position:relative; 
  16  	display:block; 
  17  	white-space:nowrap; 
  18  	margin-top: -2px;
  19  	padding:0 15px; 
  20  }

HTML :

   1  <button type="submit" value="Hello"><span>Hello&nbsp;&raquo;</span></button>

IE 6 & 7 might need:

   1  button { 
   2    width:auto; 
   3    overflow:visible; 
   4  }
   5  button span { 
   6    margin-top:1px; 
   7  }

References

  • http://www.filamentgroup.com/lab/styling_the_button_element_with_sliding_doors/
  • http://particletree.com/features/rediscovering-the-button-element/
Tagged button, element, css, html, rounded