CSS - Z-index Not Working Properly?

gday

i have a bunch of tables that are only to be shown based on a javascript call, but for some reason, firefox is rendering the space of the table, where as IE 7 isn't..

eg.
<table style"display: none;"></table>

with a whole bunch of rows in it.. the webpage still loads blank space everywhere, rather than just empty space

thoughts?

I just tested my site with IE6 and it's very broken (although it's valid HTML 4.01 strict according to w3.org). Main problem I am having is the links. I have a left navigation box, and a list of links inside it, the links display is set to 'block'. When the user's cursor is on the same line as the link, I want the whole line to change BG color and be clickable. This works now with FF perfectly. In IE your mouse has to be ON the actual link for the background to change color, and there is space on the left of the link block.

Here is an example (not my site):
http://rmideas.com/menus/menutest/NavToBar.htm
The top right menu works like I want it to in FF, but in IE your cursor has to be on 'home'.

How can I get this to work properly in both FF and IE?

and I have overlapping problems, some code overlaps in one browser but looks fine in another.

I'm trying to get a dropdown menu to work properly (with IE, it works fine in FF) in the sidebar, thus vertically not horizontally. This dropdown menu has worked fine before, but only when using it horizontally, across the top.

Basically, it prevents the user from clicking on the submenu options (I'm thinking it has something to do with z-index), but the parent menu options work fine. You can see the issue here with IE6 or 7:

http://www.groundedgroup.com/clients/NWR/

Here's the respective CSS:

Code:

/* Sidebar / Menu */

#sidebar {
	float: left;
	top: 16px;
	left: 2px;
	display: block;
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color:#FFFFFF;
	letter-spacing: 1px;
	text-align:right;
	z-index: 3;
}

#sidebar ul {
	list-style-type: none;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	z-index: 4;
}

#sidebar li {
	display: block;
	float: left;
	min-height: 20px;
	position: relative;
	text-align: left;
	padding: 5px 20px 4px 16px;
	margin: 0px 0px 0px 0px;
}

#sidebar h2 {
	font-size: 1.2em;
	padding: 0;
	margin: 0;
}

#sidebar li ul {
	width: 150px;
	height: auto;
	top: 100%;
	left: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	letter-spacing: 3px;
}

#sidebar li.LargeMenu ul {
	width: 200px;
	height: auto;
	top: 100%;
	left: 0px;
}

#sidebar li ul li {
	text-align: left;
	width: 118px;	
	height: auto;
	min-height: auto;
	display: block;
}

#sidebar li.LargeMenu ul li {
	text-align: left;
	width: 198px;	
	height: auto;
	min-height: auto;
	display: block;
}

#sidebar a {
	text-decoration: none;
	letter-spacing: 1px;
	}

#sidebar li li ul {
	top: 0;
	left: 0;
}

#sidebar li li:hover ul {
	left: 150px;
}

/* initialy hide all sub sidemenus */
#sidebar ul ul,
#sidebar ul li:hover ul ul,
#sidebar ul ul li:hover ul ul,
#sidebar ul ul ul li:hover ul ul,
#sidebar ul ul ul ul li:hover ul ul {
	position: absolute;
	display:none;
}

/* display them on hover */
#sidebar li:hover ul,
#sidebar ul li:hover ul,
#sidebar ul ul li:hover ul,
#sidebar ul ul ul li:hover ul,
#sidebar ul ul ul ul li:hover ul,
#sidebar ul ul ul ul ul li:hover ul {
 	 display: block;
}

#sidebar #PhpWebcontent {
	display:none;
}	

/* define the consecutive colors */

#sidebar {
	color: #FFFFFF;
}

#sidebar ul{
	-moz-opacity: 1; /* for mozilla */
	opacity: 1; /* for safari */
	khtml-opacity: 1/* for konquerer and older safari */
}

#feeds li {
  background: url(images/feed.png) top left no-repeat;
  padding-left: 18px;
}

#sidebar h2 {
	color: #FFFFFF;
}

