title: HTML Alignment Issue in one machine only (both IE8)
body: <p>I have the following HTML and CSS code. It works fine in IE8 in one machine; but misaligns in second machine with IE8. What is to be changed in order to correct it? </p>
  
  <p>Note: The misalignment is for the “Logout” text.</p>
  
  <p>Note:  The dimension of the image is 214 X 57</p>
  
  <p>Note: Both systems are in same resolution and 100% zoom. </p>
  
  <p><img src="https://i.stack.imgur.com/POo9o.jpg" alt="enter image description here"></p>
  
  <pre><code>&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"&gt;
  
  &lt;head id="Head1"&gt;
  
  &lt;title&gt;Helpdsk Services Admins Site &lt;/title&gt;
  
  &lt;link href="Styles/MasterStyle.css" rel="stylesheet" type="text/css" /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="wrapper"&gt;
  
      &lt;div id="container"&gt;
  
          &lt;div class="clear"&gt;
  
              &lt;div id="header"&gt;
  
                  &lt;div id="logo"&gt;
  
                      &lt;img alt="logo" src="Images/Logo.png" /&gt;
  
                  &lt;/div&gt;
  
                  &lt;div id="titleInfo"&gt;
  
                      &lt;a&gt;Helpdsk Services Admins Site&lt;/a&gt;
  
                      &lt;div id="signOut"&gt;
  
                          &lt;a id="LoginStatus1"&gt;Logout&lt;/a&gt;
  
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
   &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>MasterStyle.css</p>
  
  <pre><code>body
  
  {
  
     margin: 0px; padding: 0px; text-align: center; background: Orange;
  
  }
  
  
  
  #wrapper
  
  {
  
     width: 100%; height: auto; text-align:left; margin: 0 auto; background: Orange;
  
  }
  
  
  
  #container
  
  {
  
     width: 850px; height: auto; margin: 0 auto; background: white;
  
  }
  
  
  
  #header
  
  {
  
     width: 850px; height: 70px; background: white; padding: 0 0 10px 0;
  
  }
  
  
  
  #titleInfo
  
  {
  
  font:bold 18pt Arial; color:#2377D1; width:590px; height:35px; float:left; margin:10px 0 0 10px; 
  
  border-bottom:3px solid #fcda55; padding: 10px 0 0 0; display:inline;
  
  }
  
  
  
  #signOut
  
  {
  
  font:bold 9pt Arial;float:right;border-bottom:none;padding: 0px 10px 0 0;display:inline;
  
  }
  
  
  
  #logo
  
  {
  
     width:200px; height:60px; float:left; margin:0 0 0 20px; display:inline; padding: 10px 0 0 0;
  
  }
  
  
  
  .clear
  
  {
  
     clear: both;
  
  }
  </code></pre>
  
  <hr>
  
  <p>READING:</p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/684634/align-contents-inside-a-div">Align contents inside a div</a></li>
  </ol>
  
  <hr>