CSS - Ie7 Z-index Problem - Overlapping Input Fields
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). Similar TutorialsThis layout I've created seems to be working in Firefox Mac & PC, Internet Explorer 6 and Safari, but on Opera for Mac (haven't tried it on Opera for PC yet) I'm having some trouble. The div "footer" acts as a means to hold the copyright as well as the background for the very bottom of the blog section. This works correctly in all the browsers I listed, but in Opera the div covers up the blog section. This does happen in the other browsers if I place the footer div in the code after the blog div (where I originally had it), but moving it before the blog div doesn't resolve that problem in Opera. Anyone have any ideas? When using Safari, whenever you click inside an input field, a highlight goes around the field (focus ring). Is there anyway to use CSS to remove the focus ring altogether? Is it possible to differentiate between various types of input field, e.g. assign a width to text inputs but leave buttons to find their own width based on content. I know I can do this by assigning certain elements a class but I'd prefer not to have to do this. Thanks I'm trying to declare different charactoristics for different inputs (i.e. submit, checkbox, radio). I have this code, however, I can't seem to get the checkbox background color to go away. I want to declare the background color of the submit and button fields white, but have the checkbox be whatever color the page is. Code: input,textarea, select { font-family : Verdana; font-size : 12px; background-color : #ffffff; } input.checkbox { border: solid 0px #666666; } I have a php application that requires the applicant to input information on their spouse. If they claim to be single the fields for spouse dissapear using javascript to make a <div> surrounding the fields "hide". This leaves a blank gap on the applicaton where the fields use to display. How would I go about moving the questions below it on top of the hidden spouse fields? here is the current javascript I am using to accomomplish this. It uses a php loop to display the questions for X amount of owners. Code: <? echo "<script language=javascript type='text/javascript'>"; for($i=1; $i <= $_SESSION['principal']['numOwners']; $i++) { echo " function hidediv".$i."() { if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById('hideShow".$i."').style.visibility = 'hidden'; } else { if (document.layers) { // Netscape 4 document.hideShow".$i.".visibility = 'hidden'; } else { // IE 4 document.all.hideShow".$i.".style.visibility = 'hidden'; } } } function showdiv".$i."() { if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById('hideShow".$i."').style.visibility = 'visible'; } else { if (document.layers) { // Netscape 4 document.hideShow".$i.".visibility = 'visible'; } else { // IE 4 document.all.hideShow".$i.".style.visibility = 'visible'; } } } "; } echo "</script>"; Hi, Please see http://lbclibrary.org/addtoinquiry.php (scroll down a bit to see the form) What I want to do is, when the user selects "I am a member of ..." or "I want to become a member of..." the form fields in the OTHER cell should become readonly (i.e. should not allow input). Is it possible to make ALL the form elements in one <td> cell as readonly? Further, is it possible to change their background colors to say light grey? Then, when you select another radio option, that cell becomes writable and the other cell becomes readonly. Thanks a lot! Could you take a look at www.tscweb.co.uk/contact.php? I do not want the bottom slogan DIV to overlap the form on the right. TIA, Terry Hi, I've created a page with two tables, which is basically structured like <table> main content </table> <table id="footer"> footer content </table> and in my style sheet i have Code: #footerid { position: absolute; bottom: 0px; } The problem is that the footer is overlapping the content if the content is greater then a page's length. What I need is for the footer to come after the content table insetad of overlapping as it is now. Does this require some sort of id attached the first table? Thanks for any help on this one Hi, Code: <a href="..." ><span class='openP'></span>Open this section</a> <style type="text/css"> span.openP{ background-image:url('images/plus.gif'); background-repeat:no-repeat; width:50px; background-position:left center;} </style> Why does "Open this section" text appears over the image 'images/plus.gif'? How do I make 'plus.gif' to be left or right to the text? Got a problem in ie6 with divs dropping and a slight over lap in ie7. The tables are set width inside a 600px wide div but no matter what i do the columns on the right keep dropping. anyone have any ideas? how can i post screenshots when no urls allowed? Hello! I am using some pretty simple css to format a form for my website. I really like the way using Fieldset & Legend allows for quick and easy formatting of the form but I have one small problem. When I give the fieldset a background it goes above the border of the legend and doesn't look right. I've seen forms that have worked around this problem but I'm not sure how. Any suggestions or help would be appreciated! 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"> <title>ALE Join Form</title> <head> <style type="text/css"> fieldset { border: 2px solid #87AFC7; width: 50%; background: #F5F5F5; } legend { color: #fff; background: #87AFC7; border: 1px solid #fff; padding: 2px 6px } </style> </head> <body> <form action="#" method="post"> <fieldset> <legend>ALE Membership</legend><br><br> <!-- Provide a dropdown menu option field with sauces. --> <input type="hidden" name="on0" value="Type">Type of Sauce <select name="os0"> <option value="Select a type">-- Select a type --</option> <option value="Red">Red sauce</option> <option value="Green">Green sauce</option> </select></p> <br /> <!-- Provide a dropdown menu option field with prices. --> <input type="hidden" name="on1" value="Size">Size <select name="os1"> <option value="06oz">6 oz. bottle - $1.00 USD</option> <option value="12oz">12 oz. bottle - $2.00 USD</option> <option value="36oz">3 12 oz. bottles - $3.00 USD</option> </select></p> <br /> <!-- Display the payment button. --> <input type="submit" name="submit" value="submit" /><br><br> </fieldset> </form><br><br> <fieldset> <legend>Thank You</legend> <center> <p>Your something is complete!</p><br> </center> </fieldset> </body> </html> Below is a link to a terrible picture of the form (sorry it's not online): http://www.leadershipeducators.org/redesign/images/users/Jared/profile.jpg I've worked out most css problems but I can't find any css that will make the drop down menu on my site sit on top of the YouTube video that you can see he www the-bizness .co. .uk If you click on Home Page or Multimedia the drop-down menu is behind the video clip. Very annoying. Any help appreciated! 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'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 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 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? 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 Hi, 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> 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> |