Support » Themes and Templates » Weird table issue in TwentyEleven

  • Hi there,

    I’m working on my friend’s wordpress site, and am having a weird problem when doing a basic table (image on one side, text one another). Basically, the text is displayed way down the side of the photo. It doesn’t start below the photo, but right near the bottom. No valign tag has helped, I’ve searched the forum, and can’t seem to make any fix I’ve seen for others problems work.

    I’ve downloaded and tried to use firebug, but I have no idea what I’m looking for when I click on it. I’m not a developer, but I tend to have a good enough grasp on html to get by. This? This is really baffling me.

    Here’s what I’m looking at:

    Also, is there any way to get rid of the horizontal lines above and below the table?

    Btw, I have already edited the theme before I looked here and saw the recommendations to make a child theme. Whoops. I WILL be re-installing in her main directory before the site goes live, so I’ll be sure to do it as a child theme at that point.

Viewing 14 replies - 1 through 14 (of 14 total)
  • esmi


    Forum Moderator

    am having a weird problem when doing a basic table (image on one side, text one another)

    Don’t use table markup for layout purposes. Float the image to the left or right using CSS.

    For layout within a post?

    I have NO idea how to use css within a post… plus, she’s going to want to add photos to her blog entries, and she knows less about css than I do.

    My own blog runs the “default” theme, and I’ve never had a problem with tables. Is there no way to use tables (easy enough for my friend to do) in this theme? Should I just reinstall with “default”?



    Forum Moderator

    For layout within a post?


    I have NO idea how to use css within a post

    The same way you use CSS anywhere else – using classes and ids. Or if absolutely, necessary inline CSS.

    And do not edit the Twenty Eleven theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. Create a child theme for your changes.

    I change the colors in style.css to make the blog look nice. THAT is the sole way I use css, and *that* is beyond the ability of the end user for this blog.

    Is there no user-friendly way to position test to the side of a photo in this theme?



    Forum Moderator

    I change the colors in style.css to make the blog look nice. THAT is the sole way I use css, and *that* is beyond the ability of the end user for this blog.

    Either way you should not be changing the Twenty Eleven theme.

    Is there no user-friendly way to position test to the side of a photo in this theme?

    Yes – select Left or Right for the Alignment when inserting images into the Post.

    Fine, I give up.

    I am also searching for a solution to this problem. I want to insert images into my posts using tables and I’m not familiar enough with CSS to use it in individual posts.

    I found this thread and saw a mod reply and was hopeful. Instead, I saw a condescending moderator jerk belittling someone looking for help. I’ll post again when I solve the issue, no thanks to esmi.

    I found the solution using tables. For some reason the <td valign=”top;”> tag is not working correctly, so instead you need to use <td style=”vertical-align:top;”> in your table and that should get your tables looking normal.

    No need to edit any CSS.

    P.S. I totally modified the twentyeleven theme and there’s nothing you can do about it.

    Don’t use table markup for layout purposes.

    I am also trying to do layout that is not easily achieved with the WP Page editor. BTW, have a child theme set up and working for many mods. Working great.

    I want to embed script/widget code into a page. Not in the sidebar, but in the page itself. Creating a weather forecast page and want to place several widget scripts on the page. Widget code looks like this:

    <script type="text/javascript" src=""></script>

    I want the layout to display some of these widgets side by side instead of stacked on top of each other.

    If not with <table>…then how would you suggest?

    FrustratedFriend – DON’T Give Up! Did you get this resolved? I re-read you post and I have a question. Why are you using tables for this? Are you simply wanting to add a pic to your post and also want to make it easy for your friend to do it on their site? If so, you can do this while creating the post with a few clicks. No code, no html, no css. It is provided as part of your WP editor.

    If this is what you are trying to better understand…have a look here:
    WP CODEX – Using Images AND
    WP CODEX – Inserting Images into Posts and Pages

    It is real easy to place an image within your post and align as you want without ever editing the raw CSS or HTML and without having to use tables.

    I know people keep saying to create a child theme instead of editing the main theme, but hell, here is the wind, and here is me throwing caution to it!

    To stop images in tables moving the text to the base, in the style.css:

    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, font, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	border: 0;
    	font-family: inherit;
    	font-size: 100%;
    	font-style: inherit;
    	font-weight: inherit;
    	margin: 0;
    	outline: 0;
    	padding: 0;
    	vertical-align: baseline;

    I deleted the vertical-align: baseline; line, et voila, problem solved.



    Forum Moderator

    And the next time you update Twenty eleven, you will lose those changes. and the next time you have a site issue and are asked to switch to an unedited copy of the Twenty Eleven theme, you will lose your changes.

    There is a reason for the advice to use a child theme.

    I just registered to WP just to follow up on this. I need to do the same thing and have the same issue. The thing is, I’m not just trying to float an image left or right. I’m trying to do an image, along with two lines of hypderlinked text underneath — and to my knowledge there’s no way I can do that easily. DIV and SPAN doesn’t work because it keeps treating it as a “block” instead of “inline”. So I’m resorted to using Tables but VALIGN doesn’t work.

    I get that it’s dangerous to just alter style.css, but wanted to chime in on why some people need to create a table for it.

    The problem doesn’t rely on the display properties of span and div.
    Even if they have “natural” properties (div is a block element, span is an inline element) you can easily override these settings through css as you like.

    Quite surely it’s a layout problem, but as esmi stated above we should not rely on tables and try to solve the issue using best practices, i.e. css.

    But vdot90 before addressing the problem I’m not sure of your intent as the original poster wanted to float an image and place text (a caption) on its side, while to me you seem to be trying to place the text underneath.

    Here’s a fiddle I fastly put up just to clarify what i mean.

    ps- oh and it’s not dangerous to edit a style.css file as long as you’re safely using a child theme and back it up before making any change you feel uncertain about.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Weird table issue in TwentyEleven’ is closed to new replies.