New to the community? Start here

Tables in BP-Social

OK, I’m showing my lack of CSS skills now…

I’ve been doing basic layouts in tables, because I don’t know any better, and it has been working fine. However, since changing to the BP Social theme, my tables are not displaying properly. In particular, it seems the top of the last column aligns with the previous column.

Image won’t work, but you can see it here: http://bestagentblogs.com/pricing/

and here: http://bestagentblogs.com/extras/

This is true on several Pages and does not seem to matter how many columns there are. I tried to trick it by adding another empty column, but it is not to be so easily tricked.

Ideas?

Fri, 5 Mar 2010 4:19:14
  • Tammie
    • WordPress Wizard

    @christofire: you really shouldn’t mix tables or in fact use tables for any layout css isn’t that hard at all. For instance you can have a section easily to do what you require in css it is just like html and far easier. One of the main reasons why I’d advise against using tables beyond the inaccessibility and fact tables are for tabular data only, is that as all our themes use css for the layout we tend to set default styles for tables and table elements in the css as those are used to display tabular data only. Therefore, if you start using them in a theme you would run into problems more than likely.

    Here’s a hint how you could do a 2 column layout in css it’s easy as you will see:

    <div id="my-wrapper">

    <div id="my-wrapper-right">

    </div>

    <div id="my-wrapper-left">

    </div>

    <div class="clear"></div>

    </div>

    and in the css you would have:

    #my-wrapper{

    // you can declare no width or a fixed with but using a default here up to what it is

    // bare in mind as css uses inheritance other elements could effect widths and so on if you use this - if it's in a width of 800px you want to put 800px or below or just leave this blank and let it be full width.

    // I'm putting it all in a wrapper so it's all self contained and nice and easy to clear and put elements in for you

    }

    #my-wrapper-right{

    width: // whatever width you want here;

    float: right;

    }

    #my-wrapper-left{

    width: // whatever width you want here;

    float: left;

    }

    .clear{

    clear: both;

    }

    Note: You may find a .clear class in the css anyway as it’s a usual method with css. Any time you float something and it’s not declared as 100% or you want content after 2 or more floats you should use clear to make sure you don’t get what I call ‘jenga’ elements :slight_smile:

    As tables is not something you should use for layout in this case my recommendation would be to use css and html as I’ve just said and you won’t get any issues at all.

    Here are a few good resources you can use to start looking at css:

    http://www.webchicklet.com/css/taking-the-plunge-learning-css/

    http://reference.sitepoint.com/css

    I can also highly recommend the following books *I’m uk based but these are available internationally:

    http://www.amazon.co.uk/Beginning-CSS-Web-Development-Professional/dp/1590596897/ref=sr_1_2?ie=UTF8&s=books&qid=1267985190&sr=8-2

    http://www.amazon.co.uk/CSS-Mastery-Advanced-Standards-Solutions/dp/1430223979/ref=sr_1_7?ie=UTF8&s=books&qid=1267985190&sr=8-7

  • Richie_KS
    • HummingBird

    hi chris

    like tammie said..its not easy to used table without creating css for each td tr table to

    grid out the in line box you setup in pricing.

    you can copy paste the attachment text into your pricing page and see if the featured

    properly inline.

    instead of using table…i used div box to control all content with applied style so its easy to

    control.

    cheers