Problem DIV display in IE vs Firefox help

[Relics]

I'm still teaching myself CSS, so if this is a simple problem, I apologize. I'm working on a website for a friend and I'm trying to put some DIV elements together. When the page loads in Firefox, it's correct, but in IE, it does not display correct. I've got an image of a trophy in a DIV, but the background of the DIV below the image appear over the trophy image in IE. I've attached the code and some screen shots below. If you can tell me where I've messed up or what code I'm missing, I would greatly appreciate it.

Thanks

IE Display (Wrong)
http://www.flickr.com/photos/34110887@N07/3175905771/
http://www.flickr.com/photos/34110887@N07/3175905771/

Firefox Display (Correct)
http://www.flickr.com/photos/34110887@N07/3175905759/
http://www.flickr.com/photos/34110887@N07/3175905759/

PHP

<div id="upcoming_league_events_note">
<div id="upcoming_league_events_header">
<img src="/images/headers/leagueeventssm.png" />
</div>
<div id="upcoming_league_events_txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div id="sidebar_icon_leagues">
<img src="/images/stock/trophy.png" />
</div>
</div>


CSS

#sidebar_icon_leagues
float: right;
margin-right: -20px;
margin-top: -90px;
margin-bottom: 20px;

#upcoming_league_events_note
height: 100px;
display: block;

#upcoming_league_events_header

#upcoming_league_events_txt
float: left;
margin-top: 5px;
margin-right: 60px;

[Snookerman]

Try adding this to your css:

#sidebar_icon_leagues{
float: right;
margin-right: -20px;
margin-top: -90px;
margin-bottom: 20px;
z-index: 100;
}

[Relics]

That didn't work...

I tried adding z-index: 100 or 1 to the #sidebar_icon_leagues and z-index: -1 to the #sidebox_bottom (which is the background image)


#sidebox_bottom {
background-image: url(/images/sideboxbtm.png);
height: 23px;

Thanks for the help though.

[Snookerman]

You should also make sure that the elements you are giving a z-index to are positioned, if they aren't, add position:relative; and it should work. Here is a great tutorial that explains how the z-index works:
http://css-tricks.com/video-screencasts/40-how-z-index-works/ (http://css-tricks.com/video-screencasts/40-how-z-index-works/)

If you still can't figure it out, post a link to your site or attach your code so we can take a look.

Good luck!

[Relics]

Thanks man,

That fixed it.

I had to add the position:relative; to both of the tags and then set bottom to 0 and the icon to 1. When I set the sidebox_bottom to -1, it went behind the body background image. For anyone else with this problem, or just learning like me, here is the changes I made.



#sidebox_bottom {
background-image: url(/images/sideboxbtm.png);
height: 23px;
position:relative;
z-index: 0;
}

#sidebar_icon_leagues {
float: right;
margin-right: -20px;
margin-top: -90px;
margin-bottom: 20px;
z-index: 100;
position:relative;
}


Thanks again for your help Snookerman.

[Snookerman]

You're welcome, I'm glad to help! You can go to your first post in this thread, click http://www.dynamicdrive.com/forums/images/buttons/edit.gif then click Go Advanced and add the Resolved prefix to the thread title. This will let other users know the problem has been solved.

Good luck with your site!