Ionic framework: The first item in Ionic list is disappeared

Question

I am new to Ionic world. I ran into an issue. I was following the direction from ionic web site with contents. However, somehow the first item on the list is not showing at all. Could any of you help? Thanks a lot. Here is my code:

And also why my ion-tabs automatically appears in the footer area? If I want it to appear on the top can I?

<div class="bar bar-header bar-calm">
    <h1 class="title">View Title</h1>
</div>

<ion-content>

<div class="list">

  <a class="item item-icon-left" href="#">
    <i class="icon ion-email"></i>
    Check mail
  </a>

  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-chatbubble-working"></i>
    Call Ma
    <i class="icon ion-ios7-telephone-outline"></i>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-mic-a"></i>
    Record album
    <span class="item-note">
      Grammy
    </span>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-person-stalker"></i>
    Friends
    <span class="badge badge-assertive">0</span>
  </a>

</div>
</ion-content>


<ion-tabs class="tabs-energized tabs-icon-top">
    <ion-tab title="Leagues" icon="ion-home" href="#"></ion-tab>
    <ion-tab title="My Team" icon="ion-star" href="#"></ion-tab>
</ion-tabs>

Answer 1

ok. I finally figured it out. Instead of using margin-top in the css style. I just added a ionic class in ion-content tag, then the issue is gone.

<ion-content class="has-header">