WordPress.org

1. kevb8lly
   Member
   Posted 9 months ago #
   

   As Chrome is my browser of choice, I have been working on the table in that. However I noticed today that the formatting on IE and FF is completely wrong.

   Do you have any idea why that may be the case Tobias?

   Kev

   http://www.m-g-pen.com/wp/products/gel-pen-page/

2. kevb8lly
   Member
   Posted 9 months ago #
   

   It's ok, sorted it. FF and IE weren't resolving the image sizes properly. I've adjusted them to make them smaller.

3. TobiasBg
   Member
   Plugin Author
   Posted 9 months ago #
   

   Hi,

   wow, that looks odd. I'm not really sure why Firefox does this (disobey the widths in the <img> tag), but there seems to be a CSS command responsible for this. If you override that with
   

   .wp-table-reloaded-id-123 img {
     width: 600px !important;
   }

   The images and with that the columns should look ok again.

   Regards,
   Tobias

4. kevb8lly
   Member
   Posted 8 months ago #
   

   Hi Tobias

   I've been away for a few days. Thanks for that. It kind of works, but of course it makes the smaller images 600px too which doesn't work.

   http://www.m-g-pen.com/wp/products/ball-pens/

   Those big colour dots should be smaller! lol

   Any other ideas. (Btw I specified the column rather than the whole table)

5. kevb8lly
   Member
   Posted 8 months ago #
   

   See post below. :-)

6. kevb8lly
   Member
   Posted 8 months ago #
   

   I've made the images smaller, and that has sorted it - actually it looks better.

   I have another problem though. In FF the right border isn't being presented properly. Looks fine in Chrome and IE.

   The code is the same for all tables, but with a different hex colour:

   .wp-table-reloaded-id-1 .column-1 {
   
   border-left: solid 3px #87347b !important;
   }
   
   .wp-table-reloaded-id-1 .column-3 {
   border-right: solid 3px #87347b !important;
   }
   
   .wp-table-reloaded-id-1 .row-1 {
   border-top: solid 3px #87347b !important;
   }

7. kevb8lly
   Member
   Posted 8 months ago #
   

   I mean left border! Sorry mate.

8. TobiasBg
   Member
   Plugin Author
   Posted 8 months ago #
   

   Hi,

   ah, that thing with the images makes sense... Making them smaller might then indeed be the best choice, as that will also make your page load faster.

   I'm not really sure about the problem with the border though... :-( Have you tried adding it to the table directly and not to the first columns table cells?

   Regards,
   Tobias

9. kevb8lly
   Member
   Posted 8 months ago #
   

   Just apply border like this you mean:

   .wp-table-reloaded-id-1 {
   
   border-left: solid 3px #87347b !important;
   }

   The trouble is, it adds it to all the left sides. I have 3 columns and 2 columns depending on which table and don't want cell borders inside the table. Is there an "outside" command I can use?

10. TobiasBg
    Member
    Plugin Author
    Posted 8 months ago #
    

    Hi,

    yes, that's what I meant. This code will only add a border to the left side of table 1, but not inside cells.

    Regards,
    Tobias

11. kevb8lly
    Member
    Posted 8 months ago #
    

    It seems to be a problem with the left side of the 1st row and last 2 rows. I've applied the above code to top / bottom / left / right.

    http://www.m-g-pen.com/wp/products/gel-pen-page/

    Only a problem with FF.

