1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Wordpress Tables Different In Chrome

Discussion in 'HTML & Website Design' started by tunescool, Jul 12, 2017.

  1. #1
    i wanted to get rid of all the space that you get from text widgets at the bottom since i have more than 1 on my blogs. so i made tables in the sidebar template, got my sites looking alot nicer than the wordpress default with widgets

    but they all show up different in chrome, ill post one at a time

    this is the way its supposed to look, in firefox or pale moon

    [​IMG]

    this is the way it shows up in chrome or safari

    [​IMG]

        <style>
        .floating-box {
            display: inline-block;
        }
        </style>
        <div class="floating-box" style="padding-left: 17px;">
        <div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
        <div id="fb-root"></div>
        <script >(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=1418206975108700&version=v2.0";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
    
        </div>
        <div class="floating-box" style="padding-top: 9px;">
    
        <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=W2LKV3FLF87AQ"><img src="http://i709.photobucket.com/albums/ww95/tunescool/btn_donate_LG.gif"></a>
    
        </div>
    
    
        <table style="font-family: Georgia;">
        <tbody>
        <tr>
        <td style="padding-left: 17px;" colspan="3">
    
        <a href="https://twitter.com/thenotablenook" target="_blank"><img src="http://i709.photobucket.com/albums/ww95/tunescool/nook/tw.png"></a>
        <a style="margin-left: 7px;"href="https://www.facebook.com/groups/1675723939406562" target="_blank"><img src="http://i709.photobucket.com/albums/ww95/tunescool/nook/fb.png"></a>
        <a style="margin-left: 7px;"href="https://www.pinterest.com/tunescool/" target="_blank"><img src="http://i709.photobucket.com/albums/ww95/tunescool/nook/p.png"></a>
        <a style="margin-left: 7px;"href="https://www.youtube.com/channel/UCahrME4IUpOxj-u5yZOv-Gw/videos" target="_blank"><img src="http://i709.photobucket.com/albums/ww95/tunescool/nook/YTube.png"></a>
    
        </td>
        </tr>
        <tr>
        <td style="padding-left: 7px; padding-right: 7px;">
    
        <center><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- All Ads 3 -->
        <ins class="adsbygoogle" style="display: inline-block; width: 300px; height: 60px;" data-ad-client="ca-pub-2495074407921808" data-ad-slot="8350786373"></ins>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script></center>
    
        </td>
        </tr>
        <tr>
        <td style="padding-left: 7px; padding-right: 7px; color: #000000; border-top: 1px solid black; font-size: 12px; font-weight: bold; font-style: italic;" colspan="3">
    
        Some Of The Vendors Have Discontinued E&amp;J Or The Row, The Pages Will Update Soon With New Products<br/><br/>
    
        Nirvana Is Available<br/><br/>
    
        Sometime Soon More Products Are Going To Be Available, Everything About The Store Is Changing And Will Be Different
    
        </td>
        </tr>
        <tr>
        <td style="padding-left: 15px; color: #000000; border-top: 1px solid black; font-size: 20px; font-weight: bold; font-style: italic;" colspan="3">Elizabeth &amp; James</td>
        </tr>
        <tr>
        <td style="color: #808080; border-top: 1px solid black; padding-left: 30px; font-size: 14px; font-weight: bold; font-style: italic;" colspan="3">Accessories</td>
        </tr>
        <tr>
        <td style="width: 35%; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/bags">Bags</a><br/>
        <a style="color: #00138e;" href="http://olsenfashionnook.com/shades">Sunglasses</a></td>
        <td style="width: 35%; padding-left: 15px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/necklaces">Necklaces</a><br/>
        <a style="color: #00138e;" href="http://olsenfashionnook.com/earrings">Earrings</a></td>
        <td style="width: 30%; padding-right: 71px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/bracelets">Bracelets</a><br/>
        <a style="color: #00138e;" href="http://olsenfashionnook.com/rings">Rings</a></td>
        </tr>
        <tr>
        <td style="color: #808080; border-top: 1px solid black; padding-left: 30px; font-size: 14px; font-weight: bold; font-style: italic;" colspan="3">Nirvana</td>
        </tr>
        <tr>
        <td style="width: 25%; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/fragrance">Fragrance</a><br/>
        <a style="color: #00138e;" href="http://olsenfashionnook.com/bodyoil">Body Oil</a></td>
        <td style="width: 75%; padding-left: 15px; font-size: 12px; font-weight: bold; font-style: italic;" colspan="2"><a style="color: #00138e;" href="http://olsenfashionnook.com/dryshampoo">Dry Shampoo</a></td>
        </tr>
        <tr>
        <td style="color: #808080; border-top: 1px solid black; padding-left: 30px; font-size: 14px; font-weight: bold; font-style: italic;" colspan="3">Clothes</td>
        </tr>
        <tr>
        <td style="width: 25%; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/skirts">Skirts</a><br/>
        <a style="color: #00138e;" href="http://olsenfashionnook.com/dresses">Dresses</a></td>
        <td style="width: 30%; padding-left: 15px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/pants">Pants</a><br/>
        <a style="color: #00138e;" href="http://olsenfashionnook.com/jeans">Jeans</a><br/>
        <a style="color: #00138e;" href="http://olsenfashionnook.com/shorts">Shorts</a></td>
        <td style="width: 45%; padding-right: 71px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/tops">Tops</a><br/>
        <a style="color: #00138e;" href="http://olsenfashionnook.com/coats">Coats</a><br/>
        <a style="color: #00138e;" href="http://olsenfashionnook.com/blazers">Blazers</a></td>
        </tr>
        <tr>
        <td style="padding-left: 15px; color: #000000; border-top: 1px solid black; font-size: 20px; font-weight: bold; font-style: italic;" colspan="3">The Row</td>
        </tr>
        <tr>
        <td style="color: #808080; border-top: 1px solid black; padding-left: 30px; font-size: 14px; font-weight: bold; font-style: italic;" colspan="3">Accessories</td>
        </tr>
        <tr>
        <td style="width: 25%; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/rowbags">Bags</a></td>
        <td style="width: 75%; padding-left: 15px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/rowsunglasses">Sunglasses</a></td>
        </tr>
        <tr>
        <td style="color: #808080; border-top: 1px solid black; padding-left: 30px; font-size: 14px; font-weight: bold; font-style: italic;" colspan="3">Clothes</td>
        </tr>
        <tr>
        <td style="width: 25%; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/rowskirts">Skirts</a><br/>
        <a style="color: #00138e;" href="http://olsenfashionnook.com/rowdresses">Dresses</a><br/>
        <a style="color: #00138e;" href="http://olsenfashionnook.com/rowpants">Pants</a><br/>
        <a style="color: #00138e;" href="http://olsenfashionnook.com/rowjeans">Jeans</a></td>
        <td style="width: 30%; padding-left: 15px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/rowtops">Tops</a><br/>
        <a style="color: #00138e;" href="http://olsenfashionnook.com/rowblouses">Blouses</a><br/>
        <a style="color: #00138e;" href="http://olsenfashionnook.com/rowsweaters">Sweaters</a><br/>
        <a style="color: #00138e;" href="http://olsenfashionnook.com/rowleggings">Leggings</a></td>
        <td style="width: 45%; padding-right: 71px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/rowcoats">Coats</a><br/>
        <a style="color: #00138e;" href="http://olsenfashionnook.com/rowjackets">Jackets</a><br/>
        <a style="color: #00138e;" href="http://olsenfashionnook.com/rowblazers">Blazers</a></td>
        </tr>
        <tr>
        <td style="width: 100%; border-top: 1px solid black; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;" colspan="3"><a style="color: #00138e;" href="http://shrsl.com/?h98n" target="_blank" rel="noopener">Home Living Style – Home Furniture</a></td>
        </tr>
        <tr>
        <td style="width: 100%; border-top: 1px solid black; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;" colspan="3"><a style="color: #00138e;" href="http://nookfragrance.com" target="_blank" rel="noopener">Women's Fragrance Blog/Store</a><br/>
        <a style="color: #00138e;" href="http://thenotablenook.com" target="_blank" rel="noopener">The Notable Nook/A General Forum</a><br/>
        <a style="color: #00138e;" href="http://celebritynook.net" target="_blank" rel="noopener">Celebrity Pic Forum</a><br/>
        <a style="color: #00138e;" href="http://www.nookmoviepreview.com" target="_blank" rel="noopener">Movie Preview Site</a><br/>
        <a style="color: #00138e;" href="http://www.nookselfimprove.net" target="_blank" rel="noopener">Self Improvement Blog</a><br/>
        <a style="color: #00138e;" href="http://mandatoryblogseo.com" target="">Mandatory Blog SEO</a>
        </td>
        </tr>
        <tr>
        <td style="padding-left: 7px; font-size: 12px; font-weight: bold; color: #808080;" colspan="3">
    
        <iframe style="border: 2px solid #a8830a; border-radius: 10px;" src="//www.dailymotion.com/embed/video/x52tafa" width="300" height="169" frameborder="0" allowfullscreen=""></iframe>
    
        Mary Kate And Ashley Olsen<br/>
    
        Two Of A Kind - First Crush<i> by <a href="http://www.dailymotion.com/corey-preiss1" target="_blank" rel="noopener">corey-preiss1</a></i>
    
        </td>
        </tr>
        </tbody>
        </table>
    
    
    Code (markup):

    SEMrush
     
    tunescool, Jul 12, 2017 IP
    SEMrush
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,987
    Likes Received:
    1,122
    Best Answers:
    22
    Trophy Points:
    400
    #2
    Strange.

    When I run it on jsfiddle in Chrome, it shows just fine on my end: https://jsfiddle.net/0byke1b7/

    Do you also have an external .css? It could be that some wordpress <table> css codes are interfering with your new code. Secondly, I'd try to clear cookies in Chrome to see if they have something to do with that (I assume you've already done that, though).
     
    qwikad.com, Jul 12, 2017 IP
  3. tunescool

    tunescool Well-Known Member

    Messages:
    419
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    108
    Digital Goods:
    1
    #3
    the only other css i have, i think, is some custom stuff in my themes settings

    i cleared the cookies, same
     
    tunescool, Jul 12, 2017 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,481
    Likes Received:
    366
    Best Answers:
    28
    Trophy Points:
    335
    #4
    I just opened the page in Chrome and it looks the same as in Firefox.

    Something to consider:
    Different browsers are more or less aggressive about shrink wrapping content; absolute position elements, table elements, inline block elements e.g. Used to be a major issue with IE and to a lesser extent in Chrome and Opera. I'm retired now and no longer have IE or Opera on any of my Linux machines. :shrug: I'd expect the table to overflow its container rather than drop down if that's the case

    The drop down leads me to wonder if you've changed the display property on the th/td elements, say to inline block?

    Another thought: Does this drop-down event happen at all window sizes?

    gary
     
    kk5st, Jul 12, 2017 IP
  5. tunescool

    tunescool Well-Known Member

    Messages:
    419
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    108
    Digital Goods:
    1
    #5
    the only inline block i have is the facebook and donate buttons

    i never said anything about drop-down

    but youre saying everything is fine with the tables on your browser

    does it work for everyone else

    http://olsenfashionnook.com
     
    tunescool, Jul 12, 2017 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    724
    Best Answers:
    152
    Trophy Points:
    470
    #6
    Regardless of whether or not it works - it's not the right way to use HTML - those are not tabular data, and should not be put into tables at all. There are plenty of better way to achieve what you want, tables not being one of them. Those are lists, not tabular data. Hence it should be formatted as a list, and if you want it to wrap nicely, you can use modern techniques like flex-box or similar methods. But it should not be put into tables (also because tables often behave weirdly when screen-sizes differ, and can be unpredictable).
     
    PoPSiCLe, Jul 12, 2017 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,481
    Likes Received:
    366
    Best Answers:
    28
    Trophy Points:
    335
    #7
    That's what your image shows the cells doing.
     
    kk5st, Jul 12, 2017 IP