Welcome to WebmasterWorld Guest from 23.22.220.37

Forum Moderators: incrediBILL

Message Too Old, No Replies

Table is driving me nuts

two tds won't align next to each other

     
9:39 pm on Apr 13, 2012 (gmt 0)

New User

joined:Dec 12, 2011
posts: 2
votes: 0


Hello, maybe this is a wordpress issue but here is the problem:

The specific code used for the code is this:

<style>
.containerTable {
width:600px;
}
.containerTable tr{
width:100%;
}

.containerTable .pic {
width: 30%;
}
.containerTable .bio {
width: 70%;
padding: 8px;
}
.name {
font-weight:bold;
color:#6633CC;
}
</style>

</head>

<body>

<table class="containerTable">

<tr>
<td class="pic">
<img src="http://5th.panpacificfilm.com/wp-content/uploads/2012/04/IMG_8244-e1334350761720.jpg" alt="Ken An" width="100%" height="225"/>
</td>

<td class="bio"><span class="name">Ken An - Co-Founder & CEO </span> <p>Ken An is the Founder & CEO of Global Media & IT (GMIT), mission organization utilizing Information Technology and media to spread the gospel to every part of the world. He has been in the IT industry over 20 years, and has tried to connect IT with mission ministry for past 10 years. He established IT-Specialist mission training program and has trained countless people to have mission oriented mind. He has traveled over 12 countries to teach IT and to spread the gospel. </p>
</td>

</tr>


</table>


Nothing too complicated, but I would like the text on the 2nd <td> to start at the top of the cell, aligned with the picture on the 1st <td>. When I try it with just this code on Dreamweaver, it works beautifully, but when I copy paste this into the WordPress CMS it becomes like this. Is this purely a WordPress issue or what do you guys think?

Thanks so much..

[edited by: incrediBILL at 6:50 am (utc) on Apr 14, 2012]
[edit reason] removed URL specifics, no site reviews [/edit]

10:20 pm on Apr 13, 2012 (gmt 0)

Preferred Member

5+ Year Member

joined:Feb 11, 2006
posts:481
votes: 0


Hi,

Try:
.containerTable td{
vertical-align:top;
}


Andrew
10:34 pm on Apr 13, 2012 (gmt 0)

Preferred Member

5+ Year Member

joined:Mar 27, 2010
posts:423
votes: 0


In your style.css you have the following:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}

if the rest of the website is fine with it, you can change it to vertical-align:top;
10:37 pm on Apr 13, 2012 (gmt 0)

Preferred Member

5+ Year Member

joined:Mar 27, 2010
posts:423
votes: 0


Or maybe in your case commenting that line out would be a better solution.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members