#sidebar a {
	color: #ffffff;
	letter-spacing: 1px;
	}

#sidebar ul li:hover {
	background: #333333;
}

#sidebar ul li ul {

}

#sidebar ul li ul li {
	background: #333333;
}

#sidebar ul li ul li:hover {
	background: #666666;
}

#sidebar ul li ul ul li{
	background: #666666;
	
}

#sidebar ul li ul ul li:hover {
	background: #999999;
}
/* End Sidebar / Menu */

Any ideas on how to make this work properly when used on the side?

Thanks in advance.

http://www.concrete-creative.com/test/recipe.html

When you hover over PRINT RECIPE, the text of the link below shows through the popup menu... I have tried everything I can think of in terms of adding z-index to different elements and I just can't get it working on IE6 (works fine elsewhere) What am I missing?

The HTML is he
Code:

<div id="navig2"><table width="150" border="0" cellspacing="0">
										<tr>
											<td>
											<ul id="pop-out-nav2">
												<li><a href="#">PRINT RECIPE</a>
													<ul>
														<li><a href="javascript:openAWindowRecipe3x5('print_recipe3x5.html','newWin1',420,700,1)"><img src="images/spacer.gif" alt="" width="40" height="1" border="0">print 3x5</a></li>
														<li><a href="javascript:openAWindowRecipe4x6('print_recipe4x6.html','newWin1',493,700,1)"><img src="images/spacer.gif" alt="" width="40" height="1" border="0">print 4x6</a></li>
														<li class="last"><a href="javascript:openAWindowRecipeFull('print_recipefull.html','newWin1',650,700,1)"><img src="images/spacer.gif" alt="" width="30" height="1" border="0">print full page</a></li>

													</ul>
												</li>
												<li><a href="recipecomments.html">VIEW COMMENTS (0)</a></li>
												<li><a href="javascript:openAWindowEmails('add_comment.html','newWin1',420,220,1)">ADD A COMMENT</a></li>
												<li><a href="javascript:openAWindowEmails('add_personalnote.html','newWin1',420,220,1)">ADD A PERSONAL NOTE</a></li><!-- would say EDIT PERSONAL NOTE if you already have one there -->
												<li><a href="#">FLAG RECIPE</a>
													<ul>

														<li><a href="#" class="radio"><input type="radio" name="flag" value="red" selected><img src="images/icon_flag-red_sm.jpg" alt="" width="13" height="13" border="0"><input type="radio" name="flag" value="green"><img src="images/icon_flag-green_sm.jpg" alt="" width="13" height="13" border="0"><input type="radio" name="flag" value="yellow"><img src="images/icon_flag-yellow_sm.jpg" alt="" width="13" height="13" border="0"><br><input type="radio" name="flag" value="none"><img src="images/no-flag.gif" alt="" width="30" height="13" border="0"></a></li>
														<li class="last"><a href="javascript:openAWindowHelp('help_flag.html','newWin1',430,380,1)"><img src="images/spacer.gif" alt="" width="45" height="1" border="0">help?</a></li>
													</ul>
												</li>
												</li>
											</ul>
											</td>
										</tr>
									</table>	
									</div>	

And the CSS code:
Code:

/* RIGHT HAND NAV BOX */
#navig2 {
	float: right;
	display: block;
	width: 150px;
	/* height: 32px; */
	border : 2px dashed #b0b080;
	background-color : #d1d9d1;
	z-index : 0;
}
#pop-out-nav2 {
	z-index : 3;
}
	
#navig2 ul {
	float: left;
	margin: 0 0 0 0;
	padding: 0;
	list-style: none;
	font: 9px verdana, arial, sans-serif;
	font-weight: bold;
}

#navig2 ul li {
	float: left;
	position: relative;
	text-decoration: none;
	margin: 0;
	padding: 0;
	border-bottom: 0;
}

#navig2 ul li a {
	display: block;
	text-decoration: none;
	font-weight: bold;
	padding: 8px;
	color: #666633;
	}

