Learn VBA & Macros in 1 Week!

CSS - Z-index - Or Div Positioning Problem

Full Excel VBA Course - Beginner to Expert

Z-index - Or Div Positioning Problem	View Content

Full Excel VBA Course - Beginner to Expert

Oddly Difficult Div / Z-index Positioning Problem.

Similar Tutorials

View Content

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?

Css Z-index Positioning Prob In Ie

Similar Tutorials

View Content

I was asked to change the header to a rotating one, and I found a nice jquery solution. Of course at first it made the links at the top (on top of the image) disappear, but then I looked at the jquery code and saw that it used z-index (1000), and so I made <header p> = z-index of 6000. That brought them back and in fact it looked pretty good... except in IE. And, depending on what I'm doing to fix the IE problem, Safari. In those browsers, the rotating header appears flush under the header p links, rather than flush up against the border -- and you can see the old static image peeking out.

http://esdcar.org/about/board.html?category_id=1&sub_id=2

I googled z-index and IE and found several different options for stacking problems, which it seems like this is. (Am I wrong?) Negative z-index on the header div that contains header p, solved the problem in Safari but not IE. I followed some other suggestion and made all the parent elements successively 1 higher in value. Basically I've tried many things and none have worked.

This is the current iteration:

Code:

#container 
{ color: #775b36; 
background-color: #ffefca; 
border: 4px #f5c674 solid; 
width: 800px; 
margin: auto; 
background: url(../images/bkg_faux.jpg) repeat-y 50% 0; 
z-index: 6003; }  

<snip (unrelated divs)>

#content 
{ width: 75%;
position: relative;
margin: 0em;
float: right; 
z-index:6002;}

#header 
{ background-image: url(../images/ec_landscape.jpg);
background-repeat: no-repeat; 
background-position: top; height: 100px; 
border-bottom: 4px #f5c674 solid; 
text-decoration: none; color: #775b36; 
text-align: left; 
margin-bottom: 0em; 
position:relative; 
z-index:6001; }  

#header p 
{ float: right; 
/*margin-right: 1%;*/ 
margin-top: 0em; 
padding-top: .2em;  
font-size: .7em; 
position:relative; 
z-index:6000; 
display:inline; 
background:#ffefca; 
padding: 2px; }

What am I not getting? It seems like the z-index is the problem that was introduced, but I can't seem to fix it.

Div Positioning Issue Using Css Z-index

Similar Tutorials

View Content

Hi everyone, I'm a noob to most of this so take it easy on me.

I'm developing a page with a vertically aligned tabber (eventually) full of info. The code I've used was for a horizontally aligned tabber so I read up and changed the CSS to make the thing vertical. I've managed to get it in FF (and chrome and safari) so that the tabbed info div is appearing behind the navigation (which I like and want to keep) but in IE it doesn't stack at all. It re-aligns below the navigation if it's set to any more than pixel wider than the space it's got. If you look at my page in FF and IE http://king-asia.co.uk/test/about.html you'll see what I mean.

I figured it should be a z-index trick but nothing I've tried seems to layer the content div and the nav div in IE.

I've pasted in my code below. Can anyone spot the error(s)?

CSS:
Code:

.tabberlive .tabbertabhide {
 display:none;
 border:1px solid #aaa;
 width:538px;
 height:400px;
 position:relative;
 float:right;
}

.tabber {
	position:relative;
}
.tabberlive {
}

ul.tabbernav
{
 margin:0;
 padding: 0em;
 font: bold 12px Verdana, sans-serif;
 position:fixed;
 float:left;
 z-index:1;
}

ul.tabbernav li
{
 list-style: none;
 margin-left: 0;
 display: block;
 position:relative;
 text-align:left;
}

ul.tabbernav li a
{
 padding: 0.25em;
 margin-top: 15px;
 text-decoration: none;
 display:block;
 background: #DDE;
 border: 1px solid #778;
}

ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover
{
 color: #448;
 background: #AAE;
 text-decoration:none;
}

