CSS Position Overlapping Image

I am struggling to get this page to display correctly in IE7: http://www.towkars.org/dmv-new.php

The page displays fine in Google Chrome and FireFox, but in IE7 the "Road Sign" image is partially cut off.  I want the full image to display, and to extend down the right side, without causing any text wrapping (from float), just as it does in FireFox / Chrome.  Essentially I just want to statically position the image at a certain pixel coordinate (relative to the other images on the page), and have the image  be on top of anything else.  I also did not have any luck using the z-index, as it does not seem to make any difference.

Thank you in advance!
<div id="KarAd">  
      <img src="../images/KidneyCarsBanner.jpg" alt="Kidney Kars: #1 Choice for Charity Car Conations since 1991!" border="0">  <br />  
      <div style="margin-bottom:-100px;z-index:99">  
        <table style="z-index:100"> 
          <tr> 
            <td valign="top">         
              <a onmouseover="MM_swapImage('donatebutton1','','../images/donatebutton2.gif',1)" onmouseout="MM_swapImgRestore()" href="state.php">      
                <img id="donatebutton1" src="../images/donatebutton1.gif" alt="More info about donation" name="donatebutton1" width="300" height="45" border="0" hspace="36">    </a>       
              <a onmouseover="MM_swapImage('MoreInfo2','','../images/MoreInfo2-Roll.gif',1)" onmouseout="MM_swapImgRestore()" href="faq.php">      
                <img id="MoreInfo2" src="../images/MoreInfo2.gif" alt="More info about donation" name="MoreInfo2" border="0" hspace="36">    </a>  </td>  
            <td valign="top">    
              <a href="http://www.kidney.org/support/kidneycars/sweepstakeDetails.cfm" target="_blank">    
                <img src="images/Sweepstakes25.jpg" style="z-index:101"/></a>   </td>   
          </tr>   
        </table>   
      </div>  
    </div><h1>Utah DMV Forms to Donate Your Car</h1>

Open in new window

ChrisIT ManagerAsked:
Who is Participating?
 
David S.Connect With a Mentor Commented:
For starters, change

<html>        
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    

to

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>

Then change

<div style="margin-bottom:-100px;z-index:99">

to

<div style="margin-bottom:-100px;position:relative;z-index:99">


You'll also want to give the list there position:relative and a z-index higher than 99.

Are you aware that your page contains HTML and CSS errors?
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
0
 
ChrisIT ManagerAuthor Commented:
That did the trick!  Thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.