#navig2 ul li a:hover {
	text-decoration: underline;
	font-weight: bold;
	padding: 8px;
	color: #666633;
	}

#navig2 ul li.active {
	padding: 8px;
	background-color : #d1d9d1;
	font-weight: bold;
	color: #666633;
}

#navig2 li ul {
	position: absolute;
	float: right;
	left: 0;
	display: none;
	width: 110px;
	z-index:100;

	}

/* subnav padding & size */
#navig2 li ul li a {
	position: relative;
	width: 120px;
	padding: 3px;
}

#navig2 li:hover ul, #navig2 li.over ul {
	display: block;
	left: 50;
	top : 20;
}


/* topnav color when dropdown is showing */
#navig2 li:hover a, #navig2 li.over a, #navig2 li ul li:hover a, #navig2 li ul li.over a {
	background-color : #d1d9d1;
	color: #666633;
	}

/* subnav default link */
#navig2 li:hover ul a, #navig2 li.over ul a {
	font-family: verdana, arial, sans-serif;
	font-size: 9px;
	padding: 3px;
	font-weight: normal;
	background-color: #FFFFFF;
	color: #666633;
	border-top : 1px solid #b0b080;
	border-left : 1px solid #b0b080;
	border-right : 1px solid #b0b080;
	text-align : left;
}

#navig2 ul li ul li.last a {
	border-bottom : 1px solid #b0b080;
}

/* subnav default link under active */
#navig2 li.active:hover ul a, #navig2 li.active ul a {
	background-color: #FFFFFF;
	color: #666633;
	padding: 3px;
	font-weight: normal;
	text-decoration: none;
}

/* subnav hover link */
#navig2 li:hover ul li:hover a, #navig2 li ul li a:hover {
	/* background-image: url(images/nav_bg_transp.png); */
	padding: 3px;
	background-color: #FFFFFF;
	color: #666633;
	font-weight: normal;
	text-decoration: underline;
}
/* subnav hover link under active */
#navig2 li.active:hover ul li:hover a, #navig2 li.active ul li a:hover {
	/* background-image: url(images/nav_bg_transp.png); */
	padding: 3px;
	background-color: #FFFFFF;
	color: #666633;
	font-weight: normal;
	text-decoration: underline;
}

In safari and IE it works perfect. You can see the two gifs behind the quote text, but in netscape and firefox you cannot. I tried many things and still cannot get this to work.

Can anyone help?

edit: i guess i'm not allowed to post urls but the site is at

nscadesign . ca / iidf2007 / buckley

Hi, I have a site where the main navigation is supposed to stay above the body in a static position. The body should scroll beneath the navigation, when the page is scrolled. In the body, I have a flash video that is embedded with swf object code.
The video unfortunately appears above the main navigation when the page is scrolled.

You can see an examplehere


My code looks like this for the <div> that holds the video: Code:

<div id="header_w_flash" style="margin-top:132px; z-index:2;">
<div>	
	<object id="header_w_flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="970" height="160">
	 	<param name="movie" value="flash/UC_header1.swf" /> 
			<!--#include file = "includes/uc.inc"-->
    </object>
</div>  
<!-- end #header_w_flash --></div>

And my CSS for the static header, which holds the navigation, looks like this: Code:

#header_static{
z-index:999;
position:fixed;
top:0;
height:121px;
width:980px;
background:#ffffff;
}

How can I get the embedded flash video to appear below the header? I'm a bit puzzled as to how to resolve this.

thanks

I have 3 div's in a container, all with the same top and left coordinates width and hieght vary according to content,

z-index's 1 & 2 show and hide as designed at the proper coordinates, z-index 3 shows below and out side of the container?

I have attached a doc with screen shots

layer definitions:
Code:

