I do not understand why my div borders would show differently in FF and IE7 and IE6. It looks correct in FF. I want the right div border to be in line with the edge of the top image (like it is on the left border). For some reason on the right side it is a few pixels off. When I adjust the div width to display correctly in IE then FF dose not look right. Is there a simple answer?
there are 2 things i can see straight away that are wrong.
First your header image is 793px wide but the container it sits in is only 792px wide. Firefox will ignore the extra 1px overflow but ie will increase #center to 793px in an effort to help you. Use the correct size image.
The second problem is that you have used the keyword thin for some of your borders but IE renders thin at 2px widths whereas other browsers render them at 1px width. Both are correct because the specs say that the width of the keyword thin is undefined and that it should basically just be smaller than medium.
The solution is to use the exact pixel width you want and don't leave anything to chance i.e use 1px instead of thin.