fishera
fishera

Reputation: 799

Text align in IE changes

body {
  text-align: left;
  color: #000810;
}
.settings-edit-table {
  width: 100%;
  margin: 15px 0 15px;
}
.settings-edit-table th,
.settings-edit-table td {
  padding: 0 0 8px;
  vertical-align: top;
  line-height: 29px;
}
.settings-edit-table th {
  width: 110px;
  padding-right: 10px;
}
.settings-edit-table input {
  width: 388px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  color: #808080;
  font: inherit;
  line-height: 17px;
  padding: 5px 10px;
}
<table class="settings-edit-table">
  <tbody>
    <tr>
      <th scope="row">Name</th>
      <td>
        <input name="firstName" id="firstName" value="test" type="text">
      </td>
    </tr>

    <tr>
      <th scope="row">Surname</th>
      <td>
        <input name="lastName" id="lastName" value="test" type="text">
      </td>
    </tr>



    <tr>
      <th scope="row">Phone</th>
      <td>
        <input name="phone" id="phone" value="6666666" type="text">
      </td>
    </tr>

    <tr>
      <th scope="row">E-mail</th>
      <td>
        <input name="email" id="email" value="[email protected]" type="email">
      </td>
    </tr>


  </tbody>
</table>

For row names text alignment is left, in Chrome, Firefox everything works fine. For some reasons in internet explorer the text align is centered. Any suggestions to fix this issue? Here is also fiddle link

Upvotes: 0

Views: 39

Answers (2)

Shailesh Katarmal
Shailesh Katarmal

Reputation: 2785

 .settings-edit-table th,
 .settings-edit-table td {
    padding: 0 0 8px;
   vertical-align: top;
   line-height: 29px;
   text-align:left; //add text-align property
 }

Upvotes: 2

Lalji Tadhani
Lalji Tadhani

Reputation: 14189

Add This Property

.settings-edit-table th{text-align:left}

Upvotes: 3

Related Questions