Solved

CSS Position Overlapping Image

Posted on 2008-10-23
2
747 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 42

Accepted Solution

by:
David S. earned 500 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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS issue in Nested Master Pages 9 13
add image on html mail 6 19
Little bit of help styling my heading 3 21
Button and js nou working 3 8
This article discusses how to create an extensible mechanism for linked drop downs.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

803 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