• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2817
  • Last Modified:

image overlapping text IE7 z-index

Please see: http://www.personal-performance-agency.com/

Notice the image in the bottom left corner.  Some text from the body section of the page is hidden behind this image.  How can i fix this?  I have tried using z-index but it didnt work:

z-index:-10 is what i tired...

Please advise.

ellandrd
0
ellandrd
Asked:
ellandrd
  • 3
  • 3
1 Solution
 
TNameCommented:
You shouldn't use negative z-index values, as Firefox would position those elements behind the body of the page (they would become invisible in FF). Instead, you should assign a higher positive z-index value to the element you want to position in front.

Also, "z-index" will only work for elements positioned other than static (the default value), for instance you should specify "position:relative;" for the element you want to assign the z-index to.
0
 
ellandrdAuthor Commented:
My Firefox stylesheet doesn't have the z-index.  Only my IE7 stylesheet has the z-index.

I have tried added the z-index to the body div but does it require the position:relative/absolute to work as I have tried both.
0
 
TNameCommented:
I don't see why you would give the body itself a z-index or why you would position it.
The body does/should contain all other visible elements, so positioning the body itself in the z-axis shouldn't have any effect.
What you should do is to assign a relative (or absolute) position and a higher z-index to the element you want to bring in front of the image. BTW, I cannot test in IE7 at the moment.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
TNameCommented:
For instance you could assign the <p> element that contains the link and the text next to the image style="position:relative; z-index:10;", e.g.:
...
<div id="footer-banner">
      <img src="/media/jumping.jpg" alt="Athlete Jumping" />
      <p style="position:relative; z-index:10;"><a href="/client-enquiry/" title="Interested? Contact us...">Find out more about what makes you so special &gt;&gt;</a><br />Contact us to arrange an introductory consultation.<br />Life will never be the same again...</p>
            </div>
...


And if you do not want to do it inline, assign the p an id instead:

 <p id="bringToFront" ...

and specify in the style sheet for example:

  p#bringToFront  { position:relative; z-index:10; }
0
 
ellandrdAuthor Commented:
>>The body does/should contain all other visible elements, so positioning the body itself in the z-axis shouldn't have any effect.

sorry i have a div element called body.  i didnt mean give the <body> an z-index.

>>BTW, I cannot test in IE7 at the moment.

thats ok.

>>And if you do not want to do it inline, assign the p an id instead:

i will try this out now...
0
 
ellandrdAuthor Commented:
cheers that seems to work better now.

thank you

ellandrd
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now