4 Replies - 260 Views - Last Post: 08 September 2017 - 09:26 AM

#1 au.ceif.  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 25-April 17

Border-bottom is 1px bigger than th's width

Posted 07 September 2017 - 12:32 PM

Good afternoon. I wrote the code of a table and the first <th> of <thead> has a border 1px bigger than the width of the element itself and I can't figure out why this is happening. I highlighted with the eyedropper the occurrence:

https://imgur.com/a/B1Ur8

Here is the code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="author" content="au.ceif." />
    <meta name="description" content="Poetry Workshop" />
    <meta name="robots" content="index, follow" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta name="viewport" content="width=device-width, height=device-height,
    initial-scale=1.0, user-scalable=no" />
    <title>Poetry Workshop</title>
    <link type="text/css" rel="stylesheet" href="css/poetry.css" />
  </head>
  <body>
    <div id="main-container">
      <h1>Poetry Workshops</h1>
      <p>We will be conducting a number of poetry
        workshops and symposiums throughout the year.
      </p>
      <p>
        Please note that the following events are free to members:
      </p>
      <ul>
        <li>A Poetic Perspective</li>
        <li>Walt Whitman at War</li>
        <li>Found Poems &amp; Outsider Poetry</li>
      </ul>
      <table>
        <thead>
          <tr>
            <th></th>
            <th>New York</th>
            <th>Chicago</th>
            <th>San Francisco</th>
          </tr>
        </thead>
        <tbody>
          <tr class="even">
            <th>A Poetic Perspective</th>
            <td>
              Sat, 4 Feb 2012
              11am - 2pm
            </td>
            <td>
              Sat, 3 Mar 2012
              11am - 2pm
            </td>
            <td>
              Sat, 17 Mar 2012
              11am - 2pm
            </td>
          </tr>
          <tr class="odd">
            <th>Walt Whitman at War</th>
            <td>Sat, 7 Apr 2012
                11am - 1pm
            </td>
            <td>
              Sat, 5 May 2012
              11am - 1pm
            </td>
            <td>
              Sat, 19 May 2012
              11am - 1pm
            </td>
          </tr>
          <tr class="even">
            <th>Found Poems &amp; Outsider Poetry</th>
            <td>Sat, 9 Jun 2012
                11am - 2pm
            </td>
            <td>
              Sat, 7 Jul 2012
              11am - 2pm
            </td>
            <td>
              Sat, 21 Jul 2012
              11am - 2pm
            </td>
          </tr>
          <tr class="odd">
            <th>Natural Death: An Exploration</th>
            <td>
              Sat, 4 Aug 2012
              11am - 4pm
            </td>
            <td>
              Sat, 8 Sep 2012
              11am - 4pm
            </td>
            <td>
              Sat, 15 Sep 2012
              11am - 4pm
            </td>
          </tr>
        </tbody>
      </table>
      <form method="post" action="#">
        <fieldset>
          <legend>Register your interest</legend>
          <label for="name">Your Name:</label>
          <input type="text" name="name" id="name" />
          <label for="email">Your email:</label>
          <input type="email" name="email" id="email" />
          <label>Your closest center:</label>
          <select name="loc" id="loc">
            <option value="New York">New York</option>
            <option value="Chicago">Chicago</option>
            <option value="San Francisco">San Francisco</option>
          </select>
          <label>Are you a member?</label>
          <input type="radio" name="member" value="yes" /> Yes
          <input type="radio" name="member" value="no"  /> No
        </fieldset>
        <input type="submit" value="Register" />
      </form>
    </div>
  </body>
</html>




body {

  font-family: Helvetica, Verdana, Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
  color: #666;
  font-size: 90%;
}

#main-container {

  width: 700px;
}

#main-container h1 {

  margin-left: 10px;
}

#main-container  p {

  text-indent: 10px;
}

ul {

  list-style-image: url(../img/icon-plus.png);
}

ul li {

  font-size: 14px;
  margin-bottom: 5px;
}

table, form {

  margin-left: 10px;
}

table {

  border-spacing: 0px;
  border-collapse: collapse;
  margin-bottom: 30px;
  font-size: 90%;
}

thead th {

  background-color: #90B4D6;
  border-bottom: 2px solid #547CA0;
  border-right: 1px solid #749ABE;
  color: #fff;
  text-shadow: 2px 2px 3px #666;
  word-spacing: 0.3em;
  padding-top: 5px;
  padding-bottom: 5px;

}

.even th, .even td {

  background-color: #E0E9F0;
}

.odd th, .odd td {

  background-color: #E8EFF5;
}

tbody th {

  text-align: left;
  width: 280px;
  text-indent: 10px;
}

tbody td {

  padding: 10px;
}

tbody th, tbody td {

  border: 1px solid #CBD2D8;

}

form {

  width: 400px;
}

fieldset {

  border: 1px solid #D6D6D6;
  background-color: #fff;
  margin-top: 20px;
}

legend {

  font-style: italic;
}

label {

  margin-top: 10px;
  width: 200px;
  display: inline-block;
}

input[type="submit"]
{
  margin-top: 10px;
  float: right;
  width: 65px;
  height: 30px;
  border-radius: 5px;
  border: 1px solid black;
  color: #fff;
  font-size: 1em;
  background-color: #009966;
  text-shadow: -1px -1px 1px #666;

}

input[type="submit"]:hover {

  background-color: #00BB66;
  position: relative;
  top: 1px;
}




Is This A Good Question/Topic? 0
  • +

Replies To: Border-bottom is 1px bigger than th's width

#2 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 4135
  • View blog
  • Posts: 13,056
  • Joined: 08-June 10

Re: Border-bottom is 1px bigger than th's width

Posted 08 September 2017 - 01:11 AM

Thatís your left border. If you look closely beneath the bottom border, you see the left border of the tdís starting.
Was This Post Helpful? 1
  • +
  • -

#3 au.ceif.  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 25-April 17

Re: Border-bottom is 1px bigger than th's width

Posted 08 September 2017 - 09:07 AM

I can't upvote you Dormilich. Whenever I enter in some pages of dream in code, I have to stop a script called prototype.js from working while using Firefox. And this is only happening with the dream in code website. The only extension I'm using with Firefox is the Facebook Purity.

Back to the topic, why this problem only happens at the left side? I added border-right to the td of the tbody and the border-bottom didn't get larger than the length of the last th of the thead. Thanks.

This post has been edited by au.ceif.: 08 September 2017 - 09:10 AM

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 4135
  • View blog
  • Posts: 13,056
  • Joined: 08-June 10

Re: Border-bottom is 1px bigger than th's width

Posted 08 September 2017 - 09:12 AM

what does the right border have to do with the left border?

anyways, your bottom border takes up the available space, and since you have a left border on the tds so do the ths (thatís how tables work).
Was This Post Helpful? 1
  • +
  • -

#5 au.ceif.  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 25-April 17

Re: Border-bottom is 1px bigger than th's width

Posted 08 September 2017 - 09:26 AM

Quote

what does the right border have to do with the left border?


Is this a rhetorical question? I don't know, they have nothing to do with each other?

Quote

anyways, your bottom border takes up the available space, and since you have a left border on the tds so do the ths (thatís how tables work).


I see.

This post has been edited by au.ceif.: 08 September 2017 - 09:26 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1