Table-cell content positioning

Hello. I thought I could find the topic but I cant find with my preliminary search of this forum, so here I go.

I was playing with table-cell elements and I have a question.
in the markup below, why changing the “content” area’s first paragraph’s styling from, say <h1> to <h3> changes the vertical position of navbar <ul> elements? Also, how do I remove the unsitely space above the <ul> elements? setting margin-top or padding-top to the UL element dont seem to have any effect.
This is consistent with both IE8 , Firefox and Chrome, I think.

<meta http-equiv=“content-type” content=“text/html; charset=windows-1250”>
<meta name=“generator” content=“PSPad editor,”>
<style type=“text/css”>
.tablecell {display:table-cell; border:solid; }
<div class=“tablecell” id=“menubar”>
<ul >
<li>watch the vertical position </li>
<li> of this list. </li>
<li> It changes! based on</li>
<li>the text style of the</li>
<li>right column </li>
<li>why the right column setting </li>
<li>affect the left column? </li>
<div class=“tablecell” id=“content”>
<h1>Style of this text affects the list on the left</h1>
<p>change the above span to different tag and see the difference </p>

Thank you very much for clear and clean explanation! Now its so obvious:blush:

The cells are vertical-align:middle by default so changing one cell will affect the height of the other.

Just set them to vertical-align:top and remove the top margins of the elements.

.tablecell {
  [B]  vertical-align:top;[/B]