Misaligned Web Parts under certain circumstances

Question

I have a web part page that contains two parts in separate zones, one on the left-middle, one on the right-middle (so they appear side by side). The left contains a content editor and the right contains a visual web part. When only the left part is active, the content displays where it should (top left of page under the top). When both are active the part on the left displays about 4 lines lower on the page than it should making the final page look lopsided. They're still next to each other but not in line on the top.

The right side part uses an extensive HTML table structure for its control alignment. Could that interfere with the left's placement? All signs point to it being a problem introduced by the visual web part. There's nothing too complex about the left part (content editor). Just some formatted text and CSS.

I know this is pretty vague but can anyone think of some things that might cause this? Any ideas or theories are welcome. It's in SP2010 Server if that matters.

Thanks!

Answer 1

I'd use the Developer Tools in IE to try to identify the HTML element which contains the whitespace and then look at the CSS which is applied to it and the adjacent elements. Usually something like this is caused by an unintended or conflicting element in the DOM.