|
CSS - Z-index Problem Between Ie6 And Ie7
Heya people, i got this z-index problem thats driving me nuts! Am hopeing someone can help
I first got this working in IE7, then the client came back say wtf beacuse hes running IE6 ... I have a basic html page that has a drop down Nav (positioned absolutly, which drops down over the content area...) i have used the; <!--[if IE]> <link rel="stylesheet" type="text/css" href="css/IE7.css" /> <![endif]--> Fix to fix the problems between IE7 and Firefox... The z-index of the drop down is 20... and the z-index of the content is 10 (for firefox...) For the IE7 Style sheet linked, the dropdown z-index is 20 and the content z-index is -1 ... (this seems to be the only way IE7 will register the conent area to actualy be under the dropdown nav, but this will cause the content area to not show in firefox, hence the ifIE statement.) It seems though that IE6 is reacting to the (i know illegal character) z-index:-1; and not displaying the content. Is there a way i can filter a css sheet so it is only read by IE6, still having IE7 reading the IE7.css ? I know this is probably a terrible way of doing it also... any suggestions on a better way please shoot! Thanks heaps for taking the time to read my "way to long post" Cheers ubila Similar TutorialsHi, I'm currently having this problem. What i want is i want the box 3 to overlay on top of box 1 and box 2. The real challenge is i cannot touch the css nor add for box 1 and box 2. Also, I can not modify any html code outside of the box 3 block. In other words, i can only add mark up within the box 3 div tag. I've exhausted my options in solving this but can not find a solution. Can anyone share some light? Thank in advanced Here is the code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<style type="text/css">
/** Preset Start **/
#box1{width:200px;height:200px;background-color:#0f0;position:relative;z-index:1}
#box2{width:200px;height:200px;background-color:#f0f;position:relative;z-index:2}
/** Preset End **/
#box3{width:100px;height:200px;background-color:#000;position:absolute;z-index:10;top:30px;}
</style>
<div id="box1">
<div id="box3"></div>
</div>
<div id="box2"></div>
</body>
</html>
I'm desperate for help. In the below code the select lists cover the menu items when the user hovers over the menu. The text fields seem to be fine.Why is this happening. Please help. Tracy Code: <STYLE>
#mainContainer{
width:700px;
margin:0 auto;
text-align:left;
background-color: #FFFFFF;
padding-left:0px;
padding-right:0px;
padding-bottom:15px;
}
#dhtmlgoodies_menu img{
border:0px;
}
/* End general styles for this example page */
/* General configuration CSS */
#dhtmlgoodies_menu ul li ul{
display:none; /* Needed to display ok in Opera */
}
#dhtmlgoodies_menu{
visibility:hidden;
}
#dhtmlgoodies_menu ul{
margin:0px; /* No indent */
padding:0px; /* No indent */
}
#dhtmlgoodies_menu li{
list-style-type:none; /* No bullets */
}
#dhtmlgoodies_menu a{
z-index:100;
margin:0px;
padding:0px;
}
/* End general configuration CSS */
/* Cosmetic */
/***********************************************************************
CSS - MENU BLOCKS
General rules for all menu blocks (group of sub items)
***********************************************************************/
#dhtmlgoodies_menu ul{
border:1px solid #000;
background-color:#FFF;
padding:1px;
}
#dhtmlgoodies_menu ul.menuBlock1{ /* Menu bar - main menu items */
border:0px;
padding:1px;
border:0px solid #606060;
background-color:#FFFFFF;
overflow:visible;
}
#dhtmlgoodies_menu ul.menuBlock2{ /* Menu bar - main menu items */
border:0px;
padding:1px;
border:1px solid #555;
}
/***********************************************************************
CSS - MENU ITEMS
Here, you could assign rules to the menu items at different depths.
***********************************************************************/
/* General rules for all menu items */
#dhtmlgoodies_menu a{
color: #000;
text-decoration:none;
padding-left:2px;
padding-right:2px;
z-index:100;
}
/*
Main menu items
*/
#dhtmlgoodies_menu .currentDepth1{
padding-left:5px;
padding-right:5px;
border:0px solid #FFFFFF;
}
#dhtmlgoodies_menu .currentDepth1over{
padding-left:5px;
padding-right:5px;
background-color:#FFFFFF;
border:0px solid #000;
}
#dhtmlgoodies_menu .currentDepth1 a{
font-weight:bold;
}
#dhtmlgoodies_menu .currentDepth1over a{ /* Text rules */
color:BLACK;
font-weight:bold;
}
/* Sub menu depth 1 */
#dhtmlgoodies_menu .currentDepth2{
padding-right:2px;
border:1px solid #FFF;
}
#dhtmlgoodies_menu .currentDepth2over{
padding-right:2px;
background-color:#E2EBED;
border:1px solid #000;
}
#dhtmlgoodies_menu .currentDepth2over a{ /* Text rules */
color:#000;
}
/* Sub menu depth 2 */
#dhtmlgoodies_menu .currentDepth3{
padding-right:2px;
border:1px solid #FFF;
}
#dhtmlgoodies_menu .currentDepth3over{
padding-right:2px;
background-color:#EDE3EB;
border:1px solid #000;
}
/* Sub menu depth 3 */
#dhtmlgoodies_menu .currentDepth4{
padding-right:2px;
border:1px solid #FFF;
}
#dhtmlgoodies_menu .currentDepth4over{
padding-right:2px;
background-color:#EBEDE3;
border:1px solid #000;
}
</STYLE>
<SCRIPT>
var dhtmlgoodies_menuObj; // Reference to the menu div
var currentZIndex = 1000;
var liIndex = 0;
var visibleMenus = new Array();
var activeMenuItem = false;
var timeBeforeAutoHide = 1200; // Microseconds from mouse leaves menu to auto hide.
var dhtmlgoodies_menu_arrow = 'images/arrow.gif';
var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
var navigatorVersion = navigator.appVersion.replace(/.*?MSIE ([0-9]\.[0-9]).*/g,'$1')/1;
var menuBlockArray = new Array();
var menuParentOffsetLeft = false;
function getTopPos(inputObj)
{
var returnValue = inputObj.offsetTop;
if(inputObj.tagName=='LI' && inputObj.parentNode.className=='menuBlock1'){
var aTag = inputObj.getElementsByTagName('A')[0];
if(aTag)returnValue += aTag.parentNode.offsetHeight;
}
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
return returnValue;
}
function getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
return returnValue;
}
function showHideSub()
{
var attr = this.parentNode.getAttribute('currentDepth');
if(navigator.userAgent.indexOf('Opera')>=0){
attr = this.parentNode.currentDepth;
}
this.className = 'currentDepth' + attr + 'over';
if(activeMenuItem && activeMenuItem!=this){
activeMenuItem.className=activeMenuItem.className.replace(/over/,'');
}
activeMenuItem = this;
var numericIdThis = this.id.replace(/[^0-9]/g,'');
var exceptionArray = new Array();
// Showing sub item of this LI
var sub = document.getElementById('subOf' + numericIdThis);
if(sub){
visibleMenus.push(sub);
sub.style.display='';
sub.parentNode.className = sub.parentNode.className + 'over';
exceptionArray[sub.id] = true;
}
// Showing parent items of this one
var parent = this.parentNode;
while(parent && parent.id && parent.tagName=='UL'){
visibleMenus.push(parent);
exceptionArray[parent.id] = true;
parent.style.display='';
var li = document.getElementById('dhtmlgoodies_listItem' + parent.id.replace(/[^0-9]/g,''));
if(li.className.indexOf('over')<0)li.className = li.className + 'over';
parent = li.parentNode;
}
hideMenuItems(exceptionArray);
}
function hideMenuItems(exceptionArray)
{
/*
Hiding visible menu items
*/
var newVisibleMenuArray = new Array();
for(var no=0;no<visibleMenus.length;no++){
if(visibleMenus[no].className!='menuBlock1' && visibleMenus[no].id){
if(!exceptionArray[visibleMenus[no].id]){
var el = visibleMenus[no].getElementsByTagName('A')[0];
visibleMenus[no].style.display = 'none';
var li = document.getElementById('dhtmlgoodies_listItem' + visibleMenus[no].id.replace(/[^0-9]/g,''));
if(li.className.indexOf('over')>0)li.className = li.className.replace(/over/,'');
}else{
newVisibleMenuArray.push(visibleMenus[no]);
}
}
}
visibleMenus = newVisibleMenuArray;
}
var menuActive = true;
var hideTimer = 0;
function mouseOverMenu()
{
menuActive = true;
}
function mouseOutMenu()
{
menuActive = false;
timerAutoHide();
}
function timerAutoHide()
{
if(menuActive){
hideTimer = 0;
return;
}
if(hideTimer<timeBeforeAutoHide){
hideTimer+=100;
setTimeout('timerAutoHide()',99);
}else{
hideTimer = 0;
autohideMenuItems();
}
}
function autohideMenuItems()
{
if(!menuActive){
hideMenuItems(new Array());
if(activeMenuItem)activeMenuItem.className=activeMenuItem.className.replace(/over/,'');
}
}
function initSubMenus(inputObj,initOffsetLeft,currentDepth)
{
var subUl = inputObj.getElementsByTagName('UL');
if(subUl.length>0){
var ul = subUl[0];
ul.id = 'subOf' + inputObj.id.replace(/[^0-9]/g,'');
ul.setAttribute('currentDepth' ,currentDepth);
ul.currentDepth = currentDepth;
ul.className='menuBlock' + currentDepth;
ul.onmouseover = mouseOverMenu;
ul.onmouseout = mouseOutMenu;
currentZIndex+=1;
ul.style.zIndex = currentZIndex;
menuBlockArray.push(ul);
var topPos = getTopPos(inputObj);
var leftPos = getLeftPos(inputObj)/1 + initOffsetLeft/1;
ul = dhtmlgoodies_menuObj.appendChild(ul);
ul.style.position = 'absolute';
ul.style.left = leftPos + 'px';
ul.style.top = topPos + 'px';
var li = ul.getElementsByTagName('LI')[0];
while(li){
if(li.tagName=='LI'){
li.className='currentDepth' + currentDepth;
li.id = 'dhtmlgoodies_listItem' + liIndex;
liIndex++;
var uls = li.getElementsByTagName('UL');
li.onmouseover = showHideSub;
if(uls.length>0){
var offsetToFunction = li.getElementsByTagName('A')[0].offsetWidth+2;
if(navigatorVersion<6 && MSIE)offsetToFunction+=15; // MSIE 5.x fix
initSubMenus(li,offsetToFunction,(currentDepth+1));
}
if(MSIE){
var a = li.getElementsByTagName('A')[0];
a.style.width=li.offsetWidth+'px';
a.style.display='block';
}
}
li = li.nextSibling;
}
ul.style.display = 'none';
if(!document.all){
//dhtmlgoodies_menuObj.appendChild(ul);
}
}
}
function resizeMenu()
{
var offsetParent = getLeftPos(dhtmlgoodies_menuObj);
for(var no=0;no<menuBlockArray.length;no++){
var leftPos = menuBlockArray[no].style.left.replace('px','')/1;
menuBlockArray[no].style.left = leftPos + offsetParent - menuParentOffsetLeft + 'px';
}
menuParentOffsetLeft = offsetParent;
}
/*
Initializing menu
*/
function initDhtmlGoodiesMenu()
{
dhtmlgoodies_menuObj = document.getElementById('dhtmlgoodies_menu');
var aTags = dhtmlgoodies_menuObj.getElementsByTagName('A');
for(var no=0;no<aTags.length;no++){
var subUl = aTags[no].parentNode.getElementsByTagName('UL');
if(subUl.length>0 && aTags[no].parentNode.parentNode.parentNode.id != 'dhtmlgoodies_menu'){
var img = document.createElement('IMG');
img.src = dhtmlgoodies_menu_arrow;
aTags[no].appendChild(img);
}
}
var mainMenu = dhtmlgoodies_menuObj.getElementsByTagName('UL')[0];
mainMenu.className='menuBlock1';
mainMenu.style.zIndex = currentZIndex;
mainMenu.setAttribute('currentDepth' ,1);
mainMenu.currentDepth = '1';
mainMenu.onmouseover = mouseOverMenu;
mainMenu.onmouseout = mouseOutMenu;
var mainMenuItemsArray = new Array();
var mainMenuItem = mainMenu.getElementsByTagName('LI')[0];
mainMenu.style.height = mainMenuItem.offsetHeight + 2 + 'px';
while(mainMenuItem){
mainMenuItem.className='currentDepth1';
mainMenuItem.id = 'dhtmlgoodies_listItem' + liIndex;
mainMenuItem.onmouseover = showHideSub;
liIndex++;
if(mainMenuItem.tagName=='LI'){
mainMenuItem.style.cssText = 'float:left;';
mainMenuItem.style.styleFloat = 'left';
mainMenuItemsArray[mainMenuItemsArray.length] = mainMenuItem;
initSubMenus(mainMenuItem,0,2);
}
mainMenuItem = mainMenuItem.nextSibling;
}
for(var no=0;no<mainMenuItemsArray.length;no++){
initSubMenus(mainMenuItemsArray[no],0,2);
}
menuParentOffsetLeft = getLeftPos(dhtmlgoodies_menuObj);
window.onresize = resizeMenu;
dhtmlgoodies_menuObj.style.visibility = 'visible';
}
window.onload = initDhtmlGoodiesMenu;
</SCRIPT>
<div class="noPrint">
<div id="mainContainer">
<div id="dhtmlgoodies_menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="functions.php">Functions</a>
<ul>
<li><a href="#">Repair Parts</a>
<ul>
<li><a href="#">Create Ticket</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
</ul>
</li>
<li><a href="#">Cars</a>
<ul>
<li><a href="#">Check In</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
</ul>
</li>
<li><a href="#">Sub Function</a>
<ul>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
</ul>
</li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
</ul>
</li>
<li><a href="#">Reports</a>
<ul> <li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Trucks</a>
<ul>
<li><a href="#">Year 2007</a>
<ul>
<li><a href="#">Approved</a></li>
<li><a href="#">Pending</a></li>
<li><a href="#">Declined</a></li>
</ul>
</li>
<li><a href="#">Year 2008</a>
<ul>
<li><a href="#">Approved</a></li>
<li><a href="#">Pending</a></li>
<li><a href="#">Declined</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Administration</a>
<ul>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
</ul>
</li>
<li><a href="#" onclick="allPrint()";>Print</a></li>
<li><a href="/logout.php">Exit</a></li>
</ul>
</div>
</div>
</div>
<form method="POST" action="--WEBBOT-SELF--">
<input type="text" name="T1" size="20" value="THIS IS A TEST"><select size="1" name="D2">
<option>this is a test</option>
</select><select size="1" name="D3">
<option>THIS IS A TEST</option>
</select></p>
<p> </p>
<p><input type="reset" value="Reset" name="B2"><input type="submit" value="Submit" name="B1"></p>
</form>
I seem to be having problems with a drop-down menu being overlayed with a flash movie in IE 7. Now I understand there's a z-index bug with IE7 and a position attribute needs to added to the relevant container element. eg. position: relative; But even though I do this I still seem to get the same problem in IE7. Are there any suggestions? Hi there, For some reason, my z-index is not working properly in IE. I want a layer to appear above the rest. It works fine in FF, but not IE. This is my code: Code: width:200px; position: absolute; left: 750px; top: 50px; z-index: 1000; background-color: #ffffff; border: 3px solid #f6f6f6; font-family: verdana; Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; padding: 10px 10px 10px 15px; line-height: 20px; i really need some help!!! i can work out how to solve this problem. I know z-index only works with absolute positioned elements. however i need it to work a relative element. so i decided to make that element absolute and then put it inside a relative <div> wrapper. problem that came about: 1, the z-index still doesnt work. that element doesnt show up over lower values of z-index which are on the page. these other elements are not in the div wrapper. 2, the div wrapper does not wrap around an absolute position element. it just shrinks down. any help>> I am using an image in the FOREground as a border and I can't get the DIV boxes to drop behind the image. Here's the CSS Code: body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
background-color: #FFFFFF;
}
#maincontainer {
position:absolute;
top:0px;
left:0px;
z-index:200;
color:#f00;
background:transparent;
}
#header {
position:absolute;
top:22px;
left:22px;
color:#000;
border:1px
solid #000;
padding-top:5px;
padding-left:5px;
padding-right:5px;
width:745px;
height:73px;
background:#FFFFCC;
overflow: hidden;
}
#leftcontent {
}
#rightcontent {
}
#centercontent {
Here's the HTML Code: <html> <head> <link rel="stylesheet" type="text/css" href="newstyles.css" > </head> <body> <div id="maincontainer"> <img src="mainborder.gif" height="600" width="800" alt=""></img> <div id="header"> eat at joes </div> <div id="leftcontent"> eat at joes </div> <div id="rightcontent"> eat at joes </div> <div id="centercontent"> eat at joes </div> </div> </body> <html> I'm experimenting with some pure CSS menus and I'm trying to use an icon with them. see http://www.fogcat.co.uk/css/test.html css is http://www.fogcat.co.uk/css/test3.css But the icons are appearing behind other menu items - even though I have the z-index set to 100. What am I not doing? It works fine in Firefox but not IE6. The HTML is Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="./test3.css" TITLE="bw">
</head>
<body>
<div id="container">
<p>just some text</p>
<div id="menudiv">
<ul>
<li><a href="#" title="Link1"><img src="item.gif" >Home <span class="line1"></span></a></li>
<li><a href="#" title="Link2"><img src="item2.gif">Menu Two <span class="line2"></span></a></li>
<li><a href="#" title="Link3"><img src="item.gif" >Menu Three<span class="line3"></span></a></li>
<li><a href="#" title="Link4"><img src="item2.gif">Menu Four <span class="line4"></span></a></li>
<li><a href="#" title="Link5"><img src="item.gif" >Menu Five <span class="line5"></span></a></li>
<li><a href="#" title="Link6"><img src="item2.gif">Menu Six <span class="line6"></span></a></li>
<li><a href="#" title="Link7"><img src="item.gif" >Menu Seven<span class="line7"></span></a></li>
<li><a href="#" title="Link8"><img src="item2.gif">Menu Eight<span class="line8"></span></a></li>
<li><a href="#" title="Link9"><img src="item.gif" >Menu Nine <span class="line9"></span></a></li>
</ul>
</div>
</div>
</body>
</html>
the CSS is Code: BODY
{
background-color: #F0F0F0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
}
#container
{
border: 1px solid green;
padding: 20px;
background-color: #FFFFFF;
top: 20px;
left: 20px;
}
#menudiv {
width: 240px;
}
#menudiv ul
{
margin: 0;
padding: 0; /*removes indent IE and Opera*/
list-style-type: none; /*removes indent Mozilla and NN7*/
font-family: Arial, Helvetica, sans-serif; /*turns off display of bullet*/
font-size: 14px;
}
#menudiv li
{
margin: 0px 0px 15px 0px;
background-color: White;
text-align: center;
}
div#menudiv li a
{
display: block;
position: relative;
text-decoration: none;
padding: 5px 0px 5px 0px;
width: 100%;
background-color: #DDDDDD;
color: Black;
}
#menudiv li a:hover
{
background-color: #6B6B6B;
color: White;
}
div#menudiv li a span
{
display:block;
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 3px solid silver;
/* position shouild be border width + gap + padding in <a>*/
top: 9px;
}
div#menudiv li a img
{
position: absolute;
left: 0;
top: 0;
padding: 0;
margin: 0;
border-width: 0;
width: 0;
height: 0;
z-index: 100;
}
div#menudiv li a:hover img
{
width: 60px;
height: 60px;
top: -10px;
left: -12px;
}
div#menudiv li a:hover span.line1 {border-bottom-color:red;}
div#menudiv li a:hover span.line2 {border-bottom-color:orange}
div#menudiv li a:hover span.line3 {border-bottom-color:yellow}
div#menudiv li a:hover span.line4 {border-bottom-color:green}
div#menudiv li a:hover span.line5 {border-bottom-color:blue}
div#menudiv li a:hover span.line6 {border-bottom-color:magenta}
div#menudiv li a:hover span.line7 {border-bottom-color:teal}
div#menudiv li a:hover span.line8 {border-bottom-color:darkgreen}
div#menudiv li a:hover span.line9 {border-bottom-color:cyan}
For some reason, a layer that is marked z-index:0 is coming up above a layer I have marked z-index:100. The problem is only occurring in IE (works fine in Firefox, etc.). I've dumbed the code down to get to the bare bones of it. The sample is he http://www.davidaskitchenandtiles.com/test.php You can see the code via view source or below. Note that the text "Z-index 0 (or not defined)" is on the z-index:0 layer, so it should be under the white layer, which is z-index:100. This is the case in Firefox, but the text runs over it in IE. Thanks so much if you can let me know why this is. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table cellpadding="0" cellspacing="0" border="0" width="300"> <tr> <td width="300" height="200" bgcolor="blue"> <div style="position:relative"> <div style="position:absolute; background-color:#ffffff; top:50px; left:15px; width:200px; height:300px; display:block; z-index:100;border:2px solid green; overflow:hidden"> z-index 100 </div> </div> </td> </tr> <tr> <td width="300" height="200" bgcolor="red"> <div style="position:relative; z-index:0"> Z-index 0<br>(or not defined) </div> </td> </tr> </table> </body> </html> Hello everyone. You see, I wanted to use the close look up for images in gallery, something like sucker fish gallery have. On hover, image changes size and pop up bigger. I've used overflow, because not every image in gallery after resizing by server to 200px width will have 150px height. There is example image to illustrate that. And now... open it using IE, this is something to do with z-index I think. I really don't how to code it for IE. On Opera and FF it is probably looking as it should. Could anyone suggest something to solve this please ? I would be grateful. http://members.lycos.co.uk/milosz/www/new/ Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
ul { width: 400px; }
li { margin: 10px; position: relative; float: left; width: 100px; height: 75px; }
li a { border: 1px solid #3A3A3A; text-decoration: none; color: #EFEFEF; width: 100px; height: 75px; overflow: hidden; background: #3A3A3A; position: absolute; }
li a img { border: 0; }
li:hover a { position: absolute; width: 200px; height: 150px; left: -51px; top: -39px; border: 1px solid #3A3A3A; overflow: hidden; z-index: 2; }
li a:hover { z-index: 1; }
</style>
<!--[if lt IE 7]>
<style type="text/css">
/* Hovers everything now */
body { behavior:url("csshover.htc"); }
</style>
<![endif]-->
</head>
<body>
<br />
<br />
<br />
<ul>
<li><a href="#" target="_blank"><img src="1.png" alt="1.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="2.jpg" alt="2.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="1.jpg" alt="1.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="2.jpg" alt="2.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="1.jpg" alt="1.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="2.jpg" alt="2.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="1.jpg" alt="1.jpg" /></a></li>
</ul>
</body>
</html>
Excuse me my poor English. edit: I've changed link, and move files to safe server. They will stay there longer I think, and maybe somehow help others like me. basically I'd like to build a four layer div element, the layer order by z-index should be interface layer, number presentation layer, background border layer and background layer here is my html code PHP Code: <style> .bg{background:url(images/bg.gif) no-repeat 0 0;} .borderLayer{background:url(images/border.gif) no-repeat 0 0;} .interfaceLayer a{display:block;height:50px;width:50px;padding:4px 0 0 0;cursor:pointer} .interfaceLayer a:hover{background:url(images/broder1.gif) no-repeat 0 0;} </style> <table> <tr> <td style="padding:10px;"> <div style="z-index:9999;position:relative;"> <div class="interfaceLayer" style="top:-2px;left:-2px;position:absolute;"><a><img width="50px" height="50px" src="images/pixel.gif"/></a></div> </div> <div style="z-index:99;position:relative;"> <div class="numLayer" style="left:28px;top:33px;position:absolute;z-index:100;"><span style="color:white;">100</span></div> </div> <div style="z-index:50;position:relative;"> <div class="borderLayer" style="top:-2px;left:-2px;position:absolute;width:56px;height:54px;"/> </div> <div style="position:relative;"> <div class="bg" style="width:43px;height:45px"/> </div> </td> </tr> </table> also js action will taken when interface Layer get onclick event which reset border layer and background image the code problem is when onclick action taken the z-index it seems doesn't follow, my numberLayer get screw by my broder layer image. more to mention the initial z-index appear to be in the right order Hi guys, Maybe some of you could shed some light on this little problem. I'm currently working on a site redesign, the page in question can be found HERE. When hovering over the ZOOM button in Opera the mouseover image is partially hidden, and in one particular case (2nd ZOOM button down) after rolling off the image the mouseover image partially remains. Works fine in Firefox and Safari (been unable to test in IE yet) I'm guessing the problem comes down to z-index but my understanding of it is pretty poor. Any insight would be much appreciated (yes the coding's messy... it's a work in progress ) Thanks! I am having a heck of a time dealing with IE7 and how it handles z-index tags on SELECT elements and DIV's. This problem only exists in IE7 and does not manifest in IE6, Firefox (Mac/Win) or Safari (Mac/Win). I've posted a concise example of my problem on one of my servers to better illustrate my problem: Sample Problem Page. Check it out using IE6 and then using IE7. Or if you don't have IE6, I've posted a screenshot of what it looks like. I would appreciate any help solving this problem for IE7. Feel free to copy the source code and play with it and even keep the combo-box drop down code for your own use (if you help me get it working of course, ha ha). I am having a minor problem with a photo gallery on a site that I am working on. Here is a link: http://fieldspianos.com/new/store/p...em_number=14275 In all browsers except IE6, when a thumbnail is hovered over, the image is displayed larger in the preview box. In IE6, however, this occurs properly, but once you roll over an image more than once it will not display anymore. For example, if I roll over the 1st thumbnail, the image displays, then I roll over the 2nd thumbnail, the image displays, but if I roll over the 1st thumbnail again, nothing happens. Included below is my css and html. This was made without javascript and I would like to keep it that way if at all possible. HTML Code:
<div id="sitebody">
<div id="tabsheader">
<ul id="primary">
<li><?php print "<a href=\"information.php?item_number=" . $item_number . "\">"; ?>Information</a></li>
<li><?php print "<a href=\"description.php?item_number=" . $item_number . "\">"; ?>Description</a></li>
<li><span>Photo Gallery</span></li>
<li><?php print "<a href=\"video.php?item_number=" . $item_number . "\">"; ?>Video</a></li>
<li><?php print "<a href=\"moreinfo.php?item_number=" . $item_number . "\">"; ?>More Info...</a></li>
</ul>
</div>
<div id="main">
<div id="contents">
<h2>Photo Gallery</h2>
<p class="note">Hover over the photos below to see larger images.</p>
<br />
<div id="photogallery">
<div id="thumbnails">
<ul class="hoverbox">
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img1.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img1.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img2.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img2.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img3.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img3.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img4.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img4.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img5.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img5.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img6.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img6.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img7.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img7.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img8.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img8.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img9.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img9.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img10.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img10.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img11.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img11.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img12.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img12.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img13.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img13.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img14.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img14.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img15.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img15.jpg" alt="description" class="preview" /></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS Code:
/*Photo Gallery*/
div#photogallery {
position: relative;
width: 662px;
border: 1px solid #000;
padding: 1px;
padding-bottom: 2px;
height: 404px;
}
div#thumbnails {
width: 243px;
}
div#thumbnails ul {
margin-left: 0px;
padding-left: 0px;
}
.hoverbox
{
cursor: default;
list-style: none;
}
.hoverbox a
{
cursor: default;
}
.hoverbox a .preview
{
display: none;
}
.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: 2px;
left: 247px;
z-index: 1;
}
.hoverbox img
{
background-color: #FFFFFF;
border-color: #000;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 1px;
vertical-align: top;
width: 75px;
height: 75px;
}
.hoverbox img:hover
{
background-color: #000000;
border-color: #000;
border-style: solid;
border-width: 1px;
color: inherit;
vertical-align: top;
width: 75px;
height: 75px;
}
.hoverbox li
{
display: inline;
float: left;
margin: 1px;
}
.hoverbox .preview
{
border-color: #000;
width: 409px;
height: 399px;
}
This is best explained by example. Please see http://www.drudolph.org/new/test.php for a proof of concept. Basically, there's an outside layer (red border) that contains several layers inside (blue borders), and is styled so that it has fixed dimensions and can scroll vertically if necessary. Over the blue layers, I want to position another layer (green box). This layer should move with the blue boxes, so that if you scroll up and down, the green box stays with it. On top of that - and here's the kicker - the green box, which will be large enough that it sometimes will expand beyond the outside red layer, should be completely visible. So, the green layer needs to 1.) move relative to the blue layer but 2.) be seen outside the parent red layer at all times. You can see on the test two attempts. One puts the green layer in with the blue layers, so that it can be positioned relatively. Unfortunately, this puts it "inside" the red "stack," so I don't believe any z-indexing will allow it to show outside of the red layer. The second attempt puts the green div along side the red div, or on the same "stacking level." This allows you to use a z-index to put it above the red layer, but then it can't scroll relative to the blue layers inside. So, at this point, I believe it's impossible to do. Thoughts? I've mocked up a page using 960.gs that has has several elements fixed in a div under which the content of the of the page is to flow. The background of this div is a CSS gradient, and has a height of 100% (if the gradient is applied to to the actual body of the page it doesn't actually extend the whole width of the page). As the user scrolls up, the content is to be viewable behind an opaque menu. bit.ly/f2a4rC The layout works as I want in FF and Chrome, but the content of the page scrolls over the fixed upper area in IE7. I understand that a new stacking context is being created, but I've been unable to resolve this by fiddling with the z-index of the elements in question, or their parents. I know I can consolidate some of the extra divs used by the grid, but I've been unable to do so in a way that keeps the gradient and transparency effects. How can I achieve this look in IE7? I have been told by a client that my dreamweaver-generated drop-down Javascript menu goes behind the flash movies in Safari. HERE IS THE LINK Since I am not using absolute <divs /> is there any to control the "Z" index to make sure the drop down menu goes above the flash movie? Thanks. An old site, http://www.naausa.org, doesn't work properly in IE7 as the hover links don't go over the changing image. It seems to be because of the IE bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html The site and code is ugly (inline CSS, tables, etc.), but I don't want to reinvent the wheel; I just want to solve the problem and get it over with. I've tried several things with no luck. Can anyone take a gander at the source code and give me a hint? Thanks, Jeremy Does IE not support z-index attributes? I set some z-indexes and it seems to have fixed my issues in firefox, but not in IE. |
|||||||