How Do I Make Images/Text Inside a Table Cross Browser Compatible?

Hello - on our webpage http://www.jumpwithjill.com/mediaimages you will find a large, two-column table with lots of images and text in various cells. Our issue is that the table and images look great in Firefox, but in Chrome, Safari, and IE, they become squished and look horrible. I am OK at editing HTML, but I saw a lot of confusing suggestions when I google searched this problem. Could you please tell me how to edit this HTML (or something else I need to do?) to make this page in particular look the same and good across all the major browsers? Is it related to cell width? Image width? etc. etc.

Thanks so much your support is terrific!

Best,

AD

  • Imperative Ideas
    • HummingBird

    Hey Adrian,

    I don't generally recommend using tables for this kind of work nowadays, since it is far easier to write a DIV structure that works well responsively. With that said, your problem has to do with different HTML rendering engines.

    This should solve most of your problems if you add it to the CSS:

    .entry-content table td {
    width: 50%;
    }

    Here, the problem becomes that if you put any other table inside of the "entry-content" <div>, all of the columns there will default to 50% as well. It would make more sense to name your table.

    <table class="two-columns">
    --stuff--
    </table>

    And then declare the CSS as

    table.two-columns td {
    width: 50%;
    }
  • Adrian
    • The Crimson Coder

    Hey guys thank you so much for the help. Imperitive Ideas - I apologize but I'm not exactly sure what to do with your advice. Would I just copy and paste the table.two columns td CSS code into the MyCustomCSS plugin or do I first need to rename the two columns class? If so, to do that, do I just go into the HTML editor on the page and change:

    <table style="width: 800px;" border="0" cellspacing="10" cellpadding="4" align="center">

    To:

    <table class="two-columns" style="width: 800px;" border="0" cellspacing="10" cellpadding="4" align="center">

    and then add the appropriate CSS into the MyCustomCSS plugin?

    Thanks so much! Especially for the quick help!

  • Imperative Ideas
    • HummingBird

    rather than using tables, it makes more sense to do your product loop using a DIV structure. Let's say one of these items is called a "product" - we can call it a "squirrel" for all I care... use a label that makes it easier to understand later.

    Right now you go:

    <table>
        <tbody>
            <tr>
                <td>This is a product</td>
                <td>This is a product</td>
            </tr>
            <tr>
                <td>This is a product</td>
                <td>This is a product</td>
            </tr>
        </tbody>
    </table>

    I realize this makes sense, intuitively, especially if you come from an Excel background or if you learned HTML in the early 2000s. We don't do things like that anymore. Instead, we would do this:

    <section class="productlist">
        <div class="product">This is a product</div>
        <div class="product">This is a product</div>
        <div class="product">This is a product</div>
        <div class="product">This is a product</div>
    </section>

    Obviously, this is way cleaner. Until you add the CSS though, it's just a bunch of stacked boxes. So...

    .productlist {
        width: 100%;
        overflow: hidden;
    }
    
    .product {
        display: inline-block;
        width: 50%;
    }

    Now your enclosing section is 100% wide. The overflow: hidden ensures that the DIV area doesn't collapse - as long as you don't set a height it simply expands downwards. If you had set it to say... 100px... everything below 100px would be hidden. That's neither here nor there though.

    We then tell the products to display inline. The older way of managing this would have been do use "float: left;" instead of "display: inline-block" and it's probably what you want to do if you are supporting antique browsers like IE6.

    If you needed to style images or text inside of products you would use things like:

    .product h2 {
        font-size: 1.2em;
        font-weight: bold;
        color: red;
    }
    
    .product img {
        border: 0;
        border-radius: 9px;
    }

    ... and on down the line.

    This gives you far greater control over the style while also cleaning up your markup and separating your display properties from your actual data. As an added bonus, your styles from products don't bleed up into anything else and the ones you chose can easily override anything from further up the DOM.

  • Ash
    • WordPress Hacker

    Hello AD

    I think I got it this time. I looked at your html, and it's not designed in correct way.

    Also, could you please place the following code in your head tag in header.php and check if it fixes for you.

    <script type="text/javascript">
    jQuery(function($) {
        $('.entry-content table td[align=left]').width('50%');
    });
    </script>

    Put the code just before ending head tag. Let me know please if it fixes for you.

    Cheers
    Ash

  • Imperative Ideas
    • HummingBird

    @Adrian

    You're on the money. By adding the class, you can target just that table. If you want to target all tables, don't add the class. If you do add the class, you need to add it on every table you create.

    Adding the CSS definitions to your custom CSS area should then activate the changes, whichever set you choose to go withe.

  • Adrian
    • The Crimson Coder

    Hi All,

    Thank you so much for your help. I've added the .entry.content CSS, and it seems to be working across the four major browsers. I would love to learn the better way to build these tables, you are correct I have a background in excel so this is what makes more sense to me. I just want to confirm with you guys that the method I've used will be OK - the colspans seem OK i think?? Will this cause problems in the future or anything?

    Thanks again!

    AD

  • Imperative Ideas
    • HummingBird

    @Adrian - you may be able to skip week 1 if you know all of it already. Week 2 will be frustrating because you will know some but not all of it, you'll probably crush through it in a day or two.

    http://freecourses.tutsplus.com/30-days-to-learn-html-and-css/

    My experience, especially being self-taught, is that when I finally got around to taking a course it paid to suck it up and do the whole thing. There were always, always, always nuances that I didn't know about due to my just-in-time learning approach to the field.

    Don't think of the class as a chore. You are going to get really excited as the stuff starts to click. TutsPlus is generally good about showing you how to do your editing using either Firebug or Chrome's developer tools, then translate that back to your site files - that technique alone will really open your eyes up.

  • Imperative Ideas
    • HummingBird

    Hey, if you're into learning, there are two more that should follow.

    Once you know your CSS and HTML, you absolutely must learn the ins and outs of jQuery. This recommndation should look familiar:
    https://tutsplus.com/course/30-days-to-learn-jquery/

    That is a course that you will start and stop then rewatch a dozen times unless you are a born natural and take to code like a duck to water. The point isn't to finish it the first time, the point is to absorb it and use it - so that the next part makes sense when you go back. Pace yourself when you get to jQuery or you will end up VERY frustrated. It's really just an extra layer of JS syntax on top of the DOM but until you learn to read it, it'll flummox you.

    So think of it like this.
    1. HTML/CSS renders data from the server on to the web page
    2. JS/jQuery manipulates the CSS/HTML after it has been rendered. It does things like say "take these four divs, lay them on top of one another, and make them into a slider" - but you have to be able to write the HTML/CSS first
    3. PHP is the language that actually gets data from the DB and feeds it to HTML/CSS for rendering. It then lets you send data back up to the server for storage or calculation. PHP happens 100% server side. You cannot affect any PHP logic after the web page has been sent to the browser.

    So finally, and this one is a premium course, you can learn PHP here:
    https://tutsplus.com/course/php-fundamentals/

    Best course on the internet.

    Once you get those done you can get into more advanced structures of object oriented programming (OOP) like classes, objects, and MVC (model/view/controller). You can start to have an opinion on why CodeIgniter is crap, Cake is old, and Laravel makes PHP as elegant as Ruby.

    But that's a ways down the line for you.

    Start with CSS/HTML. Happy trails.

  • Imperative Ideas
    • HummingBird

    Note that "hard core" programmers will say to learn JS before jQuery. That's a wonderful idea if you are in school for a CIS or CS degree.

    If you're learning by video and practical application, learn jQuery and go back for JS in a year. You'll ultimately need to know the foundation but for what you're doing with WordPress - it doesn't matter yet.

  • Adrian
    • The Crimson Coder

    Thank you very much for these recommendations I will certainly check them out ASAP. Quick question, we have a rather annoying problem with a site of ours that we want to just get a developer to fix for us. Do you provide quotes? The issue is discussed here:

    https://premium.wpmudev.org/forums/topic/how-to-add-full-screen-video-background-to-postpage-without-plugin

    We did hire a developer from the job board at WPMU but he ended up being a scam (uploaded some garbage into our server). I've made some progress which you can see here:

    http://www.e3demo.com

    Anyways, please let me know if interested. Regardless, thank you very much for your help.

    Best,

    AD

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.