2nd cell (of my first row) always being displayed in a second row
-
Can someone suggest how to tackle following problem? My second cell of my first row is always being displayed on a second row.
This works fine in an html editor so very likely I’m clashing with the under beneath CSS. Theme is Twenty Ten.
Url is http://ictcalimero.be/ictdynamic-betaalbaar/ and html code is the following:
<table cellspacing="10" cellpadding="10">
<tbody>
<tr>
<td align="center" valign="bottom" width="30%"><img style="border:1px solid blue;" alt="IctDynamic Phone" src="http://ictcalimero.files.wordpress.com/2013/03/phone-blue1.png" width="150" height="150" /></td>
<td style="color:blue;" align="center" valign="bottom" width="35%"><span style="font-family:Arial Black;">
IctDynamic</span>
<span style="font-family:Arial Black;"><small>
Park King Square</small></span><br style="font-family:Arial Black;" />
<span style="font-family:Arial Black;"><small>Veldkant 33A</small>
</span>
<span style="font-family:Arial Black;"><small>2550 Kontich</small></span></td>
<td align="center" valign="bottom" width="30%"><img style="margin:5px;border:1px solid blue;" alt="IctDynamic LinkedIn" src="http://ictcalimero.files.wordpress.com/2013/03/linkedin-logo-vector-orig.png" width="150" height="150" /></td>
</tr>
</tbody>
</table>
The blog I need help with is: (visible only to logged in users)
-
It’s not a second row really, it’s because of the default vertical alignment of images (as you’ve realized). Your coding won’t change it because it’s outdated.
You should also get rid of all the redundant font and size tags.
So your table should be like this:<table> <tbody> <tr> <td style="text-align:center;vertical-align:bottom;width:30%;">IMAGE1 CODE</td> <td style="text-align:center;vertical-align:middle;color:blue;width:35%;font-family:Arial Black;"> IctDynamic <span style="font-size:80%;">Park King Square Veldkant 33A 2550 Kontich</span></td> <td style="text-align:center;vertical-align:bottom;width:30%;">IMAGE2 CODE</td> </tr> </tbody> </table> -
By the way, you’ll get better image quality if you use an image editing application to downsize the images to the desired pixel dimensions then upload and insert those versions with no width and height rules.
-
Many thanks for the excellent feedback. I’ll certainly have to improve my HTML knowledge a bit but, in a different context, trying to catch up with all the different java frameworks as well. Unfortunately a day has only 24 hours but fortunately my beloved wife and son tell me on a regular basis to stop working.
Regarding tools, I’m using Kompozer. For documentation I mostly use http://www.w3schools.com. Any alternatives around?
-
You’re welcome.
a) I’m not familiar with Kompozer. If that’s the tool that produced all those span and small and br tags, then it’s not suitable for purposes like the one in question.
b) In general you should forget most of the old-style table attributes (such as border, cellpadding, valign etc) and use the style attribute instead (as in my version above). So w3schools.com is fine, only you should study CSS properties and values rather than HTML. For HTML, this post of mine should be enough:
-
I generally go straight to the spec at w3.org if I need a reference site: http://www.w3.org/TR/CSS2/cover.html#minitoc
I also like the htmldog.com site for beginner CSS tutorials: http://www.htmldog.com/guides/cssbeginner/
justpi’s link is also very good as it’s WordPress.com-specific, and I’d recommend checking that one out.
-
Many thanks for all the useful information. It’s amazing how well people work together in the cloud and how difficult it is to work together with other departments in a multinational …
Speaking of the ICT industry. I’m sincerely hoping the demand for competent software engineers is a bit higher in the States versus Europe. In Belgium we are having ‘rather’ difficult times … let’s hope next year is going to be better!
- The topic ‘2nd cell (of my first row) always being displayed in a second row’ is closed to new replies.
WordPress.com Forums 