Help With Layers

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!

This is invalid:
<div style="position: relative; width: 909; height: 150;

You can only omit a qualifier when the size is 0.
So change the above to:
<div style="position: relative; width: 909px; height: 150px;

Also change it all other places where you have omitted it (there are
several).
See if that fixes it.

Also the attribute imagesrc is invalid for the UL tag. Browsers other
than IE will not show it. Use CSS instead.

Regards Jens Peter Karlsen.


On Thu, 24 Apr 2008 14:53:00 -0700, OneLily
<OneLily@discussions.microsoft.com> 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!

You have a javascript snippet that is suppose to rotate three images in that
space and those images are 150px in height.

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

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!