After playing around with the HTML, I made the one div absolutely postioned
and it seems to bring everything together. See if this works (copy and paste
everything from the <html> to I WANT TO... and rename the file so you can see
if it meets your needs:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IPPFA</title>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0"
marginwidth="0" marginheight="0" bgcolor="#9A9A9A">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td background="images/background_header.gif">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="1026">
<tr>
<td>
<img border="0" src="images/header.gif" width="1026" height="55"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="1026">
<tr>
<td>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="909">
<tr>
<td>
<img border="0" src="images/logo.gif" width="909"
height="59"></td>
</tr>
</table>
</div>
<div align="center">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="909">
<tr>
<td>
<!--***Made this absolute***-->
<div style="position: absolute; width: 909px; height: 100px; z-index: 100;
left: 154px; top: 124px" id="layer1">
<table border="0" cellpadding="0" cellspacing="0" width="909px"
height="140px">
<tr>
<td width="152">
</td>
<td valign="top" bgcolor="#42A0D7" width="308">
<div align="center" style="position: relative; width:
308px; height:100px; z-index: 0; left: 0px; top: -10px" id="layer2">
<table border="0" cellpadding="5px"
cellspacing="0" width="100%">
<tr>
<td bgcolor="#418DC0" height="50"
valign="bottom" style="border-bottom-style: dotted; border-bottom-width: 1px">
<p style="margin-left: 10px"><b>
<font color="#FFFFFF"
face="Arial">
I WANT TO...
"OneLily" wrote:
> Okay - so I'm trying to put in a layer in front page - I've never used the FP
> layers before, and so I've been reading some tutorials to see how to
> accomplish this, and I've made much progress already.
>
> However, on the page I'm setting up, I can get the layer almost exactly
> where I want it, but it seems to want to put some extra space above it that I
> can't quite figure out how to get rid of.
>
> If you look at http://ippfa.onelily.com/ - you'll see what I"m talking
> about. There is a random image that serves as the background in the table
> directly below the logo/text table at the top. It's 909 x 150. On top of it
> I have put in a layer that is also 909x150 and there is a table inside that
> layer that has a blue background w/ text ... " I want to"... with some
> options below (which will be clickable when I'm done).
>
> The problem as you'll see is the space that now shows up above that table
> and layer - it's 150px tall. The code I have is...
>
> <div style="position: relative; width: 909; height: 150; z-index: 1; left:
> 0px; top: 150px" id="layer1">
>
> If I change the top:150px then the layer moves up, but the table w/ the
> random image stays in that same space.
>
> It's very confuing!!! Please help!