CODEWITHSUNDEEP
css
Steve
Steve

Reputation: 1765

why is this inline LI element shifted upward?

At this page, I have the following:

body {
  background-image: url('http:dev.doig.com.au/images/bg-page.jpg');
  background-size: cover;
  repeat: no-repeat;
}

#selector {
  list-style: none;
  max-width: 1322px;
  margin: 0 auto;
}

#selector li {
  display: inline-block;
  width: 11.625%;
  margin-right: 0.5%;
  margin-top: 1%;
  background-color: #012F60;
  height: 70px;
  display: inline-table;
}

#selector li:last-child {
  margin-right: 0%
}

#selector li#job.active {
  background-color: #93CB32;
}

#selector li a {
  color: white;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  text-decoration: none;
}
<div id="page">

  <ul id="selector">
    <li id="job" class="active"><a href="#">I want to find a job</a></li>
    <li><a href="#">I need help at work</a></li>
    <li><a href="#">NDIS</a></li>
    <li><a href="#">I need training</a></li>
    <li><a href="#">I've been injured at work</a></li>
    <li><a href="#">I want to refer</a></li>
    <li><a href="#">Psych service</a></li>
    <li><a href="#">I'm an employer</a></li>
  </ul>

</div>

However, the 5th LI, "I've been injured at work" is shifted upwards.

enter image description here

I can't see why this is the case, or how to resolve this.

Help appreciated.

Upvotes: 0

Views: 30

Answers (1)

Hanif
Hanif

Reputation: 3795

Change here:

#selector li {
  width: 11.625%;
  margin-right: 0.5%;
  margin-top: 1%;
  background-color: #012F60;
  height: 70px;
  display: inline-table;
  vertical-align: top; // Key line
}

Upvotes: 1

Related Questions