#projects{
    position:absolute;
    top: 400;
    left: 600;
    margin-left:400px;
    margin-top:30px;
    padding-top:30px;
    padding: 10px;
    height: auto;
    width: 300px;
    z-index: 1;
    visibility: visible;
}
#DBApps{
     position:absoute;
     top: 400;
     left: 300;
     margin-left:400px;
     margin-top:30px;
     padding-top:30px;
     padding: 10px;
     height: auto;
     width: 400px;
     z-index: 2;
     visibility: hidden;

}
#resources{
     position: absolute;
     top: -200;
     left: 300;
     margin-left:400px;
     margin-top:30px;
     padding-top:30px;
     padding: 10px;
     height: auto;
     width: 300px;
     z-index:3;
     visibility: hidden;

}

Any and all suggestions would be greatly appreciated.

I have a map on an html page.

If you mouseover "Savannah" the color of "Savannah" will change. The same will happen for "Broad". The problem is that the color doesn't change on "Broad" until you mouseover the top right part of "Broad". (Savannah and Broad are the only two that are active at this time.)

You have seen this all over the web. I don't want to use Javascript. I want to do this using CSS.

I do not have something quite right in my CSS. I have checked and checked and nothing stands out. I have looked at examples of Stu Nichols code similar to this, but I can't see anything.

I thought it was a problem with the z-index, but nothing happens when I change the numbers.

What am I doing wrong?

Gayle


CSS code:

PHP Code:
#imap {
    display: block;
    width: 801px;
    height: 677px;
    background: url(Images/RiverBasinMap_DENR.jpg) 0 0 no-repeat;
    position: relative;
    /*margin : 0 auto 2em auto; */
margin: 0 0;
    background-image: url(Images/RiverBasinMap_DENR.jpg);
} 

#imap a { 
color: #000; 
font-family: arial, sans-serif; 
font-size: 1.2em; 
font-weight: bold; 
text-transform: uppercase; 
} 
a#title, a#title:visited { 
display: block; 
width: 801px; 
height: 0; 
padding-top : 260px; 
position : absolute; 
left: 0; 
top: 0; 
cursor: default; 
text-decoration: none; 
} 
* html a#title { 
height: 677px; 
height: 0; 
} 
#imap a#title:hover { 
background: transparent url(Images/RiverBasinMap_DENR.jpg) 0 0 no-repeat; 
overflow: visible; 
color: #c00; 
z-index: 10;
} 

/*BROAD*/

a#broad {
    display:block;
    width:141px;
    height:159px;
/*padding-top : 120px;*/
    overflow:hidden;
    position: absolute;
    left: 285px;
    top: 295px;
    overflow: hidden;
} 

* html a#broad { 
    height: 159px; 
    height: 0; 
} 

a#broad:hover { 
    background: transparent url(images/Broad_Over.gif) no-repeat 0 0; 
    overflow: visible; 
    z-index: 21;
}

/*SAVANNAH*/

a#savannah {
    display: block;
    width: 181px;
    height: 313px;
/*<!--    padding-top : 120px;-->*/
    overflow: hidden;
    position: absolute;
    left: 226px;
    top: 318px;
    overflow: hidden;
} 

* html a#savannah  { 
    height: 313px; 
    height: 0; 
}

a#savannah:hover { 
    background: transparent url(images/Savannah_Over.gif) no-repeat 0 0; 
    overflow: visible; 
    z-index: 20;
} 






HTML code:

PHP Code:
<body>
<dl id="imap" name="imap">
    <dt><a id="map" href="#nogo">Test Map</a></dt>
        <dd><a href="#" name="broad" title="Broad" id="broad"></a></dd>
        <dd><a href="#" name="savannah" title="Savannah" id="savannah"></a></dd>
</dl>
</body> 

Something I think I'm not doing.

I'm using something called niftyCorners and thought that was what was cauing the problem, but now I'm not so sure. I am trying to have this appear on a webpage for the reader to use:

<script language="JavaScript">
<!--
alert("Sample JavaScript alert box 1.");
alert("Sample JavaScript alert box 2");
alert("There you go, alert boxes \nTa da, and one with a new line!");
// -->
</script>

Now, I need to have the <pre> tag nested inside a div tag, but this doesn't validate. So, I nested the code tag inside the pre tag and it breaks my layout in IE 6.0.

