Ok well I know I'm committing the cardinal sin here by using a lot of tables on this site, but for the time being I have little choice, for two reasons:
1) I'm still learning about moving from a table layout to div's
2) I'm using DotNetNuke so I'm not exactly sure how many tables I can strip out.

So that being said, I have a page that lines up perfectly in IE7:
http://www.kellstarpainting.com/HOME...7/Default.aspx

But FF the right edge of the main content pane is off by a few pixels. This client is very picky about exact proportions and everything lining up. He's very much wanting the site to be a reflection on the work he does (can't blame him).

In trying to work all of this out, I think I've managed to get myself royally confused and I'm looking for help. I'm starting to think there might be inconsistencies between my CSS formatting, Table widths, and maybe even the widths of the images in the pane itself.

I'm afraid if you ask me why I did something a certain way or put something in that shouldn't be there, I won't have a good answer at this point!

Here's a bit of the code:

<tablewidth="800"border="0"bordercolor="green"cellspacing="0"cellpadding="0"class="pagemaster">
  <tr>
     <tdalign="center">
        <tablewidth="800"border="0"bordercolor="red"cellpadding="0"cellspacing="0"align="center"class="skinmaster">
<!-- Title & Menu -->
  <tr>
     <tdcolspan="3">
         <tableborder="0"bordercolor="aqua"width="800"class="KStarBG">
           <tr>
             <tdheight="20"colspan="2">
             </td>
          </tr>
          <tr>
             <td>
                 <imgsrc="/portals/_default/skins/KStar/images/blank.gif"height="1"width="250"/>
             </td>
             <tdwidth="100%"align="right">
                    <dnn:menurunat="server"id="dnnMENU"userootbreadcrumbarrow="false"useskinpatharrowimages="false"usesubmenubreadcrumbarrow="false"class="topmenu"align="right"/>
             </td>
          </tr>
        </table>
     </td>
  </tr>
  <!-- Panes -->
  <trvalign="top">
     <tdclass="xdsc_LeftPane"id="LeftPane"runat="server"align="left">
     </td>
     <tdclass="xdsc_ContentPane"id="ContentPane"runat="server"align="left">
     </td>
     <tdwidth="10">
     </td>
  </tr>

And some of the relevant CSS:

.pagemaster  {width: 100%; 
  height: 100%; 
  background-color: white;}
 
.KStarBG   {width: 800px; 
  height: 100px;
  background-image: url(images/anim-title.gif); 
  background-repeat: no-repeat;
  border: 0px; 
  padding: 0px;}
 
.topmenu {height: 30px;
  }
 
.skinmaster  {width: 800px; 
  background-color: white; 
  padding:0px;}
 
.xdsc_TopPane  {width: 800px; 
   padding: 0px;}
 
.xdsc_LeftPane  {width: 179px;
   padding: 0px;  
   background-image: url(images/kellstar-title-bg4.png);
   background-repeat: repeat-y;}
 
.xdsc_ContentPane {width: 600px; 
   background-color: white; 
   border: 2px #AAAAAA solid; 
   padding-right: 3px !important;
   padding-left: 5px; 
   padding-top: 2px;}
.xdsc_BottomPane {width:800px; 
   padding: 0px;}

Many thanks for any tips!

(pasting the html into that code window stripped out some of the spaces, but my real code has them in there so you can disregard that I guess)

It's not just FF, it's also off in IE 6.

For tables, you might want to read thru these:
http://css-discuss.incutio.com/?page...edGapsInTables
http://css-discuss.incutio.com/?page=NicerTables
http://css-discuss.incutio.com/?page=CollapsingBorder

Your client also needs to understand that the web is NOT like print and no 2 web browsers do things EXACTLY the same. While I understand the desire to have pixel perfection, it just isn't practical.

I have to agree with Lady in Red here. Read her tutorials, these are always worth more than the time it takes to read through them. In fact, I'd typically pay to read the things she suggests.

But to the point, it's just not possible to get pixel-for-pixel the same rendering in IE and FF. Unless all you send down are jpeg files as your content. But since you're using DNN and that's not an option, you have to let go of some degree of control. You could spend a hundred hours chasing down a few pixels, until you loose your hair, and it's probably not worth that. ( Unless we're talking to Brittney Spears. )

LadynRed, thanks for the links, those are pretty useful!
Newbie, thanks for the post - yes I've seen a handful of LadyNred's posts and I highly respect her opinions/suggestions. I just wish I had the know-how to implement all of them!

Anyways, I managed to get the page to line up perfectly in IE - I cheated, by adding another 5 pixel-wide TD. Unfortunately, FF is moving it over 5px too far! So I just can't win.

I hate to ask this because I know it's not the right thing to do, but is there an easy way to detect the browser version and dynamically set that TD width based on the browser the reader's using? I'm just frustrated and stuck on this part of the site and I need to move on.

Thanks!