z-index stacking issue with IE7 works in IE8 & FF
Posted: 16 February 2010 04:38 PM   [ Ignore ]
Newbie
Rank
Total Posts:  1
Joined  2010-02-11

CSS newbie and need help. Working with 3 background-images which includes breadcrumbs and trying stack them in a liquid format but logo will not display above (on top) in IE7...Any thoughts?

Code:
<div id="header"></div>
<div id="logo"></div>
<div id="breadloaf"><a class="dfc" href="#"></a></div>
<div id="crumb1"><a class="dfc" href="#"></a></div>
<div id="crumb2"><a class="coexec" href="#"></a></div>
<div id="crumb3"><a class="wchome" href="#"></a></div>

2 separate CSS for multiple dept. purposes:

Main CSS:
#header {
position:relative;
width: 85%;
float:right;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
height:100px;
background-repeat: no-repeat;
z-index:1;}

#logo {
position:relative;
background-color: no-repeat;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
height:100px;
z-index:500;}

#breadloaf a {
position:relative;
float:right;
width:175px;
height:80px;
margin-right:10px;
margin-top:-90px;
background-repeat: no-repeat;
z-index:9999;}

#crumb1 a, #crumb2 a, #crumb3 a{
position:relative;
float:right;
width:16px;
height:80px;
margin-top:-90px;
padding:0 0 0 0;
background-repeat: no-repeat;
z-index:9999;}

#crumb1 a{
margin-right:184px;}

#crumb2 a{
margin-right:200px;}

#crumb3 a{
margin-right:216px;}

DFC CSS:
#header {
background-image: url(images/DFC_Banner.png);}

#logo{
background-image: url(images/DFC_Logo.png);}

#breadloaf a.coexec{
background-image: url(images/coexec_photo_tab.png);}

#breadloaf a.dfc{
background-image: url(images/dfc_photo_tab.png);}

#breadloaf a.wchome{
background-image: url(images/wc_photo_tab.png);}

#crumb1 a.dfc, #crumb2 a.dfc, #crumb3 a.dfc{
background-image: url(images/DFC_bc_tab.png);}

#crumb1 a.coexec, #crumb2 a.coexec, #crumb3 a.coexec{
background-image: url(images/CoExec_bc_tab.png);}

#crumb1 a.wchome, #crumb2 a.wchome, #crumb3 a.wchome{
background-image: url(images/WC_bc_tab.png);}

Image Attachments
ie7.png
Profile
 
 
Posted: 30 April 2010 09:56 AM   [ Ignore ]   [ # 1 ]
Sr. Member
RankRankRankRank
Total Posts:  133
Joined  2010-04-23

It seems like your text alignment (text-align) is off, you don’t set it anywhere. I’m assuming that DFC_Banner.png is larger than DFC_Logo.png and whats why the image are not stacking on top of each other.
____________________
sudoku - social - puppies

Profile
 
 
Posted: 30 April 2010 11:25 AM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  1
Joined  2010-04-28

check out the following page,

http://www.traileraddict.com/trailerdev.php?fkey=our-family-wedding&tkey=trailer

In it you’ll see flash player that I’m resizing. When you click the “lights out” option underneath th video player (to the right underneath it), IE8 and FF and Chrome all do great. The video expands, a black covers the browser window and some extra parts of the site, and you can still see the video player. (you can push the light bulb in upper right corner to go back to normal viewing)

But, when I turn on compatibility mode for ie7, the thing starts freaking out. When I click “lights out”, the black covers everything (it is appended to the document.body through javascript) and the flash disappears entirely.

I know ie7 has a z-index bug, and it’s obviously not listening to the z-index of 5000 that the div has that’s holding the player. How can I get ie7 to respond like the other browsers?

Homelite 330 Chainsaw

Profile
 
 
Posted: 24 December 2010 10:20 PM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  6
Joined  2010-12-22

Why do anyone want to put a banner with a .png format,it should be jpg format.

car dvd player | headrest dvd player

Profile
 
 
Posted: 01 February 2011 11:54 PM   [ Ignore ]   [ # 4 ]
Newbie
Rank
Total Posts:  4
Joined  2011-02-01

when I turn on compatibility mode for ie7, the thing starts freaking out.
______________________________________
|||||Buy Computers Speakers|||||

Profile
 
 
Posted: 20 February 2011 02:47 PM   [ Ignore ]   [ # 5 ]
Newbie
Rank
Total Posts:  23
Joined  2011-01-06

The container has a z-index of 200; I’ve tried removing the z-index of the buttons completely and get the same result.

Profile
 
 
Posted: 08 March 2011 02:31 AM   [ Ignore ]   [ # 6 ]
Sr. Member
RankRankRankRank
Total Posts:  133
Joined  2010-04-23

I guess I don’t understand. Are you trying to place the breadcrumb on top of the image?
_____________________________
Sudoku - Flash Game - Flash Game
Flash Game - xnxx - Flash Game

Profile
 
 
Posted: 07 April 2011 10:38 PM   [ Ignore ]   [ # 7 ]
Newbie
Rank
Total Posts:  2
Joined  2011-04-04

Thanks for sharing your idea here. I appreciate your idea, very excellent.
-----------------------
Watch TV Online

Profile