Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS Position Overlapping Image

Posted on 2008-10-23
2
Medium Priority
?
765 Views
Last Modified: 2012-05-05
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

0
Comment
Question by:Orcadian
2 Comments
 
LVL 43

Accepted Solution

by:
David S. earned 2000 total points
ID: 22794264
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
 

Author Comment

by:Orcadian
ID: 22796356
That did the trick!  Thank you!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

972 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question