Why am I nesting at all? niftyCorners doesn't work very well when you put padding or margin on any div you want to have rounded corners. So, I'm trying to put a div round my pre tag, so I can round the div and I can use the pre tag to control margin/padding.

If anyone has any ideas, I'd appreciate it.

Please help!

I've got two rounded boxes one is contained in the other. If the innerbox grows, the outer box should grow with it. Firefox does a great job and grows with it but IE7 doesn't grow, any help would be greatly appreciated.

here's the CSS i've used for IE:
Code:

/* first rounded box */
/* images are set in the index.php */
 /* height and width details */
.rbtop div, .rbtop, .rbbot div, .rbbot {
	width: 100%;
	height: 14px;
	font-size: 1px;
}
/*.rbroundbox { width: 60em; margin: auto; background-color: #37a5f0;} */
.rbroundbox { position: absolute; top: 15px; width: 800px; margin: 5em 0 0 2em; background-color: #37a5f0; } 
.rbcontent  { margin: 0 14px; min-height: 570px; height: 100%; }
/* EOF first rounded box */

/* second rounded box */
/* images are set in the index.php */
/* height and width details */
.rbtop2 div, .rbtop2, .rbbot2 div, .rbbot2 {
	width: 100%;
	height: 24px;
	font-size: 1px;
}
/*.rbroundbox { width: 60em; margin: auto; }*/
.rbroundbox2 { position: absolute; top: 5px; width: 577px; margin: 9.5em 0 0 12em; background-color: #9cd5f0;} 
.rbcontent2  { margin: 0 14px; min-height: 375px; }
/* EOF second rounded box */

here's the html i've used:
Code:

<body>
<div class="rbroundbox">
    <div class="rbtop"><div></div></div>
    <div class="rbcontent">
      <div class="rbroundbox2">
            <div class="rbtop2"><div></div></div>
            <div class="rbcontent2">
               <p><?=$content?></p>
            </div><!-- /rbcontent2 -->
      		<div class="rbbot2"><div></div></div>
      </div><!-- /rbroundbox2 -->      
    </div><!-- /rbcontent -->
    <div class="rbbot"><div></div></div>
</div>
<!-- /rbroundbox -->

</body>

Alright.. I'm having a hard time trying to get this to work in the various browsers. Essentially what I'm doing is creating a navigational bar at the top, with one of the links containing a pure CSS drop down menu. Seems to work fine (in IE 6 and FF... need to test in IE7, NS, and Opera. I don't have IE7, so can't test there).
I have placed an image above the navigational bar as well. I'm trying to get the navbar centered on the page (can't seem to get it centered. I'm also trying to make the width of the navbar, say 700px or 80% or whatever.. but as long as it's centered in all the browsers...

Any ideas on making this right, or even cleaning up the code?

Thanks.

Here's the code for the HTML:
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" xml:lang="en">

<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="menu5.css" />
<style>
body {background-color:#fdeadc;
		  text-align:center;
        .container {
background-image:url('images/navbar.jpg');
        }

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}			 				 			
</style>

</head>
<body>
<div class="logo">
  <img src="images/logo.jpg">
</div>
<div class="container clearfix">
<div class="navbar">
<ul class="menu5">
	<li><a href="#">Home</a></li>
	<li><a href="#">Company</a></li>
	<li><a class="drop" href="#">Services<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
		<li><a href="#">Why Our Service</a></li>
		<li><a href="#">Why Our Site</a></li>
		<li><a href="#">How does it work</a></li>
		<li><a href="#">Message Analysis</a></li>
		<li><a href="#">Message Handling</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="#">Trial</a></li>
	<li><a href="#">Support</a></li>
	<li><a href="#">Client Login</a></li>
	<li><a href="#">Partners</a></li>
	<li><a href="#">Contact Us</a></li>	
</ul>
</div>
</div>
</body>
</html>

CSS Code:
Code:

/* commom style for all browsers */

.menu5 {
width:625px; margin:auto; text-align:left; position:relative; padding:0; list-style-type:none;
}
.menu5 ul {
padding:0; margin:0; list-style-type:none; /* for Firefox */
}
.menu5 li {
float:left; position:relative; 
}
.menu5 li a, .menu5 li a:visited {
text-align: left; display:block; text-decoration:none; float:left; padding-right:1em; line-height:2.5em; height:2.5em; color:#dd0b14; 
}
.menu5 li ul {
visibility:hidden; position:absolute; left:0; height:0; overflow:hidden;
}
.menu5 table {
margin:-1px; border-collapse:collapse; /* font size for IE5.5 */
}

/* fist line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
.menu5 li:hover a,
.menu5 li a:hover {
text-decoration:underline; border:0; color:#dd0b14;
}
.menu5 li:hover ul,
.menu5 li a:hover ul {
visibility:visible; height:auto; background:#fff; border:1px solid #ddd; left:0; top:2.5em; overflow:visible;
}
.menu5 li:hover ul li a,
.menu5 li a:hover ul li a {
display:block; font-weight:normal; background:transparent; text-decoration:none; height:auto; line-height:1em; padding:0.5em;
}
* html .menu5 li a:hover ul li a {
width:10em; w\idth:9em; /* hack for IE5.5 */
}
.menu5 li:hover ul li ul,
.menu5 li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; overflow:hidden;
}
.menu5 li:hover ul li a:hover,
.menu5 li a:hover ul li a:hover {
text-decoration:underline;
}
.menu5 li:hover ul li:hover ul,
.menu5 li a:hover ul li a:hover ul {
visibility:visible; border:1px solid #ddd; height:auto; background:#fff;
} 
.menu5 li:hover ul li:hover ul li a,
.menu5 li a:hover ul li a:hover ul li a {
display:block; height:auto;
}
.menu5 li:hover ul li:hover ul li:hover a,
.menu5 li a:hover ul li a:hover ul li a:hover {
text-decoration:underline;
}

