z-index of img not working

VaporAction · 01-10-2007, 08:44 AM

I'm making a navigation bar at the top of the page that I want to remain fixed while the use scrolls down the page...I have no problems if I make the bar with HTML and CSS but when I tried to make the bar from an image it doesn't seem to work...specifically, the image doesn't seem to be taking the z-index that I give it so that when you scroll the rest of the page runs over top of it...
????: NamePros.com http://www.namepros.com/programming/279535-z-index-of-img-not-working.html
I'm using Firefox so it has nothing to do with the various IE bugs...
the CSS I'm using runs something like this....

.navImage {
position: fixed;
z-index: 50;}

the only other clue is that the content of the page is an embedded swf file...is there something about the z-index of swf files and images?

-bank- · 01-10-2007, 08:50 AM

From what I understand you are applying this straight to the image correct? If so try using a div tag with the width and height the same as the image, and apply the z-index to the div rather than the image.

beaver6813 · 01-10-2007, 08:56 AM

Agreed with -bank-. Put the image into a div, this should make it work, apple the things to the div and not the image, the image will move along with the div

????: NamePros.com http://www.namepros.com/showthread.php?t=279535

Code:

<style type="text/css">
.navImageDiv {
position: fixed;
z-index: 50;
height:auto;
width:auto;}
</style>
<div class='navImageDiv'>
<img src="nameproslogo.gif" title="Namepros Logo">
</div>

Haven't tested, lemme know if it works

lee101 · 01-10-2007, 09:01 AM

Try applying the z-index attribute to the diz or whatever is containing the image, and set one for the container of the item you want it to overlay which is lower

-bank- · 01-10-2007, 09:07 AM

Originally Posted by lee101

to the diz or whatever is containing the image

to the diz

its a <div> tag, part of xhtml and css.
????: NamePros.com http://www.namepros.com/showthread.php?t=279535

thanks for totally clearing it up beaver6813, my post was slightly wish washy

VaporAction · 01-10-2007, 01:14 PM

I applied the css to a div containing the img but it still doesn't work BUT I have since discovered that you can set the swf's param to "wmode"="transparent" which seems to make it more z-index friendly BUT ONLY if there arent' any images in the nav bar...is anyone familiar with why including an image in a nav bar would weaken it's z-index? I even tried placing a div under the image to sort of bolster it, but that didn't work...

01-10-2007, 08:44 AM	THREAD STARTER #1 (permalink)
VaporAction New Member Join Date: Nov 2006 Posts: 12	z-index of img not working I'm making a navigation bar at the top of the page that I want to remain fixed while the use scrolls down the page...I have no problems if I make the bar with HTML and CSS but when I tried to make the bar from an image it doesn't seem to work...specifically, the image doesn't seem to be taking the z-index that I give it so that when you scroll the rest of the page runs over top of it... ????: NamePros.com http://www.namepros.com/programming/279535-z-index-of-img-not-working.html I'm using Firefox so it has nothing to do with the various IE bugs... the CSS I'm using runs something like this.... .navImage { position: fixed; z-index: 50;} the only other clue is that the content of the page is an embedded swf file...is there something about the z-index of swf files and images?

01-10-2007, 08:56 AM	#3 (permalink)
beaver6813 NamePros Regular Join Date: May 2005 Location: England Posts: 390 Follow @beaver6813	Agreed with -bank-. Put the image into a div, this should make it work, apple the things to the div and not the image, the image will move along with the div ????: NamePros.com http://www.namepros.com/showthread.php?t=279535 Code: <style type="text/css"> .navImageDiv { position: fixed; z-index: 50; height:auto; width:auto;} </style> <div class='navImageDiv'> <img src="nameproslogo.gif" title="Namepros Logo"> </div> Haven't tested, lemme know if it works __________________ -Beaver6813.com - Web Developer Extraordinaire!

01-10-2007, 09:01 AM	#4 (permalink)
lee101 NamePros Regular Join Date: Mar 2006 Location: United Kingdom Posts: 413 Follow @leefindlow	Try applying the z-index attribute to the diz or whatever is containing the image, and set one for the container of the item you want it to overlay which is lower __________________ Linux Screenshots

01-10-2007, 08:50 AM	#2 (permalink)
-bank- NamePros Regular Join Date: Sep 2006 Posts: 223	From what I understand you are applying this straight to the image correct? If so try using a div tag with the width and height the same as the image, and apply the z-index to the div rather than the image.

01-10-2007, 01:14 PM	THREAD STARTER #6 (permalink)
VaporAction New Member Join Date: Nov 2006 Posts: 12	I applied the css to a div containing the img but it still doesn't work BUT I have since discovered that you can set the swf's param to "wmode"="transparent" which seems to make it more z-index friendly BUT ONLY if there arent' any images in the nav bar...is anyone familiar with why including an image in a nav bar would weaken it's z-index? I even tried placing a div under the image to sort of bolster it, but that didn't work...

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)