# Weird white space in IE, but not in Firefox



## josephpolk (Dec 25, 2004)

I'm working on a webpage and my client purchased a template for me to develop their site in. Everything is OK except for one weird thing that's going on in the content area.

If you look at this page in Firefox, it looks great. If you look at it in IE, it shows this big white space to the right of the main content -- and I cannot figure out why!

http://www159.pair.com/ngllc/new/services_bankruptcy_services.html

In the CSS there is a definition for the content -- .content{ width:700px; height:392px; background:#ffffff;}

If I remove the #ffffff, the white space goes away, but the whole content section goes black. I can't figure out why this background would be pushing the content area out so badly.

Thanks in advance to anyone that replies to this posting. I greatly, greatly appreciate it!


----------



## Kirok (Apr 22, 2006)

Probably caused by one of the validation errors (check here) if you fix them it'll go away


----------



## tomdkat (May 6, 2006)

josephpolk said:


> I can't figure out why this background would be pushing the content area out so badly.


It's not. The tables you're using for the page layout aren't behaving the way you think. I agree with Kirok, get the page to validate first and see how the tables behave.

Peace...


----------



## namenotfound (Apr 30, 2005)

You should widen the site a little, so all the buttons are on the same line


----------



## tomdkat (May 6, 2006)

namenotfound said:


> You should widen the site a little, so all the buttons are on the same line


Weird, I'm not seeing that at all in Firefox (FF 3.0.1 on Windows XP).

Anywho, I've worked up an XHTML 1.0 Strict validating version of the bankruptcy page and the white background issue persisted. There was something up with the table nesting that was causing issues. Attached are screenshots of the original with some borders enabled to see how things are laying out and of a new layout I came up which seems to work a little better.

Here is the HTML I came up with:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
   <meta content="text/html; charset=UTF-8" http-equiv="content-type" /> 
  <title>The Nottingham Group &gt; Services &gt;
Bankruptcy Services</title> 
   <link rel="stylesheet" href="bankrupt_files/style001.css" type="text/css" /> 
 </head> 
 <body> 
 <table style="background-color: black; width: 710px; height: 100%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0"> 
   <tbody> 
     <tr align="center"> 
       <td style="background-image: url(bankrupt_files/logo_wra.jpg); background-repeat: no-repeat; background-position: center top; height: 65px; text-align: center;"><img style="width: 520px; height: 50px;" alt="The Nottingham Group logo" src="bankrupt_files/title000.png" /></td> 
     </tr> 
     <tr align="center"> 
       <td style="text-align: center; height: 225px; vertical-align: bottom;"><img style="width: 696px; height: 211px;" alt="Header image" src="bankrupt_files/h_img000.jpg" /></td> 
     </tr> 
     <tr> 
       <td style="vertical-align: bottom; height: 34px;"> 
      <table style="width: 696px; height: 24px; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0"> 
         <tbody> 
           <tr> 
             <td> 
            <div id="foxmenucontainer"> 
            <div id="foxmenu"> 
            <ul> 
               <li><a href="http://www159.pair.com/ngllc/new/" title="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li> 
               <li><a href="http://www159.pair.com/ngllc/new/about.html" title="">&nbsp;&nbsp;&nbsp;&nbsp;About
Us&nbsp;&nbsp;&nbsp;&nbsp;</a></li> 
               <li><a href="http://www159.pair.com/ngllc/new/services.html" title="" class="current">&nbsp;&nbsp;&nbsp;&nbsp;Services&nbsp;&nbsp;&nbsp;&nbsp;</a></li> 
              <li><a href="http://www159.pair.com/ngllc/new/case_experience.html" title="">&nbsp;&nbsp;&nbsp;&nbsp;Case
Experience&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li> 
              <li><a href="http://www159.pair.com/ngllc/new/news.html" title="">&nbsp;&nbsp;&nbsp;&nbsp;News&nbsp;&nbsp;&nbsp;&nbsp;</a></li> 
              <li><a href="http://www159.pair.com/ngllc/new/contact.html" title="">&nbsp;&nbsp;&nbsp;&nbsp;Contact&nbsp;&nbsp;&nbsp;&nbsp;</a></li> 
            </ul> 
            </div> 
            </div> 
            </td> 
          </tr> 
        </tbody> 
      </table> 
      </td> 
    </tr> 
    <tr> 
      <td style="vertical-align: top;"> 
      <table style="background-color: white; width: 696px; height: 392px; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0"> 
        <tbody> 
          <tr> 
            <td> 
            <table style="width: 650px; height: 385px; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0"> 
              <tbody> 
                <tr> 
                   <td> 
                  <h3><br /></h3> 
                   <h3 style="text-decoration: underline;">Bankruptcy
Services</h3> 
                   <p> The Nottingham Group has a team of
professionals with significant experience in matters of bankruptcy and
insolvency. We have assisted various parties on some of the largest,
highest profile and most complex cases in the region. <br /> 
                   <br /> 
 Our professionals have served in many capacities in the bankruptcy
arena including accountants, trustees, consultants, and examiners in
numerous Chapter 11 and Chapter 7 cases covering a wide range of
industries. <br /> 
                   <br /> 
 Our professionals have served as financial consultants to trustees,
receivers, examiners, debtors, creditor committees, and secured
creditors to provide them with the essential and timely financial
analyses required for them to make the difficult decisions surrounding
complicated bankruptcy cases. <br /> 
                   <br /> 
 Our professionals have assisted counsel and clients on various matters.
We have performed a variety of tasks in the bankruptcy area including
the following:  Identification and analysis of fraudulent transfers,
preferences and concealed assets<br /> 
 Tracing of funds and transactions<br /> 
 Development and/or evaluation of restructuring plans<br /> 
 Preparation of debtor's statements and schedules<br /> 
 Cash flow modeling and forecasting<br /> 
 Assisting with the negotiation and/or sale of troubled companies or
assets<br /> 
 Management and operation of entities through plan confirmation and/or
liquidation<br /> 
 Assistance with interim financial reporting<br /> 
 Preparation and analysis of operating forecasts and projections,
operating reports, reorganization plans and disclosure statements<br /> 
 Business valuations and liquidation analyses<br /> 
 Identification of concealed assets <br /> 
                  <br /> 
Our professionals are recognized as leading financial professionals in
the area of bankruptcy and have qualified as expert witnesses in this
field. <br /> 
                  <br /> 
                  <a href="http://www159.pair.com/ngllc/new/services.html">Click
here to return to Services page</a> <br /> 
                  <br /> 
                  <br /> 
                  </p> 
                  </td> 
                </tr> 
              </tbody> 
            </table> 
            </td> 
          </tr> 
        </tbody> 
      </table> 
      </td> 
    </tr> 
    <tr> 
      <td style="height: 75px; vertical-align: bottom;"> 
      <table style="width: 696px; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0"> 
        <tbody> 
          <tr> 
            <td style="color: rgb(146, 147, 135);">One Gateway
Center, 420 Fort Duquesne Boulevard<br /> 
Suite 700<br /> 
Pittsburgh, PA 15222<br /> 
T: 412.288.9948 | F: 412.338.0357
            </td> 
            <td style="text-align: right;">© 2008 The
Nottingham Group, LLC<br /> 
            <a href="http://www159.pair.com/ngllc/new/index-5.html">Privacy
Policy</a> </td> 
          </tr> 
        </tbody> 
      </table> 
      </td> 
    </tr> 
  </tbody> 
</table> 
<p><br /></p> 
</body> 
</html>
```
The above isn't perfect but it's a good starting point.

If possible, I would ditch the table layout and go with a CSS layout. That would simplify things a lot since you wouldn't need to nest tables as much you're doing now. The table-based layout I came up with still does table nesting but not as much as you've got in your original page.

As for specifically what it is about the table nesting that is causing grief with the original page, I don't know and it will take me some time to dissect everything to find out. I was able to create the above layout more quickly than I was able to NOT find out what was going on with the original layout (meaning I spent a fair amount of time 'beating' on the original layout before giving up ).

The screenshots are of Avant with an IE7 rendering engine.

Hope that helps!

Peace...


----------