12. TobiasBg
    Member
    Plugin Author
    Posted 8 months ago #
    

    Hi,

    that's indeed strange, and I have no idea where that comes from, especially as you don't seem to have code that influences the first and last rows directly... :-(

    However, I suggest that you try to simplify the CSS code for table 1 significantly. Can you try to replace everything between /* table 1 */ and /* table 2 */ with
    

    .wp-table-reloaded-id-1 {
      background-image:url('/wp/wp-content/themes/comet_child/images/purple_bg75.png');
      background-repeat:no-repeat;
      background-size:100% 100%;
      color: #ffffff;
      text-shadow: black 0.1em 0.1em 0.2em;
      border: solid 3px #87347b !important;
    }
    .wp-table-reloaded-id-1 tr,
    .wp-table-reloaded-id-1 td {
      background-color: transparent !important;
      border: none !important;
    }
    .wp-table-reloaded-id-1 .column-1 {
      width: 300px;
    }
    .wp-table-reloaded-id-1 .column-2 {
      width: 150px;
    }
    .wp-table-reloaded-id-1 .column-3 {
      width: 250px;
    }

    That should also apply the background image to the full table which should look better than for the individual cells.

    Regards,
    Tobias

13. kevb8lly
    Member
    Posted 8 months ago #
    

    Tried that, still no joy. The background image still applied to each cell too btw.

14. kevb8lly
    Member
    Posted 8 months ago #
    

    Ok, the full image does work - I was looking at the wrong table! Durr.

    The full image does look better, interestingly enough although it hasn't fully fixed it - it looks a bit better, however the same rows are still slightly off.

15. TobiasBg
    Member
    Plugin Author
    Posted 8 months ago #
    

    Hi,

    okay, another try (this time with the inner borders as well, but much easier CSS):
    

    .wp-table-reloaded-id-1 {
      background-image:url('/wp/wp-content/themes/comet_child/images/purple_bg75.png');
      background-repeat:no-repeat;
      background-size:100% 100%;
      color: #ffffff;
      text-shadow: black 0.1em 0.1em 0.2em;
      border: solid 3px #87347b !important;
    }
    .wp-table-reloaded-id-1 tr {
      background-color: transparent !important;
      border: none !important;
    }
    .wp-table-reloaded-id-1 td {
      background-color: transparent !important;
      border: solid 1px #87347b !important;
    }
    .wp-table-reloaded-id-1 .column-1 {
      width: 300px;
    }
    .wp-table-reloaded-id-1 .column-2 {
      width: 150px;
    }
    .wp-table-reloaded-id-1 .column-3 {
      width: 250px;
    }

    My assumption is that this is related to the many border-right/left/top/bottom commands that you use, which can cause trouble when not used consistently everywhere. So, a solution without those could maybe fix this.

    Regards,
    Tobias

16. kevb8lly
    Member
    Posted 8 months ago #
    

    Ok Done that, looks better - however my shadowing text has now messed up.

    Some are supposed to be white text with black shadow some vice versa and some with dark blue, none are showing.

    Thoughts?

    The full css:

    /*global settings*/
    
    .wp-table-reloaded {
      border: none!important;
      border-collapse: collapse!important;
      border-spacing: 0px!important; /*border controlled by main template css line 1202*/
    
    }
    
    .wp-table-reloaded .column-1 {
    
    vertical-align: middle !important;
      text-align: center !important;
    font-size: 14px;
    
    }
    
    .wp-table-reloaded .column-2  {
    
    vertical-align: top !important;
    text-align: left !important;
    font-size: 14px;
    
    }
    
    .wp-table-reloaded .column-3 {
    
    vertical-align: middle !important;
    text-align: left !important;
    font-size: 14px;
    
    }
    
    /*table 1*/
    
    .wp-table-reloaded-id-1 {
      background-image:url('/wp/wp-content/themes/comet_child/images/purple_bg75.png');
      background-repeat:no-repeat;
      background-size:100% 100%;
    
    color: #000!important;
    text-shadow: white 0.1em 0.1em 0.2em!important;
    
      border: solid 3px #87347b !important;
    }
    .wp-table-reloaded-id-1 tr {
      background-color: transparent !important;
      border: none !important;
    }
    .wp-table-reloaded-id-1 td {
      background-color: transparent !important;
      border: solid 1px #87347b !important;
    }
    .wp-table-reloaded-id-1 .column-1 {
      width: 300px;
    }
    .wp-table-reloaded-id-1 .column-2 {
      width: 150px;
    }
    .wp-table-reloaded-id-1 .column-3 {
      width: 250px;
    }
    
    /*table 2*/
    
    .wp-table-reloaded-id-2 {
      background-image:url('/wp/wp-content/themes/comet_child/images/blue_bg75.png');
      background-repeat:no-repeat;
      background-size:100% 100%;
      color: #000000;
      text-shadow: black 0.1em 0.1em 0.2em;
      border: solid 3px #4e6ead !important;
    }
    .wp-table-reloaded-id-2 tr {
      background-color: transparent !important;
      border: none !important;
    }
    .wp-table-reloaded-id-2 td {
      background-color: transparent !important;
      border: solid 1px #4e6ead !important;
    }
    .wp-table-reloaded-id-2 .column-1 {
      width: 300px;
    }
    .wp-table-reloaded-id-2 .column-2 {
      width: 150px;
    }
    .wp-table-reloaded-id-2 .column-3 {
      width: 250px;
    }
    
    /*table 3*/
    
    .wp-table-reloaded-id-3 {
      background-image:url('/wp/wp-content/themes/comet_child/images/red_bg75.png');
      background-repeat:no-repeat;
      background-size:100% 100%;
      color: #ffffff;
      text-shadow: black 0.1em 0.1em 0.2em;
      border: solid 3px #cb3a46 !important;
    }
    .wp-table-reloaded-id-3 tr {
      background-color: transparent !important;
      border: none !important;
    }
    .wp-table-reloaded-id-3 td {
      background-color: transparent !important;
      border: solid 1px #cb3a46 !important;
    }
    .wp-table-reloaded-id-3 .column-1 {
      width: 300px;
    }
    .wp-table-reloaded-id-3 .column-2 {
      width: 150px;
    }
    .wp-table-reloaded-id-3 .column-3 {
      width: 250px;
    }
    
    /*table 4*/
    
    .wp-table-reloaded-id-4 {
      background-image:url('/wp/wp-content/themes/comet_child/images/orange_bg75.png');
      background-repeat:no-repeat;
      background-size:100% 100%;
      color: #123041;
      text-shadow: white 0.1em 0.1em 0.2em;
      border: solid 3px #d86434 !important;
    }
    .wp-table-reloaded-id-4 tr {
      background-color: transparent !important;
      border: none !important;
    }
    .wp-table-reloaded-id-4 td {
      background-color: transparent !important;
      border: solid 1px #d86434 !important;
    }
    .wp-table-reloaded-id-4 .column-1 {
      width: 300px;
    }
    .wp-table-reloaded-id-4 .column-2 {
      width: 150px;
    }
    .wp-table-reloaded-id-4 .column-3 {
      width: 250px;
    }
    
    /*table 5*/
    
    .wp-table-reloaded-id-5 {
      background-image:url('/wp/wp-content/themes/comet_child/images/yellow_bg75.png');
      background-repeat:no-repeat;
      background-size:100% 100%;
      color: #123041;
      text-shadow: white 0.1em 0.1em 0.2em;
      border: solid 3px #ffdb1e !important;
    }
    .wp-table-reloaded-id-5 tr {
      background-color: transparent !important;
      border: none !important;
    }
    .wp-table-reloaded-id-5 td {
      background-color: transparent !important;
      border: solid 1px #ffdb1e !important;
    }
    .wp-table-reloaded-id-5 .column-1 {
      width: 300px;
    }
    .wp-table-reloaded-id-5 .column-2 {
      width: 150px;
    }
    .wp-table-reloaded-id-5 .column-3 {
      width: 250px;
    }
    
    /*table 6*/
    
    .wp-table-reloaded-id-6 {
      background-image:url('/wp/wp-content/themes/comet_child/images/green_bg75.png');
      background-repeat:no-repeat;
      background-size:100% 100%;
      color: #123041;
      text-shadow: white 0.1em 0.1em 0.2em;
      border: solid 3px #85a852 !important;
    }
    .wp-table-reloaded-id-6 tr {
      background-color: transparent !important;
      border: none !important;
    }
    .wp-table-reloaded-id-6 td {
      background-color: transparent !important;
      border: solid 1px #85a852 !important;
    }
    .wp-table-reloaded-id-6 .column-1 {
      width: 300px;
    }
    .wp-table-reloaded-id-6 .column-2 {
      width: 150px;
    }
    .wp-table-reloaded-id-6 .column-3 {
      width: 250px;
    }

17. TobiasBg
    Member
    Plugin Author
    Posted 8 months ago #
    

    Hi.

    first: No need to post your CSS here, I can see that in the page :-)

    About shadows: I can see them fine in Chrome...
    You might want to try adding them to the .wp-table-reloaded-id-1 td selector and not to the table selector itself.

    Regards,
    Tobias

18. kevb8lly
    Member
    Posted 8 months ago #
    

    Yeah the shadows are working, the font colour isn't changing. Sorry I wasn't clear. :-)

    Tried that on table 1. Font colour still not white. (It was before).

19. kevb8lly
    Member
    Posted 8 months ago #
    

    I've tried putting that code everywhere. The shadows work but the font colour doesn't change.

20. TobiasBg
    Member
    Plugin Author
    Posted 8 months ago #
    

    Hi,

    ah, ok :-) However, the color of the text is black in Chrome, just as you have defined it in the CSS...

    Regards,
    Tobias

21. kevb8lly
    Member
    Posted 8 months ago #
    

    Durrrr!!!!

    Sorry.

22. TobiasBg
    Member
    Plugin Author
    Posted 8 months ago #
    

    Hi,

    no problem! :-) Great to see that everything works now!

    Best wishes,
    Tobias

Reply

You must log in to post.