I am working on this website babeside dot be
Everything is going as I want it in all browsers, except IE.
When opening the website in IE, and selecting a babe, the babe-part is shown waaaaay underneath all the other parts of the site.
Can anyone help me how to fix this?

Hi there,
I'm trying to get the images from each page to be centered in their td's, which appears to work fine in FF, but not in IE. Any help is greatly appreciated.

here's the css;
Code:

.borders {
	border: 1px solid #666666;
	text-align:left;
	font-family:Century Gothic, Arial, sans-serif;
	font-size:11px;
	align:center;
}

}
.text {
	font-family:Century Gothic, Arial, sans-serif;
	font-size: 11px;
	color: #333333;
	text-align:center;
	
}

}
.listtext {
	font-family:Century Gothic, Arial, sans-serif;
	font-size: 11px;
	color: #333333;
	text-align:left;
	border: 1px solid #666666;
}


table.menu {
border:1px solid #999999;
background:#CCCCCC;
align:center;
}
table.menu a:link, table.menu a:visited {
display:block;
font-family:Century Gothic, Arial, sans-serif;
font-size:12px;
line-height:16px;
color:#006600;
text-decoration:none;
padding: 2px 2px;

}
table.menu a:active, table.menu a:hover {
color:#CCCCCC;
background:#006600;
}


table.menu a {
	width:144px;
	display:block;
	font-family:Century Gothic, Arial, sans-serif;
	font-size:12px;
	line-height:16px;
	color:#006600;
	text-decoration:none;
	padding: 2px 2px;
 } 

.GPlink {
font-famil:Century Gothic, Arial, sans-serif;
font-size:10px;
color:#000000;
}
.GPlink a {
font-family:Century Gothic, Arial, sans-serif;
font-size:10px;
align:center;
color:#333333;
}

.pagetitletext {
font-family:Century Gothic, Arial, sans-serif;
font-size:13px;
align:left;
color:#006600;
font-weight:bold;
}

.piccenterind 
{width: 212px; margin-left: auto; margin-right: auto;}

