Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS Position Overlapping Image

Posted on 2008-10-23
2
Medium Priority
?
758 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

688 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