Welcome to WebmasterWorld Guest from 54.158.51.150

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)



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)

5+ Year Member



Hi,

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


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

5+ Year Member



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)

5+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month