[HTML] Firefox/IE oddity workaround

[NerdUprising]

I'm not sure, but I think the way Firefox (and I'm assuming other gecko-based browsers as well) reads the page is having a rather naughty effect on the way this particular code is displayed: It's essentially a table inside of a layer, the topmost and bottommost cells stretch to the top and bottom of the screen, respectively - that works fine - but the images inside won't stretch to fill them.
It works fine horizontally:

<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:850px; z-index:1">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr> 
      <td width="*"><img src="images/topLeft.jpg" width="100%" height="50"></td>
      <td width="800px"><img src="images/top.jpg" width="800" height="50"></td>
      <td width="*"><img src="images/topRight.jpg" width="100%" height="50"></td>
    </tr>
    <tr> 
      <td><img src="images/bottomLeft.jpg" width="100%" height="450"></td>
      <td></td>
      <td><img src="images/bottomRight.jpg" width="100%" height="450"></td>
    </tr>
  </table>
</div>

splendid. But a vertical version of the same thing produces odd, inconsistant results in firefox - although it works perfectly in IE (go figure!)

<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:1"> 
  <div align="center">
    <table height="100%" width="300px" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="*"><img src="images/topStretch.jpg" width="300" height="100%" /></td>
      </tr>
      <tr>
        <td height="353px"></td>
      </tr>
      <tr>
        <td height="*"><img src="images/bottomStretch.jpg" width="300" height="100%" /></td>
      </tr>
    </table>
  </div>
</div>

one thing I've tried is using a 300x1px image as the cell's backgrounds, which tiles - but it doesn't look as classy (works, though)

if any errors in code could be pointed out, or workarounds suggested, that would be great. Thanks

 

[Khayman]

Could we have the graphics so we know what the page is suppsoed to look like? or is it online?

(we = me, I work visualy )

 

[NerdUprising]

weee, I hosted them

Working Horizontal Layout (the empty space in the center is a flash interface)

Non-working Vertical Layout (works fine in Internet Explorer, but not in Firefox)

thanks for your help, sir

 

[Blue Jack]

I had a simular problem, but it was with my footer. I was using an all div design ( no tables) and IE had a hard time aligning my footer to the bottom. Might be the same issue you are running into except for the right margin.

I managed a fix through CSS.

What I did is made a div to enclose everything within the page. I called it page-container with css:

#page-container
		{
		background: #EAECEF; 
		position: relative; 
		min-height: 100%; /* For Modern Browsers */ 
		height: auto; /* For Modern Browsers */ 
		height: 100%; /* For IE */ 
		padding-bottom: 50px;
		width: 100%;
		}

For the body I used:

html, body
{
	margin:0px 0px 0px 0px;
	padding:0px;
	height: 100%;
	
}

Maybe try a width 100% in the body?

Then I placed my content divs within the page container.