[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