1

enter image description here

Had to remove all our copy in order to post publicly, sorry if it makes it hard to see. The border for the rightmost column "Pro" shows up in Firefor, Chrome, and Safari but not in Edge or IE. Anybody run into this before?

section class="line">
  <div class="box margin-bottom">
    <div class="margin-top-25">
      <h1></h1>
    </div>
    <div class="line margin-top-25">
      <div class="margin">
        <div class="s-12">
          <center>
            <table class="table2" style="">
              <tr>
                <td width="40%">&nbsp;</td>
                <td width="15%">&nbsp;</td>
                <td width="15%"><span class="button" style="background-color: #d2d2d2; color:#000000"><strong></strong></span></td>
                <td width="15%">&nbsp;</td>
                <td width="15%">&nbsp;</td>
              </tr>
              <tr>
                <td class="td2">&nbsp;</td>
                <td class="td2">
                  <a href="basic_gif1.html" class="tooltip button" style="color: white; background-color: #58595B">
                    <span class="tooltiptext">Click here to learn more about the Basic Package</span>
                    <strong>Basic</strong>
                  </a>
                </td>
                <td class="td2">
                  <a href="plus_gif1.html" class="tooltip button" style="color: white; background-color: #b8282e">
                    <span class="tooltiptext">Click here to learn more about the Plus Package</span>
                    <strong>Plus</strong>
                  </a>
                </td>
                <td class="td2">
                  <a href="pro_gif1.html" class="tooltip button" style="color: white; background-color: #dc8419">
                    <span class="tooltiptext">Click here to learn more about the Pro Package</span>
                    <strong>Pro</strong>
                  </a>
                </td>

              </tr>
              <tr class="tr2">
                <td class="td2" style="text-align: left; font-size: 20px;">
                  <p></p>
                </td>
                <td class="td2 tdbl" style="color: #58595B; font-size: 24px;"><strong>&bull;</strong></td>
                <td class="td2 tdbl" style="color: #b8282e; font-size: 24px;"><strong>&bull;</strong></td>
                <td class="td2 tdbl" style="color: #dc8419; font-size: 24px;"><strong>&bull;</strong></td>
              </tr>
              <tr class="tr2">
                <td class="td2" style="text-align: left; font-size: 20px;">
                  <p></p>
                  <p></p>
                </td>
                <td class="td2 tdbl" style="color: #58595B; font-size: 24px;"><img src="img/newjersey.png" /></td>
                <td class="td2 tdbl" style="color: #b8282e; font-size: 24px;"><img src="img/newjersey.png" /></td>
                <td class="td2 tdbl" style="font-size: 24px;">
                  <img src="img/newjersey.png" />
                  <p>+</p>
                  <p style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif"><strong>WSJ</strong> or <strong>Forbes</strong></p>
                </td>

              </tr>
              <tr class="tr2">
                <td class="td2" style="text-align: left; font-size: 20px;">
                  <p></p>
                </td>
                <td class="td2 tdbl">&nbsp;</td>
                <td class="td2 tdbl">Choose 1</td>
                <td class="td2 tdbl">Choose 2</td>
                </tr>
              <tr class="tr2">
                <td class="td2" style="text-align: left; font-size: 20px;">
                  <p></p>
                </td>
                <td class="td2 tdbl" style="color: #58595B;"><strong></strong></td>
                <td class="td2 tdbl" style="color: #58595B;"><strong></strong></td>
                <td class="td2 tdbl" style="color: #58595B;"><strong></strong></td>
              <tr class="tr2">
                <td class="td2" style="text-align: left; font-size: 20px;">
                  <p></p>
                </td>
                <td class="td2 tdbl" style="color: #58595B; font-size: 24px;"><strong>&bull;</strong></td>
                <td class="td2 tdbl" style="color: #b8282e; font-size: 24px;"><strong>&bull;</strong></td>
                <td class="td2 tdbl" style="color: #dc8419; font-size: 24px;"><strong>&bull;</strong></td>
              </tr>
              </tr>
              <tr class="tr2">
                <td class="td2" style="text-align: left; font-size: 20px;">
                  <p></p>
                </td>
                <td class="td2 tdbl" style="color: #58595B;"><strong>$349</strong></td>
                <td class="td2 tdbl" style="color: #58595B;"><strong>$549</strong></td>
                <td class="td2 tdbl" style="color: #58595B;"><strong>$979</strong></td>

              </tr>
              <tr>
                <td colspan="4" class="td2" style="background-color: #f5f5f5;font-size: 20px;"><strong></strong></td>
              </tr>
              <tr>
                <td colspan="4" class="td2" style="text-align: left; font-size: 20px;"><strong></strong></td>
              </tr>
              <tr>
                <td colspan="4" class="td2" style="text-align: left;font-size: 20px;"><strong></strong></td>
              </tr>
            </table>
          </center>
        </div>
      </div>
    </div>
    <div class="line margin-top-25" style="background-color: #b8282e;">&nbsp;</div>
    <div class="margin-top-25">
      <h1 id="tools"></h1>
      <p></p>
    </div>
    <div class="line margin-top-25">
      <div class="margin">
        <div class="s-12">
          <div class="tabs">
            <div class="tab-item tab-active">
              <a class="tab-label active-btn" name="" style=" width: 33.33333333%;"></a>
              <div class="tab-content">
                <div class="box" style="text-align: left">
                  <center>
                    <table class="table2" style="width: 60%;">
                      <tr class="tr2">
                        <td class="td2">&nbsp;</td>
                        <td class="td2" colspan="6"><strong>Quantity</strong></td>
                      </tr>
                      <tr class="tr2">
                        <td class="td2"><strong>Product</strong></td>
                        <td class="td2"><strong>100</strong></td>
                        <td class="td2"><strong>250</strong></td>
                        <td class="td2"><strong>500</strong></td>
                        <td class="td2"><strong>1,000</strong></td>
                        <td class="td2"><strong>2,000</strong></td>
                        <td class="td2"><strong>3,000</strong></td>
                      </tr>
                      <tr class="tr2">
                        <td class="td2"><a href="#openModal_" class="link"></a></td>
                        <td class="td2" style="font-size: 12px;">$</td>
                        <td class="td2" style="font-size: 12px;">$</td>
                        <td class="td2" style="font-size: 12px;">$</td>
                        <td class="td2" style="font-size: 12px;">$</td>
                        <td class="td2" style="font-size: 12px;">$</td>
                        <td class="td2" style="font-size: 12px;">$</td>
                      </tr>
                      <tr class="tr2">
                        <td class="td2"><a href="#openModal_Brochure" class="link">Brochures</a></td>
                        <td class="td2" style="font-size: 12px;">$</td>
                        <td class="td2" style="font-size: 12px;">$</td>
                        <td class="td2" style="font-size: 12px;">$</td>
                        <td class="td2" style="font-size: 12px;">$</td>
                        <td class="td2" style="font-size: 12px;">$</td>
                        <td class="td2" style="font-size: 12px;">$</td>
                      </tr>
                      <tr class="tr2">
                        <td class="td2"><a href="#openModal_" class="link"></a></td>
                        <td class="td2" style="font-size: 12px;">$200</td>
                        <td class="td2" style="font-size: 12px;">$245</td>
                        <td class="td2" style="font-size: 12px;">$325</td>
                        <td class="td2" style="font-size: 12px;">$525</td>
                        <td class="td2" style="font-size: 12px;">$825</td>
                        <td class="td2" style="font-size: 12px;">$925</td>
                      </tr>
                      <tr class="tr2">
                        <td class="td2" colspan="7" style="font-size: 12px;"></td>
                      </tr>
                    </table>

For the life of me I can't see what's off here. Admittedly I'm pretty new to HTML, but through checking W3 and other online resources I haven't been able to nail down what would be causing this to render incorrectly in IE/Edge

Improve this question
4
  • Do you have some CSS you could post as well?
    – jwebb
    Commented Sep 21, 2018 at 20:40
  • whenever something doesn't render correctly it's usually because you forgot to either close a quote or a tag properly. Each browser will do it's best (worst) to decypher what you could possibly mean. In this case IE generally fails. In this case your issue is with failing to close a tr properly. Check out the area </tr> </tr> one of those goes with the tr opened previously and one goes with the one it's on.
    – scrappedcola
    Commented Sep 21, 2018 at 20:44
  • And if you thought that was how you nest rows it's not. You can't put a tr within another tr without placing a new table set inside a td.
    – scrappedcola
    Commented Sep 21, 2018 at 20:46
  • Okay, I'll check that out. Thank you.
    – Nolan Brey
    Commented Sep 24, 2018 at 12:54

1 Answer 1

Reset to default
0

You can use CSS

table {border-collapse: collapse;}
.table2 td {border: 1px solid black;}

See codepen: https://codepen.io/anon/pen/VGRgyJ

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.