advanced code snippet search

Posted By

rengber on 01/17/08


Tagged

css ie html layout workaround BugFix


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

stoker
snucko


CSS Hack to Get Around IE6 Margin Issue

 / Published in: CSS
 

A in IE6 will annoyingly put about 3 pixels of space around a contained image. This leaves a gap between that div and any neighboring divs. To workaround you can specify a margin of 5px or so on the side where the gap must be removed, then specify an equivalent negative margin on the neighbor to remove the gap. Tested with IE6 and Firefox 2.0.0.11.

Expand | Embed | Plain Text 
  1. <html>
  2. <head>
  3.   <style type="text/css">
  4.     .badDiv
  5.     {
  6.       background-color: green; 
  7.       margin: 0px 0px 0px 0px; 
  8.       width: 100px; 
  9.       height: 100px; 
  10.       float: left;
  11.       padding: 0px;  
  12.     }
  13.     .goodDiv
  14.     {
  15.       background-color: green; 
  16.       margin: 0px -5px 0px 0px; 
  17.       width: 100px; 
  18.       height: 100px; 
  19.       float: left;
  20.       padding: 0px;  
  21.     }
  22.     .badImg
  23.     {
  24.       border: 0px; 
  25.       margin: 0px 0px 0px 0px; 
  26.       width: 100px; 
  27.       height: 100px; 
  28.       float: left; 
  29.     }
  30.     .goodImg
  31.     {
  32.       border: 0px; 
  33.       margin: 0px 0px 0px 5px; 
  34.       width: 100px; 
  35.       height: 100px; 
  36.       float: left; 
  37.     }
  38.   </style>
  39. </head>
  40. <body>
  41.  
  42. <div>
  43. <div class="badDiv"></div>
  44. <img class="badImg" src="blackbox.gif" />
  45. </div>
  46.  
  47.  
  48. <div style="clear:both">
  49. <br/>
  50. <div class="goodDiv"></div>
  51. <img class="goodImg" src="blackbox.gif" />
  52. </div>
  53.  
  54. </body>
  55. </html>

Report this snippet  

You need to login to post a comment.