ul.tabbernav li.tabberactive a
{
 text-decoration:none;
 background-color: #fff;
 border-right: 1px solid white;
 margin-top:15px;
}

ul.tabbernav li.tabberactive a:hover
{
 color: #448;
 text-decoration:none;
}

.tabberlive .tabbertab {
 border:1px solid #aaa;
 width:540px;
 height:400px;
 position:relative;
 float:right;
 z-index:0;
}

.tabberlive .tabbertab h1 {
 display:none;
}
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

Tabber:
Code:

        <div class="style18" style="background-color:#FFF;">
          <div class="tabber" style="background-color:#FFF;">
            <!-- History -->
            <div class="tabbertab" title="History">
              <div class="style18" style="padding:1em; text-align:left;"><h3>History</h3>This is the bit about our company's history. This is the bit about our company's history. This is the bit about our company's history. This is the bit about our company's history.
              </div>

            </div>
            <!-- What We Do -->
            <div class="tabbertab" title="What We Do">
              <div class="style18" style="padding:1em; text-align:left;"><h3>What We Do</h3><table class="style18" cellpadding="0" cellspacing="0" border="0">
                <tr>
                  <td>passion for good food. This is the bit more about ourrrent projects. This is the bit more about our current projects. passion for good food. This is the bit more about ourrrent projects. This is the bit more about our current projects. passion for good food. This is the bit more about ourrrent projects. This is the bit more about our current projects. </td>
                </tr>
              </table>

              </div>
            </div>
            <!-- Business Philosophy -->
            <div class="tabbertab" title="Business Philosophy">
              <div class="style18" style="padding:1em; text-align:left;"><h3>Business Philosophy</h3>This is the bit more about our passion for good food. This is the bit more about our passion for good food. This is the bit more about our passion for good food. This is the bit more about our passion for good food.
              </div>
            </div>
            <!-- Quality Driven -->
            <div class="tabbertab" title="Quality Assurance">

              <div class="style18" style="padding:1em; text-align:left;"><h3>Quality Assurance</h3>This is the bit more about what we do. This is the bit more about what we do. This is the bit more about what we do. This is the bit more about what we do.
              </div>
            </div>
          </div>
        </div>

This is really starting to frustrate after I've spent 2 days solid on it and but cannot get round the problem. Help wold be greatly appreciated.

Relative Positioning And Z-index

Similar Tutorials

View Content

First this seems like a common problem but I couldn't find an answer. I did look, maybe I didn't use the right search terms but I did look.

So I have always wanted to do this but could never figure out a way to do it. I'd like to have relative positioned divs overlap each other and not push the rest of the layout around. Pretty much the exact same way absolute works, but just position relatively.

Positioning Layers In X,y (position/float?) And Z (z-index?) Dimensions

Similar Tutorials

View Content

Hi all,

