SydLexia.com Forum Index
"Stay awhile. Stay... FOREVER!"

  [Edit Profile]  [Search]  [Memberlist]  [Usergroups]  [FAQ]  [Register]
[Who's Online]  [Log in to check your private messages]  [Log in]
Html coding help


Reply to topic
Author Message
SoldierHawk
Moderator
Title: Warrior-Poet
Joined: Jan 15 2009
Location: San Diego, CA
PostPosted: Aug 12 2011 11:02 pm Reply with quote Back to top

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.


militarysignatures.com

William Shakespeare wrote:
Love all, trust a few, do wrong to none.

 
View user's profileSend private messageSend e-mailVisit poster's website
Syd Lexia
Site Admin
Title: Pop Culture Junkie
Joined: Jul 30 2005
Location: Wakefield, MA
PostPosted: Aug 12 2011 11:06 pm Reply with quote Back to top

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.
View user's profileSend private messageSend e-mailVisit poster's websiteAIM Address
Ghandi
Title: Alexz Aficionado
Joined: May 21 2008
PostPosted: Aug 12 2011 11:07 pm Reply with quote Back to top

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 Smile


RIP Hacker

Alexz Johnson

 
View user's profileSend private messageVisit poster's website
SoldierHawk
Moderator
Title: Warrior-Poet
Joined: Jan 15 2009
Location: San Diego, CA
PostPosted: Aug 12 2011 11:29 pm Reply with quote Back to top

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.


militarysignatures.com

William Shakespeare wrote:
Love all, trust a few, do wrong to none.

 
View user's profileSend private messageSend e-mailVisit poster's website
Ghandi
Title: Alexz Aficionado
Joined: May 21 2008
PostPosted: Aug 12 2011 11:34 pm Reply with quote Back to top

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. :/


RIP Hacker

Alexz Johnson

 
View user's profileSend private messageVisit poster's website
SoldierHawk
Moderator
Title: Warrior-Poet
Joined: Jan 15 2009
Location: San Diego, CA
PostPosted: Aug 12 2011 11:50 pm Reply with quote Back to top

Humbug. Thanks for the help G, but its still ignoring it. :/


militarysignatures.com

William Shakespeare wrote:
Love all, trust a few, do wrong to none.

 
View user's profileSend private messageSend e-mailVisit poster's website
Ghandi
Title: Alexz Aficionado
Joined: May 21 2008
PostPosted: Aug 12 2011 11:57 pm Reply with quote Back to top

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. Sad


RIP Hacker

Alexz Johnson

 
View user's profileSend private messageVisit poster's website
SoldierHawk
Moderator
Title: Warrior-Poet
Joined: Jan 15 2009
Location: San Diego, CA
PostPosted: Aug 12 2011 11:59 pm Reply with quote Back to top

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. Laughing


militarysignatures.com

William Shakespeare wrote:
Love all, trust a few, do wrong to none.

 
View user's profileSend private messageSend e-mailVisit poster's website
Ghandi
Title: Alexz Aficionado
Joined: May 21 2008
PostPosted: Aug 13 2011 12:27 am Reply with quote Back to top

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. Laughing


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 Razz


RIP Hacker

Alexz Johnson

 
View user's profileSend private messageVisit poster's website
GPFontaine
Joined: Dec 06 2007
Location: Connecticut
PostPosted: Aug 13 2011 09:00 am Reply with quote Back to top

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.



 
View user's profileSend private messageVisit poster's website
SoldierHawk
Moderator
Title: Warrior-Poet
Joined: Jan 15 2009
Location: San Diego, CA
PostPosted: Aug 13 2011 02:10 pm Reply with quote Back to top

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. Very Happy


militarysignatures.com

William Shakespeare wrote:
Love all, trust a few, do wrong to none.

 
View user's profileSend private messageSend e-mailVisit poster's website
GPFontaine
Joined: Dec 06 2007
Location: Connecticut
PostPosted: Aug 13 2011 03:51 pm Reply with quote Back to top

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. Very Happy

FTP gets you access to the stylesheet. Sounds like you don't need it though.

Glad to help!



 
View user's profileSend private messageVisit poster's website
Ghandi
Title: Alexz Aficionado
Joined: May 21 2008
PostPosted: Aug 13 2011 07:43 pm Reply with quote Back to top

I did my best Smile

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 Razz


RIP Hacker

Alexz Johnson

 
View user's profileSend private messageVisit poster's website
GPFontaine
Joined: Dec 06 2007
Location: Connecticut
PostPosted: Aug 13 2011 08:33 pm Reply with quote Back to top

Ghandi wrote:
I did my best Smile

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 Razz

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.



 
View user's profileSend private messageVisit poster's website
SoldierHawk
Moderator
Title: Warrior-Poet
Joined: Jan 15 2009
Location: San Diego, CA
PostPosted: Aug 13 2011 11:32 pm Reply with quote Back to top

GPFontaine wrote:
Ghandi wrote:
I did my best Smile

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 Razz

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.

Word. And I so appreciate what you did, G--super fast replies, and certainly more effort than a lame problem like this deserve. Smile *fist bump*


militarysignatures.com

William Shakespeare wrote:
Love all, trust a few, do wrong to none.

 
View user's profileSend private messageSend e-mailVisit poster's website
Display posts from previous:      
Reply to topic

 
 Jump to: