[thelist] Strange padding problem on IE7

Ken Snyder kendsnyder at gmail.com
Mon Feb 18 09:56:31 CST 2008

Paul Waring wrote:
> I've created the following test site for a client:
> http://www.astleyhire.co.uk/testing/astleyhire/
> If you look at the Products page vs the Promotions page in IE7, the left 
> hand navigation bar has a huge amount of padding on the promotions page 
> (this happens for some other pages too - it seems to depend on how much 
> text is on the page already). I've no idea why this is - the HTML and 
> the CSS are valid, and Firefox, Safari and even IE on the Mac(!) seem to 
> render the document correctly without any problems. I thought it might 
> be a box model problem, but I'm using tables for the layout rather than CSS.
> Can anyone shed any light on this situation? I'm (almost literally) 
> tearing my hair out over this.
> Thanks in advance,
> Paul
That _is_ quite vexing.

Here are some things to try:

1. specify a width for the right-hand-side td of 99%
2. remove whitespace in the #logobuttons td
3. use css width instead of inline width:    #logobuttons { width: 140px; }
4. remove the <br>s inside of logobuttons td (use css instead:    
#logobuttons a { display: block; }   )
5. avoid tables:
#logobuttons {
  float: left;
  width: 140px;
  overflow: hidden;
#content_pane { /* right side */
  margin-left: 160px;
  width: 600px;
  overflow: hidden;

Let us know which one works.  #5 should for sure work.

- Ken Snyder

More information about the thelist mailing list