title: DIV Displays Wider in IE8 works in FireFox, Safari, IE8 compat. Mode
body: <p>I recently have attempted to add a line of "Social Media Icons" inside of a website. After creating a DIV and applying the properties everything looks fine in FireFox, Safari, and Internet Explorer 8 Compatability mode.</p>
  
  <p>However, viewing the page in IE8 makes the DIV look like one pixel wider on the right-hand side. Also increasing the magnification in IE8 to 105% corrects the problem, yet this is hardly a satisfactory fix by my estimation.</p>
  
  <p><strong>Website URL:</strong> <a href="http://MikeChurch.com" rel="nofollow noreferrer">http://MikeChurch.com</a></p>
  
  <p><strong>Cascading Style Sheet (CSS)</strong></p>
  
  <pre><code>    #wrapper{
  </code></pre>
  
  <p>width:960px;
   margin:auto;
  }</p>
  
  <pre><code>    #banner{
  </code></pre>
  
  <p>width:100%;
   float:left;
  }</p>
  
  <pre><code>    #socialMedia{
        background:#000000 no-repeat right top;
        border-bottom:5px solid white;
        border-left:5px solid white;
        border-right:5px solid white;
        overflow:hidden;
        float:left;
        width:99%;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>   #wrap-container{
  </code></pre>
  
  <p>width:100%;
   float:left;
   background:#fff;
  }</p>
  
  <pre><code>   #innerpad{
  </code></pre>
  
  <p>width:950px;
   float:left;
   padding:0px 5px 5px 5px;</p>
  
  <p><strong>HTML</strong>
  <code>
      
  
  <pre><code>// no direct access
  defined( '_JEXEC' ) or die( 'Restricted access' );
  include_once (dirname(__FILE__).DS.'/tmp_vars.php');
  ?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="&lt;?php echo $this-&gt;language; ?&gt;"
  lang="&lt;?php echo $this-&gt;language; ?&gt;"&gt;
  &lt;head&gt;
  &lt;jdoc:include type="head" /&gt;
  &lt;?php JHTML::_('behavior.mootools'); ?&gt;
  &lt;link rel="stylesheet" href="&lt;?php echo $tmpTools-&gt;baseurl(); ?
  &gt;templates/system/css/system.css" type="text/css" /&gt;
  &lt;link rel="stylesheet" href="&lt;?php echo $tmpTools-&gt;baseurl(); ?  
  &gt;templates/system/css/general.css" type="text/css" /&gt;
  &lt;link rel="stylesheet" href="&lt;?php echo $tmpTools-&gt;templateurl(); ?&gt;/css/layout.css"   
  type="text/css" /&gt;
  &lt;link rel="stylesheet" href="&lt;?php echo $tmpTools-&gt;templateurl(); ?&gt;/css/modules.css"
  type="text/css" /&gt;
  &lt;link rel="stylesheet" href="&lt;?php echo $tmpTools-&gt;templateurl(); ?&gt;/css/template.css" 
  type="text/css" /&gt;
  &lt;link rel="stylesheet" href="&lt;?php echo $tmpTools-&gt;templateurl(); ?&gt;/css/joomla.css" 
  type="text/css" /&gt;
  
  &lt;script type="text/javascript" src="&lt;?php echo $tmpTools-&gt;templateurl(); ?
  &gt;/js/jb.script.js"&gt;&lt;/script&gt;
  
  &lt;!--[if lte IE 6]&gt;
  &lt;script type="text/javascript"&gt;
  var siteurl = '&lt;?php echo $tmpTools-&gt;baseurl();?&gt;';
  
  window.addEvent ('load', makeTransBG);
  function makeTransBG() {
  </code></pre>
  
  <p>fixIEPNG($$('img'));
   fixIEPNG ($$('#banner-top'), '', 'scale', 0, 2);
   fixIEPNG ($$('#banner'), '', 'scale', 0, 2);
   fixIEPNG ($$('#banner-bottom'), '', 'scale', 0, 2);</p>
  
  <pre><code> }
   &lt;/script&gt;
  
   &lt;style type="text/css"&gt;
   .clearfix {height: 1%;}
   img {
  </code></pre>
  
  <p>border: none;
       }
       
       templateurl(); ?   </p>
  
  <blockquote>
    <p>/css/template_ie6.css" type="text/css" />        </p>
  </blockquote>
  
  <pre><code> &lt;![endif]--&gt;
  
   &lt;!--[if gte IE 7.0]&gt;
   &lt;style type="text/css"&gt;
   .clearfix {display: inline-block;}
   &lt;/style&gt;
   &lt;link rel="stylesheet" href="&lt;?php echo $tmpTools-&gt;templateurl(); ?
   &gt;/css/template_ie7.css" type="text/css" /&gt;        
  
   &lt;![endif]--&gt;
   &lt;!--[if gte IE 8.0]&gt;
   &lt;style type="text/css"&gt;
   .clearfix {display: inline;}
   &lt;/style&gt;
   &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /&gt;
   &lt;link rel="stylesheet" href="&lt;?php echo $tmpTools-&gt;templateurl(); ?
   &gt;/css/template_ie8.css" type="text/css" /&gt;        
  
   &lt;![endif]--&gt;
   &lt;/head&gt;
   &lt;body id="bg"&gt;
   &lt;div id="wrapper"&gt;
  </code></pre>
  
  <p>
          
       
       
       
       </p>
  
  <pre><code> &lt;a target="_blank" href="http://twitter.com/thekingdude"&gt;&lt;img src="http://mikechurch.com/templates/mike_church/images/social_media_icons/twitter.jpg" title="Follow Mike on Twitter" alt="Follow Mike on Twitter" align="right" style="border:0"&gt;&lt;/a&gt;
  
   &lt;a target="_blank" href="http://www.facebook.com/#!/TheKingDude?ref=ts"&gt;&lt;img src="http://mikechurch.com/templates/mike_church/images/social_media_icons/facebook.jpg" title="Find Mike on Facebook" alt="Find Mike on Facebook" align="right" style="border:0"&gt;&lt;/a&gt;
  
   &lt;a target="_blank" href="http://feeds.feedburner.com/MikechurchcomRssFeed"&gt;&lt;img src="http://mikechurch.com/templates/mike_church/images/social_media_icons/rss.jpg" title="MikeChurch.com RSS Feed" alt="MikeChurch.com RSS Feed" align="right" style="border:0"&gt;&lt;/a&gt;
  
   &lt;div style="float:right;vertical-align:middle;"&gt;
  &lt;a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?       
   uri=MikechurchcomRssFeed&amp;amp;loc=en_US"&gt;&lt;span style="color:white; vertical-
   align:super"&gt;Keep up with the King Dude via eMaill RSS&lt;/span&gt;&lt;img src="http://mikechurch.com/templates/mike_church/images/social_media_icons/rss_email.jpg" 
   title="Subscribe to MikeChurch.com RSS Feed by Email" alt="Keep up with the King Dude 
   via RSS email" style="border:0"&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
   &lt;div id="innerpad"&gt;
       &lt;div id="wrap-topnav"&gt;
           &lt;div id="topnav"&gt;
               &lt;jdoc:include type="modules" name="topnav" /&gt;
              &lt;/div&gt;
              &lt;?php if( $this-&gt;countModules('search') ){?&gt;
              &lt;div id="search-mod"&gt;
               &lt;div class="padding"&gt;
                &lt;jdoc:include type="modules" name="search" /&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p></code></p>
  
  <p>*Note: I have tried placing the DOCTYPE as the very first item in the HTML file, but it had no effect.</p>