Table widths broken in IE and Chrome

• 

  speakingofresearch · Member · Feb 12, 2015 at 11:06 am

  • Copy link
  • Add topic to favorites

  This page: http://speakingofresearch.com/get-involved/statements-on-animal-research/

  In Firefox the table widths all appear the width of the middle section of the page. In IE and Chrome they stretch over the right hand column. The code for the first table is:

  <table style="width:100%;">
  <tbody>
  <tr>
  <td><span style="text-decoration:underline;"><strong>Institution</strong></span></td>
  <td><strong><span style="text-decoration:underline;">Link to policy statement or web page</span>
  </strong></td>
  </tr>
  <tr>
  <td>McGill University</td>
  <td><a href="http://www.mcgill.ca/research/sites/mcgill.ca.research/files/policy_on_the_study_and_care_of_animals-2011.pdf">http://www.mcgill.ca/research/sites/mcgill.ca.research/files/policy_on_the_study_and_care_of_animals-2011.pdf</a></td>
  </tr>
  <tr>
  <td><strong>University of British Columbia</strong></td>
  <td><a href="http://animalresearch.ubc.ca/">http://animalresearch.ubc.ca/</a></td>
  </tr>
  <tr>
  <td>University of Guelph</td>
  <td>http://www.uoguelph.ca/research/assets/acs/docs/university_animal_care_policy_and_procedures.pdf</td>
  </tr>
  <tr>
  <td>University of Toronto</td>
  <td>http://www.research.utoronto.ca/faculty-and-staff/research-ethics-and-protections/animals-in-research/</td>
  </tr>
  </tbody>

• 

  briansteeleca · Member · Feb 12, 2015 at 3:51 pm

  • Copy link

  The problem is that those browsers aren’t breaking on the underscores, only on hyphens. Try adding this to your custom CSS:

  table tr td > a {
   word-break: break-all;
  }

  I’ve tested it with Chrome but not IE – please let me know if it works on IE (and the IE version).

• 

  speakingofresearch · Member · Feb 12, 2015 at 3:57 pm

  • Copy link

  Anyway round it if I don’t have the custom CSS?

• 

  briansteeleca · Member · Feb 12, 2015 at 4:15 pm

  • Copy link

  Unfortunately that’s the way those browsers handle underscores, so without the custom CSS option, the only thing I can think of is removing the sidebar from that page.

  It looks like your theme has a full-width, no sidebar option for pages only, which means you’d have to use a static page for that instead of posts.

• 

  briansteeleca · Member · Feb 13, 2015 at 2:19 pm

  • Copy link

  I should have thought of this earlier – why not just use the title of the document and make it a link to the document. It would be more user-friendly and solve the underscores problem. For instance:

  University of Guelph | Animal Care Policy and Procedures