.piccentercont
{width: 322; margin-left: auto; margin-right: auto;}

and the html;

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Kyrtsakas Law - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Kyrtsakas Law Office - Title Insurance from an experienced Real Estate Lawyer offers the best protection for your investment">
<meta name="keywords" content="Kyrtsakas, Law, Law Office, Lawyer, real estate, estate, will, title, Windsor, purchases, mortgages, power of attorney, attorney, CAW">
<link href="kyrtsakas_styles.css" rel="stylesheet" type="text/css">
</head>

<body topmargin="0" bgcolor="#666666">
	
	<table width="640" align="center" cellpadding="2" cellspacing="2" bgcolor="#CCCCCC" class="menu">
  		<tr valign="top">
			
    		<td align="center" width="640" colspan="6"> 
					<img src="images/Kyrtsakas_Header.jpg" alt="Kyrtsakas Law Office" name="header" id="header"> 
   			</td>
		</tr>
		<tr valign="top">
			<td class="borders" width="106" colspan="1">
				&nbsp;
			</td>
			<td class="borders" width="106" colspan="1">
				<a href="http://www.kyrtsakaslaw.com">Home</a>
			</td>
			<td class="borders" width="106" colspan="1">
				<a href="http://www.kyrtsakaslaw.com/profile.htm">Profile</a>
			</td>
			<td class="borders" width="106" colspan="1">
				<a href="http://www.kyrtsakaslaw.com/tools.htm">Online Tools</a>
			</td>
			<td class="borders" width="106" colspan="1">
				<a href="http://www.kyrtsakaslaw.com/contact.htm">Contact</a>
			</td>
			<td class="borders" width="106" colspan="1">
				&nbsp;
			</td>
		</tr>
		<tr valign="top">
			<td class="borders" width="106" colspan="1">
				&nbsp;
			</td>

			<td width="212" colspan="2" class="borders">
					<br>
					<div class="pagetitletext">Home</div><br>
					Welcome to <b>Kyrtsakas Law Office</b>.<br><br>
					<b>Christos Kyrtsakas</b>, <b>L L .B.</b><br><br>
					"For Nineteen years I have practiced law with an emphasis on <b>Real Estate</b>, including <b>Purchases, Sales, Mortgages</b>,
					and <b>Estate Law</b>, including <b>Wills, Powers of Attorney, and Probate</b>."<br><br> 
					Call me today at (519)-974-6303 for an appointment to discuss your particular needs.<br><br>
					CAW Plan Welcome!<br><br>
					"<i>Having a Lawyer Makes it Safer for You</i>!"<br><br>
			</td>
			
			<td colspan="2" width="212">
				<div class="piccenterind"><img src="images/Kyrtsakas_sign_sm.jpg"></div>
			</td>
			
    		<td class="borders" width="106" colspan="1">
				&nbsp;
			</td>

		</tr>
		<tr valign="top">
			<td class="borders" width="106" colspan="1">
				&nbsp;
			</td>

			<td class="borders" width="428" colspan="4">
				&nbsp;
			</td>
			
    		<td class="borders" width="106" colspan="1">
				&nbsp;
			</td>

		</tr>
	</table>
	<table bgcolor="#CCCCCC" align="center" width="640">
		<tr>
			<td align="center" class="GPlink" colspan="6">
				website designed & maintained by <a href="http://www.graphixplus.com" target="_blank">Graphix Plus Web Development</a> - 2005
			</td>						
		</tr>
	</table>
</body>
</html>

Hi. Any help would be appreciated. I am trying to cut down on my image sizes on my website: http://toptiertemplates.com, but i am having a few difficulties. I have this table which was created in photoshop which is off to the side. I would like to take just a slice of the table and repeat the image the full length of the table's original length. The page is written by placing everything with divs. I know how to set the image as a background and all and repeat it, however, when i do so, it replaces my website's background and just shows up as a white space.

So i am wondering if I have to use layers of some sort or anything else. I'd appreciate some help. Thanks.