Tables/Divs Problem - PLEASE HELP!

[Halia]

I run an Al Pacino fansite, Pacino Online, and am currently in the process of getting up the new layout. However I'm having a huge problem with getting the body content to line up correctly with the main image (see?), and if anyone could please tell me what the problem is or could fix it for me, I would appreciate it hugely and give you credit on the main page of the site when it goes back up.

Thank you so much!!

[jscheuer1]

Ugh, what WYSIWYG editor from .... spawned that page!? Not your fault, you are just working with what you have. Anyways, the 'problem' is that this image:

http://fan-sites.org/al-pacino/layout%20images/po2.jpg

is itself off center, having a larger left hand 'margin' than right. Try this one instead:

http://home.comcast.net/~ansiguy/images/al.jpg

and lose the background image for that first table, just for good looks. Also the first two tables (in the code, not in some design mode view) need to be width 607, not 611. Just for good measure the second table in the code needs this style attribute added to it:

style="position:relative;left:2px"

This last is required because the tables below are just slightly off center due to some unknown reason.

I tested this in IE6 and NS7.2 at various resolutions and all was fine.

[Halia]

AHH that helped so much! Thank you! (I know, there's so much coding... my friend helped me with it but I couldn't get in touch with her to help me after I saw it was kinda screwed up.) But agh, it's still a little off-center! Any help would be so great, thank you! You'll definitely get credit once the site goes back up.

[jscheuer1]

I'm a big fan of Al's but no credit is necessary. It is odd that you say things are still a little off, unless you have a much better eye than I do, it should look fine. I am unable to log to your page now to verify if the instructions given were followed as I intended, or to see about the other image you mention. When I can, I'll check to see what might be done. However, that little bit in my instructions:

Just for good measure the second table in the code needs this style attribute added to it:

style="position:relative;left:2px"

This last is required because the tables below are just slightly off center due to some unknown reason.

can be adjusted. The higher the number, the more to the right the picture will appear, lowering it will move Al to the left. Negative numbers can be used and since we are talking 1px equals 1 pixel, you cannot get any more specific on a computer display than that. The only problem is that the higher the value, as either a positive or negative integer, the more likely that different resolutions will render it differently. This adjustment is needed because the table below is distorted by its content, pushing it slightly off center.

[jscheuer1]

I just checked back and the page was available again. The way it is right now, if you change the two tables back to width 611 and use:

style="position:relative;left:0!important;left:2px

for the table containing the picture, it lines up perfectly in IE, and Mozilla, except if text-size in Mozilla is set to other than 100% or Normal.

But, this is only after saving in IE first before working on it. I think IE changed it.