After being away from the forums for some while I picked up the "webdesign-bug" again (it's raining during my summer holidays) but I'm having some troubles catching up with all new techniques/syntaxes at the moment. I did have a look at some tutorial sites and searched the forum for similar problems but somehow it's a bit overwhelming and I didn't find the solution I'm looking for yet. I do hope I didn't overlook something very basic or ask a frequently asked question (sorry then )

The goal
I'm trying to make a (css-based) site with a central column with all 'normal' data. Below this central column I'd like to place some additional layers which are (partly) hidden underneath the main layer and which show themselves if you move with your mouse over the visible parts. The idea behind it is to create some 'desktop' where you have all kinds of things laying on eachother (like additional pieces of paper, some photographs, some money, ...). As an extra feature there would be another layer which makes sure there's a shadow from the 'main column' on the items below it. (Hope this is clear?)

What I did so far
To achieve this I thought I'd use different layers with different z-indexes and position them over and underneath eachother. So far I have the following code:

html4strict Code:
Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test Layers</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link href="style.css" type="text/css" rel="stylesheet" /> <script type="text/javascript"> function show( obj ) { bla = document.getElementById( obj ); bla.style.zIndex += 10; } function hide( obj ) { bla = document.getElementById( obj ); bla.style.zIndex -= 10; } </script> </head> <body>  <div id="container"> <h2 class="title">Quick Links</h2>  <div class="subcontent1" id="subcontent1" onMouseOver="show('subcontent1');" onMouseOut="hide('subcontent1');"> Subtext1<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/> </div> <div class="subcontent2" id="subcontent2" onMouseOver="show('subcontent2');" onMouseOut="hide('subcontent2');"> Subtext2<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/> </div>  <div class="content_shadow"> <div class="content"> <h1 class="title">Site Title</h1> <div class="content_white"> <h2 class="title">Content Title</h2> Maintext1 </div> </div> </div> </div> </body> </html>

  

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


 <html xmlns="http://www.w3.org/1999/xhtml">


 <head>


     <title>Test Layers</title>


     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />


     <link href="style.css" type="text/css" rel="stylesheet" />


     <script type="text/javascript">


         function show( obj ) {


             bla = document.getElementById( obj );


             bla.style.zIndex += 10;


         }


         function hide( obj ) {


             bla = document.getElementById( obj );


             bla.style.zIndex -= 10;


         }


     </script>


 </head>


 <body>


  


 <!-- CONTAINER -->


 <div id="container">


     <h2 class="title">Quick Links</h2>


  


     <!-- SUBCONTENT -->


     <div class="subcontent1" id="subcontent1" onMouseOver="show('subcontent1');" onMouseOut="hide('subcontent1');">


         Subtext1<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/>


     </div>


     <div class="subcontent2" id="subcontent2" onMouseOver="show('subcontent2');" onMouseOut="hide('subcontent2');">


         Subtext2<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/>


     </div>


  


     <!-- CONTENT -->


     <div class="content_shadow">


         <div class="content">


             <h1 class="title">Site Title</h1>


             <div class="content_white">


                 <h2 class="title">Content Title</h2>


                 Maintext1


             </div>


         </div>


     </div>


 </div>


  


 </body>


 </html>

css Code:
Original - css Code * { margin: 0; padding: 0; } body { background-color: orange; } h1.title { display: none; } h2.title { display: none; } /******************************************************************** * CONTAINER ********************************************************************/ #container { border: solid 1px black; margin: 0 auto; width: 1000px; z-index: 1; /* background-color: lightgray;*/ /* filter: alpha(opacity=50);*/ } /******************************************************************** * SUB CONTENT ********************************************************************/ /* http://msdn2.microsoft.com/en-us/library/ms530301.aspx http://www.w3schools.com/htmldom/prop_style_clear.asp http://www.dynamicsitesolutions.com/css/layout-techniques/ */ #container .subcontent1 { background-color: lime; float: left; position: relative; top: 100px; width: 400px; z-index: 2; /* display: inline;*/ /* height: 200px;*/ /* left: 0px;*/ } #container .subcontent2 { background-color: lime; display: block; float: right; position: relative; top: 200px; width: 400px; z-index: 3; /* display: block;*/ /* height: 200px;*/ } /******************************************************************** * MAIN CONTENT ********************************************************************/ #container .content_shadow { background-color: gray; display: block; margin: 0 auto; opacity: .75; position: relative; top: 0px; width: 850px; z-index: 8; } #container .content { clear: none; margin: 0 auto; width: 800px; z-index: 9; } #container .content_white { background-color: white; display: block; height: 800px; margin: 0 auto; position: relative; top: 0px; width: 100%; z-index: 10; }

  

 * {


     margin: 0;


     padding: 0;


 }


  


 body {


     background-color: orange;


 }


  


 h1.title {


     display: none;


 }


 h2.title {


     display: none;


 }


  


 /********************************************************************


  * CONTAINER


  ********************************************************************/


  


 #container {


     border: solid 1px black;


     margin: 0 auto;


     width: 1000px;


     z-index: 1;


 /*  background-color: lightgray;*/


 /*  filter: alpha(opacity=50);*/


 }


  


 /********************************************************************


  * SUB CONTENT


  ********************************************************************/


  


 /*


 http://msdn2.microsoft.com/en-us/library/ms530301.aspx


 http://www.w3schools.com/htmldom/prop_style_clear.asp


 http://www.dynamicsitesolutions.com/css/layout-techniques/


 */


  


 #container .subcontent1 {


     background-color: lime;


     float: left;


     position: relative;


     top: 100px;


     width: 400px;


     z-index: 2;


 /*  display: inline;*/


 /*  height: 200px;*/


 /*  left: 0px;*/


 }


  


 #container .subcontent2 {


     background-color: lime;


     display: block;


     float: right;


     position: relative;


     top: 200px;


     width: 400px;


     z-index: 3;


 /*  display: block;*/


 /*  height: 200px;*/


 }


  


 /********************************************************************


  * MAIN CONTENT


  ********************************************************************/


  


 #container .content_shadow {


     background-color: gray;


     display: block;


     margin: 0 auto;


     opacity: .75;


     position: relative;


     top: 0px;


     width: 850px;


     z-index: 8;


 }


 #container .content {


     clear: none;


     margin: 0 auto;


     width: 800px;


     z-index: 9;


 }


  


 #container .content_white {


     background-color: white;


     display: block;


     height: 800px;


     margin: 0 auto;


     position: relative;


     top: 0px;


     width: 100%;


     z-index: 10;


 }

