title: How to position an image on top of a table, -10px from left edge of table?
body: <p>I'd like a way to position a picture where it will show up the same in any browser, on any screen size. I need the picture to be positioned on top of the gray table, but offset slightly to the left. If I offset the picture from the left a certain number of pixels it shows up correctly in one browser and not the other. See code below. Thanks!</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  &lt;!-- table, td, th {
      padding: 5px;
  }
  div.table-foreground {
      position:relative;
  }
  div.table-foreground img {
      position:absolute;
      top:50%;
  }
  .table1 {
      background-color:white;
      background-repeat:no-repeat;
      color:black;
      text-align: center;
      margin: auto;
      font-family:sans-serif;
      table-layout:fixed;
      width: 960px;
  }
  .table2 {
      background-color:#daf3fb;
      color:black;
      text-align: left;
      margin:auto;
      font-family:sans-serif;
      table-layout:fixed;
      width: 475px;
  }
  .table3 {
      background-color:#e8ebed;
      color:black;
      text-align: left;
      margin:auto;
      font-family:Helvetica, sans-serif;
      border: solid 2px white;
      outline: solid 1px gray;
      table-layout:fixed;
      width: 375px;
      height:300px;
  }
  --&gt;
  &lt;/style&gt;
  &lt;body&gt;
  &lt;div class="table-foreground"&gt;
      &lt;!--img set to relative.--&gt;
      &lt;img id="img1"
  src="http://msadesign.net/sitebuilder/images/Gold_Horizontal_Rectangle3-600x185.jpg"
      style="left:520px;top:100px;" /&gt;
  &lt;/div&gt;
  &lt;table class="table1"&gt;
      &lt;tr&gt;
          &lt;td&gt;Text 2&lt;/td&gt;
          &lt;td&gt;Text 3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;table class="table2"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Text 4&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Text 5&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Text 6&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Text 7&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;table class="table3"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Text 8&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Text 9&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>