firefox misplaces z-indexed div with image

[genia]

css:

#navimg{
display: inherit;
position:relative;
z-index:3;
width:271px;
height:264px;
margin-top: -40px;

}

#nav{
width:285px;
float:right;
border-right:10px white solid;
border-top:10px white solid;
border-bottom:10px white solid;
border-left:none;
z-index:1;
background-color:#b3cdf2;
}


html:

<div>
<div id="nav"><div id="logo">
<img src="images/taflataf_logo.jpg" alt="logo" /></div>
<hr />
<ul><li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div>
<div id="navimg"><img src="images/lego.gif" alt="" /></div>
</div>
<div class="clear"></div>

</div>
for some unknown reason ff 2.0.15 (the only Firefox i tested on)
misplaces the div navimg.
ie 6&7 placing everything as it should be.
can someone help me please?

[Nile]

You may wanna change:


#navimg{
display: inherit;
position:relative;
z-index:3;
width:271px;
height:264px;
margin-top: -40px;

}

To:


#nav img{
display: inherit;
position:relative;
z-index:3;
width:271px;
height:264px;
margin-top: -40px;

}

See if that helps. ;) If that doesn't work, make it a class. :)

[genia]

thanks for the quick replay.
i cant make it #nav img since it has more than one image.
tried making it class and still the same thing-it place it at the top left corner.

[Nile]

From my knowledge saying:


#navimg

Is a div with the id navimg. Try my solution with more then one image. I think that it will work.

[boogyman]

From my knowledge saying:


#navimg

Is a div with the id navimg. Try my solution with more then one image. I think that it will work.

you could also do



#navimg img {yada}

since there is an image tag within that div

[genia]

i tried to change it to .navimg and the atrrib to class="navimg"
and still it doesnt work.
#navimg or #nav img wont change the fact that it still misplaces it.

uploaded it:
http://shenkar.co.il/Genia/taf/

and thank you all again for the replayes

[rangana]

Since your positioningi it relatively to the container that holds your div...then floating your element to the right will aide :)

Add the highlighted:


#navimg{
display: inherit;
position:relative;
float:right;
z-index:3;
width:271px;
height:264px;
margin-top: -40px;
}

[genia]

rangana,you rock!! it works,thanks for the explanation
finally my first cross browser(i hope) css.

thanks you all again.