The problem(s)
Besides the (css)code probably being sloppy (and redundant at points?!?) since I experimented a lot with adding and removing of position-tags, floating-tags, etc etc.. it still fails to do what I'm aiming for. As can be seen on the attached screenshot most of it seems to be working (at least in FF2) (I had my mouse over the 2nd subcontent-layer btw) but the maintext1 won't start at the left of it's layer but instead starts on a x-coordinate where the 1st subcontent-layer finishes Can somebody point me to what I'm doing wrong? Also, if somebody has a relevant tutorial I'd appreciate it as well since I obviously need some extra exercise with this stuff (working on it already btw but you never know if there's another good one)

Thanks for any help and if something isn't clear I'll try to explain it further!

Css Positioning - Footer Positioning Problem

Similar Tutorials

View Content

I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values):

It needs to be sticked to fit after content of 4 column DIV's like it is in example.

http://www.split.info/dev/less-content/
http://www.split.info/dev/more-content/

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF;  top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966;  position: absolute;  top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="contentPane">Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
	</div>
	<div id="leftPane">Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
	</div>
	<div id="rightPane">Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
	</div>
	<div id="rightPane2">Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
	</div>
</div>
<div id="headwide">
	<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>

Content from above 4 column div's need to push footer DIV below (after them)!

Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns).

Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer...

So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx!

Echo

Z-index Maybe The Problem??

Similar Tutorials

View Content

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>&nbsp;</p>
  <p><input type="reset" value="Reset" name="B2"><input type="submit" value="Submit" name="B1"></p>
</form>

Z-index Problem With Ie7

Similar Tutorials

View Content

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?

Z-index Problem

Similar Tutorials

View Content

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>

Z-index Problem

Similar Tutorials

View Content

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>

Z-index Problem!

Similar Tutorials

View Content

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>>

Z-index Ie Problem

Similar Tutorials

View Content

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;

Z-index Problem Between Ie6 And Ie7

Similar Tutorials

View Content

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;

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

Css Gallery, Problem With Z-index, I Think

Similar Tutorials

View Content

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.

Problem:z-index Unorder!

Similar Tutorials

View Content

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

Simple Z-index Problem.

Similar Tutorials

View Content

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">					
				&nbsp;&nbsp;&nbsp;&nbsp;Z-index 0<br>(or not defined)
			</div>
			</td>
		</tr>
	</table>
</body>
</html>

Css Menu Z-index Problem

Similar Tutorials

View Content

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}

Css Rendering Problem In Opera (z-index Maybe?)

Similar Tutorials

View Content

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!

Ie7 Z-index Problem - Overlapping Input Fields

Similar Tutorials

View Content

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).

Photo Gallery Hovering Problem (z-index?)

Similar Tutorials

View Content

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;
}