Dreamweaver - Strange layer behavior in FF vs IE

Author

Strange layer behavior in FF vs IE

gtratter

2004-08-31, 7:15 pm

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


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


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

Osgood

2004-08-31, 7:15 pm

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