• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

[HTML] Firefox/IE oddity workaround

#1
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:

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

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

I'm sorry Hal...
Political User
#2
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 :))
 
#4
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:

Code:
#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:

Code:
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.
 

Members online

No members online now.

Latest posts

Latest profile posts

Hello, is there anybody in there? Just nod if you can hear me ...
Xie
What a long strange trip it's been. =)

Forum statistics

Threads
61,961
Messages
673,239
Members
89,013
Latest member
Pdawgintown