| Author |
Message |
SoldierHawk
Moderator
Title: Warrior-Poet
Joined: Jan 15 2009
Location: San Diego, CA
Posts: 6113
|
So I'm attempting to code a page in html for the first time. I'm trying to create a simple three column table. But here's the problem: column A has way more data in it than columns B and C. That would be fine, except that the info in B &C doesn't align with the column header, resulting in a page that looks like this:
http://www.obsidianportal.com/campaign/clock-strikes-12-campaign/wikis/main-page
Is there any way I can eliminate the extra white space in the other two columns, and get the data to 'move up' so it's aligned with the top? I've googled around to try and find the answer, but nothing I've found seems to work or apply to this particular situation.
|
| William Shakespeare wrote: |
| Love all, trust a few, do wrong to none. |
|
|
    |
|
Syd Lexia
Site Admin
Title: Pop Culture Junkie
Joined: Jul 30 2005
Location: Wakefield, MA
Posts: 24887
|
I would guess this is a CSS issue and not an HTML issue. I would also guess GPF can give you a solid answer on how to fix this.
|
|
|
     |
|
Ghandi
Title: Alexz Aficionado
Joined: May 21 2008
Posts: 2889
|
HTML works on this board so I'll put spaces.
You can vertically align text on a table with "valign", which goes in the Table Row tag.
< TR VALIGN = TOP >
"TOP" can be "MIDDLE" or "BOTTOM" as well.
Try that, let me know if it works and if you need more help
|
|
|
   |
|
SoldierHawk
Moderator
Title: Warrior-Poet
Joined: Jan 15 2009
Location: San Diego, CA
Posts: 6113
|
Hm. I tried putting it in, but it doesn't seem to be working. Not sure what I'm doing wrong. It's reading as code since it's not showing up as text on the page, but its still not aligning.
|
| William Shakespeare wrote: |
| Love all, trust a few, do wrong to none. |
|
|
    |
|
Ghandi
Title: Alexz Aficionado
Joined: May 21 2008
Posts: 2889
|
Oh... I know what's wrong...
Partially ignore my first post. The VALIGN tag does work in the Table Row, but it can also go in Table Data. So just do this:
< TD VALIGN = TOP >
Instead.
Those are really you're only 2 tags to move the data around in. :/
|
|
|
   |
|
SoldierHawk
Moderator
Title: Warrior-Poet
Joined: Jan 15 2009
Location: San Diego, CA
Posts: 6113
|
Humbug. Thanks for the help G, but its still ignoring it. :/
|
| William Shakespeare wrote: |
| Love all, trust a few, do wrong to none. |
|
|
    |
|
Ghandi
Title: Alexz Aficionado
Joined: May 21 2008
Posts: 2889
|
| SoldierHawk wrote: |
| Humbug. Thanks for the help G, but its still ignoring it. :/ |
You're welcome.
I know Tables are a pain in the ass. I've spent hours on them before and STILL not got it to do what I wanted. I feel your pain.
Sometimes, it's a line that's wrong, and added or missing character, or the wrong tag. It's always something small though.
I'll think about what else it could be.
|
|
|
   |
|
SoldierHawk
Moderator
Title: Warrior-Poet
Joined: Jan 15 2009
Location: San Diego, CA
Posts: 6113
|
|
    |
|
Ghandi
Title: Alexz Aficionado
Joined: May 21 2008
Posts: 2889
|
| SoldierHawk wrote: |
It's cool. I'm still at the baby step stage where I'm amazed that I was actually able to even get the data to go where I wanted.  |
If you can preview, make sure you do that. Also, Refresh the page after each change so you're not looking at a Cached version of it.
Tables are a pain in the ass though, seriously. I avoid making them whenever possible. It's a nice skill to have, and one that is useful, but I avoid them wherever possible
|
|
|
   |
|
GPFontaine
Joined: Dec 06 2007
Location: Connecticut
Posts: 11244
|
In this particular case, we are not looking at an issue related to Cache or refreshes.
HTML line #24:
| Code: |
| <link href="/stylesheets/application_packaged.css?1312423279" media="screen" rel="stylesheet" type="text/css" /> |
You are now dealing with Style Sheets.
-----------------------------------------------
Style sheets apply their styles in order. The higher the line number, the later it is applied, and therefore it becomes the actual displayed CSS.
In the file named application_packaged.css:
Line 405:
table td - vertical-align: middle
Line 5:
table, td, th - vertical-align: middle
Line 1:
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td - vertical-align: baseline
The Browser's Default Setting:
td, th - inherit
-----------------------------------------------
FIXES:
Easiest Direct Fix: In the TD add an element.style:
| Code: |
<td style="vertical-align: top;"> ... </td>
|
If you always want the tables inside content to be top aligned, I would advise adding CSS code to the actual stylesheet at the bottom.
| Code: |
| #campaign-content table td {vertical-align:top;} |
-----------------------------------------------
How did GPF find all of this out?
Google Chrome's Inspector. Alternatively, I could have used the one that comes with IE or Firebug (Firefox).
That is a lesson for another day though.
|
|
|
   |
|
SoldierHawk
Moderator
Title: Warrior-Poet
Joined: Jan 15 2009
Location: San Diego, CA
Posts: 6113
|
|
    |
|
GPFontaine
Joined: Dec 06 2007
Location: Connecticut
Posts: 11244
|
| SoldierHawk wrote: |
YES! GP, that did the trick! I don't think the editor the site gives me gives access to CSS, but the style="vertical-align: top;" code in the td worked like a charm. Thank you very much.  |
FTP gets you access to the stylesheet. Sounds like you don't need it though.
Glad to help!
|
|
|
   |
|
Ghandi
Title: Alexz Aficionado
Joined: May 21 2008
Posts: 2889
|
I did my best
I forgot it could also be in the CSS. I start searching code like crazy if something doesn't work though, so I may have found it eventually
|
|
|
   |
|
GPFontaine
Joined: Dec 06 2007
Location: Connecticut
Posts: 11244
|
| Ghandi wrote: |
I did my best
I forgot it could also be in the CSS. I start searching code like crazy if something doesn't work though, so I may have found it eventually  |
Your version works fine and if you had made the page, it would have been an ok choice for an HTML 4 page.
In this case, this is someone else's web app and you aren't familiar with their code. I give you props for at least knowing your HTML attributes.
|
|
|
   |
|
SoldierHawk
Moderator
Title: Warrior-Poet
Joined: Jan 15 2009
Location: San Diego, CA
Posts: 6113
|
|
    |
|
|
|