I encountered a strange situation with a website I am currently working on.
This is the piece of code in question:

<!-- InstanceBeginEditable name="masthead" -->
<div id="masthead" style="position:absolute; width:240px; height:94px;
z-index:1; left: 94px;"><img src="../../images/masthead_msg.gif" width="240"
height="94" border="0"></div>
<!-- InstanceEndEditable -->

The idea is that the masthead layer will contain a different image based upo
n
the variable page_name. Before I get to that I discovered a strange display
behavior.

When I view the page in IE everything is perfectly in place, when viewed in 
FF
the image stays perfeclty positioned on the Y-axis but flops south on its
X-axis.

This is the link to the test file in case you would like to see what I am
talking about and/or to view the whole source code.

http://www.gjtcentral.com/HTML/Test/test.htm

If you have a moment please have a look, and as always, thank you for your
time!

A couple of things I randomly spotted: You have a redundant } after this
style. Remove it, although this is not the cause of the issue.



#sidecontainer {
width: 200px;
border: 1px solid #000000;
padding: 1px;
}
}

To sort the issue with the image in the header going adrift:

Add position:relative to this style:


#header {
background-color: #000000;
color: #CCCCCC;
background-image:  none;
postion: relative;
}

The real issue is you havent given the masthead <div> a top position
attribute. I've done this below, top: 0px;

<div id="masthead" style="position:absolute; width:240px; height:94px;
z-index:1; top: 0px; left: 94px;"><img src="masthead_msg.gif"
width="240" height="94" border="0"></div>


Giving the masthead <div> a top position of 0 would have sorted the
problem out. However you should not put an absolutely positoned <div>
inside a container unless its position is set to relative. That's why I
added the position to your 'header' css.








gtratter wrote:

> I encountered a strange situation with a website I am currently working on
.
> This is the piece of code in question:
>
>  <!-- InstanceBeginEditable name="masthead" -->
>  <div id="masthead" style="position:absolute; width:240px; height:94px;
> z-index:1; left: 94px;"><img src="../../images/masthead_msg.gif" width="24
0"
> height="94" border="0"></div>
>  <!-- InstanceEndEditable -->
>
>  The idea is that the masthead layer will contain a different image based 
upon
> the variable page_name. Before I get to that I discovered a strange displa
y
> behavior.
>
>  When I view the page in IE everything is perfectly in place, when viewed 
in FF
> the image stays perfeclty positioned on the Y-axis but flops south on its
> X-axis.
>
>  This is the link to the test file in case you would like to see what I am
> talking about and/or to view the whole source code.
>
>  http://www.gjtcentral.com/HTML/Test/test.htm
>
>  If you have a moment please have a look, and as always, thank you for you
r
> time!
>