Can you Help me solve this <div> shifting issue?

[TalkingBoxMedia]

if you look at this page in firefox,..it seems fine,..in IE 6 or 7 however,..the lower 3-column area shifts 4 pixels to the right,..about 80-90% of the time. 10 % of the time, when refreshing, it will shift into the proper alignment.

here is the page

http://www.talkingboxmedia.com/demo/SWW_htm_mockup_final/home.htm


on this next page, in ie7, the lower column area will appear when first loading the page, but if reloaded,...it completely dissapears...

http://www.talkingboxmedia.com/demo/SWW_htm_mockup_final/detail.htm

I am a fairly green web-developer,..and do greatly appreciate any help given here...

thanks

[WebJoel]

Wow... for 'green', you wrote some rather impressive code. Validates, semantically correct, etc. Kudoes & accolades to you. :)

Perhaps to get rid of the '4-px' problem, add this to your first line of STYLE or CSS:

body, html {padding:0; margin:0;}

You are probably picking-up IE default 'padding' and/or 'margin' on body,html.
"universal selector" * {padding:0; margin:0;} would remove padding & margin from everything, -most likely wrecking what you already have. Try "body, html {padding:0; margin:0;}" first and see if this helped.

As for IE7, -I don't use v7, so I have nothing to add on that. :o

[TalkingBoxMedia]

I tried adding the comments, but it had no effect. Could it have anything to do with I.E. rendering the borders differently?? as they would add up to 4 pixels.....

I guess what is confusing me the most is that it works in I.E. sometimes,...but not most of the time.... and yes,..i went through the validator and had a few errors that i fixed,..but now it's all valid html and css,...

thanks for your input...