Member Avatar for MJ Pieterse

I really hope someone can help me. this is mind boggling and driving me crazy!

I'm busy with a site design and have a div with a background image on the page, that in essence falls inside a table that is on the master page. I've been trying to adjust the image to be behind the table image with z-index but no such luck to get it to work... any ideas??

I've cleanded up the coding so that you don't see stuff that is not relevant to you so basically it is just the table and div that you will see... etc.

here is my HTML

<table id="maintable">
      <tr>
        <td width="49px" height="49px" class="lefttopcorner">&nbsp;</td>
        <td class="top">&nbsp;</td>
        <td width="49px" class="righttopcorner">&nbsp;</td>
      </tr>
      <tr>
        <td class="left">&nbsp;</td>
        <td>
            <table class="blanktable">
                <tr>
                    <td width="50%" align="left">
                        <div id="logo"></div>
                    </td>
                    <td width="50%" align="right">
                        <div id="albumname"></div>
                    </td>
                </tr>
            </table>
            <table class="blanktable" style="position:relative; z-index:5">
    	      <tr>
        	          <td valign="top" style="padding-left:15px" width="60%">
            	      <div class="contentdiv">&nbsp;</div>
                   </td>
                   <td width="40%">
            	     <div id="biographyphoto"></div>
                   </td>
               </tr>
            </table>
        </td>
        <td class="right">&nbsp;</td>
      </tr>
      <tr>
        <td height="48px" class="leftbottomcorner">&nbsp;</td>
        <td class="bottom">&nbsp;</td>
        <td class="rightbottomcorner">&nbsp;</td>
      </tr>
      <tr>
        <td class="solidbottom">&nbsp;</td>
        <td class="solidbottom">
            <div id="footernote">
                <p>&nbsp;</p>
            </div>
        </td>
        <td class="solidbottom">&nbsp;</td>
      </tr>
    </table>

and CSS

#maintable {
	border:none;
	border-collapse:collapse;
	width:100%;
	height:100%;
	margin:0 auto;
	position:relative;
	z-index:10;
}
#maintable tr {
	border:none;
	border-collapse:collapse;
}
#maintable td {
	border:none;
	border-collapse:collapse;
	text-align:center;
}
#maintable td.lefttopcorner {
	background-image:url(../Images/lefttopcorner.gif);
	background-repeat:no-repeat;
}
#maintable td.righttopcorner {
	background-image:url(../Images/righttopcorner.gif);
	background-repeat:no-repeat;
}
#maintable td.leftbottomcorner {
	background-image:url(../Images/leftbottomcorner.gif);
	background-repeat:no-repeat;
}
#maintable td.rightbottomcorner {
	background-image:url(../Images/rightbottomcorner.gif);
	background-repeat:no-repeat;
}
#maintable td.top {
	background-image:url(../Images/Top.gif);
	background-repeat:repeat-x;
}
#maintable td.bottom {
	background-image:url(../Images/Bottom.gif);
	background-repeat:repeat-x;
}
#maintable td.left {
	background-image:url(../Images/Left.gif);
	background-repeat:repeat-y;
}
#maintable td.right {
	background-image:url(../Images/Right.gif);
	background-repeat:repeat-y;
}
#maintable td.solidbottom {
	background-color:#992c30;
}
#biographyphoto {
	background-image:url(../Images/BiographyBackground.png);
	background-repeat:no-repeat;
	background-position:bottom;
	float:right;
	width:599px;
	height:600px;
	margin-bottom:-30px;
	margin-right:-20px;
	position:relative;
	z-index:1;
}
  • 2 Contributors
  • 2 Replies
  • 180 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by MJ Pieterse

Dani AI

Generated

Short summary: the visual glitch was a stacking-context/z-index clash — the biography block was rendering above the table’s decorative cells. ’s approach (make the frame cells become positioned elements and give them a higher stacking order) is the correct practical fix; it forces those table cells to participate in z-ordering so the frame paints on top of the biography div, which is why saw the problem disappear.

Why it happens: z-index only affects positioned elements (position not static). Browsers build stacking contexts; z-index values are compared inside the same stacking context. A positioned child can easily overlap sibling cells that are not positioned, so making the frame cells positioned (and giving them a higher z-index) puts those cells into the stacking flow above the photo.

Quick checklist and tips:

  • Ensure the element that must sit on top is positioned (for example position: relative) and has a larger z-index than competing siblings in the same stacking context.
  • If changing a child’s z-index has no effect, look for an intervening stacking context (a positioned ancestor, transform/opacity, etc.) and adjust the ancestor instead or move the overlay out of that context.
  • Avoid negative z-index on content that should remain interactive; negative values can push content behind the page background in some situations.
  • For older browsers (old IE versions) explicitly position the table cells used for frame pieces to avoid rendering quirks.

Alternative (modern) approach: separate decoration from content by using a wrapper and a single decorative layer (pseudo-element) above content — easier to control than many positioned table cells. Example pattern:

.page-wrap { position: relative; }

.page-wrap::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('images/frame.png') no-repeat center/contain;
  z-index: 50;
  pointer-events: none;
}

#biographyphoto { position: relative; z-index: 10; }

This keeps the decorative frame in one place and prevents per-cell stacking surprises while remaining robust and easier to maintain than deep table-based hacks.

Recommended Answers

All 2 Replies

Member Avatar for ko ko

Add 'position: relative' and 'z-index' property to the table cell greater than 'biographyphoto' z-index property. The example below has 10 for table cell 'z-index'.

#maintable td {
	position: relative;
	z-index: 10;
}
Member Avatar for MJ Pieterse

OMW!! hahahahaha!!!! that is perfect!!! thank you soooo much!!!

I dub myself an idiot and you a genius!!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.