Table-cell content positioning

HTML & CSS
1

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.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=“content-type” content=“text/html; charset=windows-1250”>
<meta name=“generator” content=“PSPad editor, www.pspad.com”>
<title></title>
<style type=“text/css”>
.tablecell {display:table-cell; border:solid; }
</style>
</head>
<body>
<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>
</ul>
</div>
<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>
</div>
</body>
</html>

2

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

3

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 {
    display:table-cell;
    border:solid;
  [B]  vertical-align:top;[/B]
[B]}
ul{margin-top:0}
h1{margin-top:0[/B]