[HTML] Firefox/IE oddity workaround

Discussion in 'Web Design & Coding' started by NerdUprising, Jul 27, 2005.

  1. NerdUprising

    NerdUprising [ Method ]

    Messages:
    736
    Location:
    Kamarupta
    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
     
  2. Khayman

    Khayman I'm sorry Hal... Political User Folding Team

    Messages:
    5,518
    Location:
    England
    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 :))
     
  3. NerdUprising

    NerdUprising [ Method ]

    Messages:
    736
    Location:
    Kamarupta
  4. Blue Jack

    Blue Jack OSNN Addict

    Messages:
    103
    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.