5 Replies - 655 Views - Last Post: 14 August 2013 - 08:51 PM

#1 ELF Builder  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 20-July 13

Table Column Widths Are Different; Why?

Posted 14 August 2013 - 11:34 AM

For some reason the third colum of my table here earthlifefoundation.orgis displaying much wider than the first two. Can you help me get them all evenly spaced. preferably in an automatic way like 33% 33% 33% as opposed to a fixed pixel width. I'm just not even sure what is making that third column so wide int eh first place. This is a joomla site. Here is my code for the table
<table border="0" cellspacing="5">
<tbody>
<tr>
<td><span style="color: #333333; font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 15.796875px;"><span style="text-decoration: underline;">Ecological:</span></span></td>
<td>
<p><span style="color: #333333; font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 15.796875px;"><span style="text-decoration: underline;">Humanitarian:</span></span></p>
</td>
<td>
<p><span style="color: #333333; font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 15.796875px;"><span style="text-decoration: underline;">Scientific:</span></span></p>
</td>
</tr>
<tr valign="top">
<td>
<p><strong>Species Saver</strong></p>
<p>Species locations mapped and tracked by anyone with an internet connection.</p>
<p> </p>
<p><strong>Plant's of Earth Database ("Plead")</strong></p>
<p>Easily find the perfect plants for your needs.</p>
<p> </p>
<p><strong>Desert Destroyers</strong></p>
<p>An anti-desertification game with real world impact.</p>
<p> </p>
<p><strong>Garden Eden</strong></p>
<p>An organization building edible and functional landscapes throughout rural and urban areas.</p>
<p> </p>
<p><strong>Sustainable Hawaii</strong></p>
<p>An organization devoted to bringing Hawaii a sustainable future in energy production, ecology, and agriculture. The end goal is not only to be able to provide the islands with all that they need but to bring them to a state of overproduction and thriving exports.</p>
</td>
<td>
<p><strong>Aloha Financial</strong></p>
<p>Assisting in raising funds for nonprofits.</p>
<p> </p>
<p><strong>Edustation</strong></p>
<p>Automated free education stations for the impoverished.</p>
<p> </p>
<p><strong>ELMentary</strong></p>
<p>Building schools and relevant curriculum for in-need communities around the world.</p>
<p> </p>
<p><strong>Mahalos Music</strong></p>
<p>Encouraging positive "vibrations" by supporting progressive music.</p>
<p> </p>
<p><strong>Eden Global Communities</strong></p>
<p>Idealistic modern living consisting of houses, complexes, towns, and neighborhoods.</p>
<p> </p>
<p><strong style="line-height: 1.3em;">St.Art Housing</strong></p>
<p>St.Art stands for "Street art" and "start". It is an experiment in community housing to help up-and-coming artists, musicians, and creatives get their start; inspired by the artists of Riverside California.</p>
<p> </p>
<p><strong>Ascending Artists</strong></p>
<p>A supportive online community for artists to exchange ideas and present their works.</p>
</td>
<td>
<p><strong>Wikid World</strong></p>
<p>Explore and build your world from your dreams to reality.</p>
<p> </p>
<p><strong>History Mapper</strong></p>
<p>An interactive map and timeline of history. Explore the past as you have never seen it before.</p>
<p> </p>
<p><strong>ReResearch Institute</strong></p>
<p>Investigating scientific experiments &amp; repeating studies for indications of validity.</p>
<p> </p>
<p><strong>The ELF Research Portal</strong></p>
<p>Giving independant and underfunded researchers a place to share their findings, experiments, and feedback; to collaborate; and to accomplish great things. You may not have the knowledge or tools to take your research to the next level, but someone else does <span style="line-height: 1.3em;">–</span><span style="line-height: 1.3em;"> the Research Portal is how interested parties find eachother.</span></p>
<p><span style="line-height: 1.3em;"><br /></span></p>
<p><span style="line-height: 13px;"><strong>Sustainable Hawaiian Electric</strong></span></p>
<p>Currently residents of Hawaii pay up to four times the mainland price for electicity. The S.H.E. company is dedicated to the sustainable production of energy in Hawaii using the power of ocean waves. Prototypes have been planned &amp; facility locations evaluated. Funding is needed for contruction of the prototypes and their testing; funtional prototypes should be able to generate funding by providing grid power. A portion of all proceeds goes to the development of electrical infrastructure in under served communities such as Ocean View on the Big Island.</p>
</td>
</tr>
</tbody>
</table>


Is This A Good Question/Topic? 0
  • +

Replies To: Table Column Widths Are Different; Why?

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3354
  • View blog
  • Posts: 11,353
  • Joined: 12-December 12

Re: Table Column Widths Are Different; Why?

Posted 14 August 2013 - 12:01 PM

Wow! It is amazing that for such a simple page the cells in the table that are causing an issue are 20 elements deep: body > div > div > .... > table > another table > p.

If you use your browser's console - there are links in my signature - you can inspect the elements; usually, you can just right-click an element and choose Inspect Element.

I would concentrate on the 1st and 2nd column-cells and find out what is constraining their width. Work from the center outwards until you find the cause.

I don't know if anyone else wants to take a look :)

This post has been edited by andrewsw: 14 August 2013 - 12:02 PM

Was This Post Helpful? 0
  • +
  • -

#3 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 65
  • View blog
  • Posts: 239
  • Joined: 22-November 10

Re: Table Column Widths Are Different; Why?

Posted 14 August 2013 - 01:53 PM

I could be wrong here, but I believe the width of your table columns is adjusted accordingly based on the content within your cells. In other words, if one of your lines is longer, in say column two, then the width of column two will be greater then the other columns. This was the impression I got after quickly brushing up on tables. However, the document seems a bit outdated (notice the html3 in the url) and I think I'm going to re-read some docs later b/c I am now curious myself haha.

Anyway, you answered your own question as you can set each column width to 32-33%.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3354
  • View blog
  • Posts: 11,353
  • Joined: 12-December 12

Re: Table Column Widths Are Different; Why?

Posted 14 August 2013 - 02:42 PM

Yes, that page is ancient - discard it. You might have a look at devdocs which attempts to gather everything together in one location.

Column two already has a lot of textual content, so its width would be wider by default. Its width, and that of the first column, are IMO constrained in some way by a css-rule.
Was This Post Helpful? 1
  • +
  • -

#5 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 65
  • View blog
  • Posts: 239
  • Joined: 22-November 10

Re: Table Column Widths Are Different; Why?

Posted 14 August 2013 - 07:37 PM

Good Point. Although, when I looked over his code earlier today I didn't see any css rule that would have constrained the first two columns only. Each column seemed to have the same rules. But then again, maybe I overlooked something.
Was This Post Helpful? 0
  • +
  • -

#6 ELF Builder  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 20-July 13

Re: Table Column Widths Are Different; Why?

Posted 14 August 2013 - 08:51 PM

Thanks guys. I would love to update the page, but its a Joomla based site and I don't have the technical knowledge to figure out how to update the Joomla code to bring it up to speed. I've opted for the 33% width idea simply because it was easy to impliment. Thank you for your help :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1