Wine Festival Schedule - Issue

I completed this Objective in the course Introduction to HTML. However, my results slightly differ from final version source. I’m not sure why.

Link to the Final source of this Objective.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Aguillar Family Wine Festival</title>
  <link rel="stylesheet" type="text/css" href="reset.css" />
  <link rel="stylesheet" type="text/css" href="style.css" />
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>

<body>
  <header>
    <h1>Annual Aguillar Family Wine Festival</h1>
  </header>
  
  <div class="container">
    <table>
      <thead>
        <tr>
          <th colspan="2">
            <h1>Wine Festival Schedule</h1>
          </th>
        </tr>
        <tr>
          <th>
            <h2>Time</h2>
          </th>
          <th>
            <h2>Event</h2>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="left">
            <h3>12:00 PM</h3> 
          </td>
          <td>
            <h3>Welcome Reception</h3> 
          </td>
        </tr>
        <tr>
          <td class="left">
            <h3>01:00 PM</h3>
          </td>
          <td>
            <h3>Storytelling & Tasting</h3>
          </td>          
        </tr>
        <tr>
          <td class="left">
            <h3>02:00 PM</h3>
          </td>
          <td>
            <h3>Wine Luncheon</h3>
          </td>          
        </tr>
        <tr>
          <td class="left">
            <h3>03:00 PM</h3>
          </td>
          <td>
            <h3>Aguillar Family Wines</h3>
          </td>          
        </tr>
        <tr>
          <td class="left">
            <h3>04:00 PM</h3>
          </td>
          <td>
            <h3>Wine & Cheese Tasting</h3>
          </td>          
        </tr>
      </tbody>
    </table>

  </div>
  
  <footer>
    <h3>Contact</h3>
    <h3>Location</h3>
    <h3>Privacy Policy</h3>
  </footer>
</body>

</html>

If you look at the final source link, then compare the two, its different? The CSS file is the same as the source, as in untouched.


1 Like

I’m guessing here, you’d have to try it yourself: CSS normalization (CSS reset).

Different browsers have different standard values for certain CSS selectors that don’t get changed by the CSS that is loaded on the site itself.

Might be something completely different, just putting that out here.

1 Like

Well, what’s strange is that if I do CTR- to zoom out it will fit the page, but it wont scroll the page. Those pics are done at 100% zoom. If I do CTRL - and zoom to 90% its appears correct.

2 Likes

Hi there, I had an issue with this as well. Followed all the instructions to a T. Compared my html file with the default one and it was exact match and yet in browser my table had no borders and everything was aligned to the left. https://gist.github.com/087c09136e6eadb425bb9d8f4d0ac1c7

1 Like

Did you copy the other files over and put them into the same folder and reload the html file?

Disregard, I just read the link and you indeed did have the .css file. That’s as odd as my case.

1 Like

To be honest, there’s a lot out of our control when looking at what preview codecademy shows us. Rebuilding this 100% accurate can’t be done with just the code of the exercise, I think you’d have to take their overall CSS into account aswell.

If you ask me, there’s no need to worry about the difference in style too much. Just make CSS normalization / reset a habit when working on personal projects so at least those won’t give you similar headaches in the future. :frowning: :pensive:

2 Likes

Your table closing tag </table> comes before the <tbody></tbody> tags - this excludes the table body from the table. Think of the <table></table> tags as the whole container for everything that needs to be inside of the table.

2 Likes