[Plugin: WP-Table Reloaded] Format Error on FF and IE

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

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

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.

https://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)

See post below. ??

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;
}

I mean left border! Sorry mate.

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

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?

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

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.

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

Only a problem with FF.

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

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

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.

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

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;
}