3 replies [Last post]
greenstork
Offline
Regular
Last seen: 16 years 51 weeks ago
Joined: 2003-07-16
Posts: 16
Points: 0

The problem that I am having exists on a staff page that contains images of staff members next to their name and titles. My intention was to have the pictures in front of the overlapping text and borders. It seems to work on Mac Mozilla, Safari, and Camino. However, the pictures fall behind the text/borders on IE5 (mac) and IE6 (pc). I know the problem must lie with the z-index but I just can't figure out the solution. Any help is appreciated. Here is the link to the staff page for the source code:

http://www.esw.org/about/staff.html

And here is the corresponding CSS code:

#supportingText h4 {position:relative;}

#supportingText h4 {margin: 1em 15px 0.25em 80px; padding: 3px 0 2px 5px;
  border-left: 70px solid #999; border-right: 4px solid #999; clear: left; font-size: 11pt; font-weight: 600; background: #666; 
  line-height: 1.1em;}

a.pic {float: left; width: 115px; margin: -21px 10px 10px 20px;}
a.pic:link, a.pic:visited, a.pic:hover {border:none;}
h4 a:link {color: #fff; border:none;}
h4 a:hover {color:#f00;}

greenstork
Offline
Regular
Last seen: 16 years 51 weeks ago
Joined: 2003-07-16
Posts: 16
Points: 0

Can't move images to foreground - IE 5,6

Awwww, someone must know how to fix this, anyone, please?

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 13 years 4 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

Can't move images to foreground - IE 5,6

Hmm, IE6 just doesn't want to play nicely it seems! I've had a play around with the code, but haven't had any luck.

If it's any consolation, the result doesn't actually look all that bad in IE6 :roll:

jacky
Offline
newbie
Last seen: 16 years 47 weeks ago
Joined: 2003-08-14
Posts: 8
Points: 0

Can't move images to foreground - IE 5,6

The h4 is overlapping the image in MozillaFirebird too.

The possible solution is to put the <a><img /></a> thing before <h4>.
But you will have to setup another container to include the floated <a>.

e.g.

<div class="staff">
   <a ... ><img... /></a>             
   <h4>........</h4>  
   <p>......</p>
</div>

Of course you will have to re-position your box.