Chrome and Safari are shrinking images

[Bob Deaver]

All works fine in Firefox, but Chrome and Safari are shrinking images in my tables. Some images are the correct size while others are too small. This page is an example..

http://gardenandsoul.com/sketchy/

I believe I need to adjust the style.css file to make an img setting “none” instead of “100%”, but haven’t found the right setting yet.

Any help is appreciated.

[Sushil Adhikari]

Before I give you a much easier and better solution…did you create this table layout or did a plugin do it for you?

[Bob Deaver]

This was created in Dreamweaver, so not a plugin.

[Sushil Adhikari]

Basically, the issue is with your table structure (somewhere). Technically you should not be using tables for this, so I was about to give you a solution that uses inline columns (which this theme has styling for) because you get to have a consistent structure, but also you can maintain a responsive layout. However, I’m thinking you are not too comfortable working in the “text” view of your editor…especially when you will probably be doing a lot of these shopping layout pages that you have, so here is a sample table to use as a guideline where I create one row of your shopping layout for Dog 1, 2, 3, and 4 notecards:

Dog 1 Notecard
Cream Colored Paper, Blank Inside.
A2 size, 4.25" x 5.5", $3.00

Box of 6, A2 size, 4.25" x 5.5", $11.95



Dog 2 Notecard
Cream Colored Paper, Blank Inside.
A2 size, 4.25" x 5.5", $3.00

Box of 6, A2 size, 4.25" x 5.5", $11.95



Dog 3 Notecard
Cream Colored Paper, Blank Inside.
A2 size, 4.25" x 5.5", $3.00

Box of 6, A2 size, 4.25" x 5.5", $11.95



Dog 4 Notecard
Cream Colored Paper, Blank Inside.
A2 size, 4.25" x 5.5", $3.00

Box of 6, A2 size, 4.25" x 5.5", $11.95

This will allow you to still use tables still if you are more comfortable with that. Add a class to the table like I did “shoppingtable” and then in your stylesheet (your child theme which I see you are using), add this:

.shoppingtable td {
text-align: center;
}
.shoppingtable input {
background: none;
border: none;
}

The above will to a global centering of all your table td cells, plus your input buttons will have that grey background and bordering removed. This means you won’t have to do this to every single table cell because it’s all done from the one css for the complete table and any table that uses the class “shoppingtable”.

If you want a table structure to use, then just add more rows as needed, then use this:

  

    
content
    
content
    
content
    
content
  

Make sure there is nothing else added such as cell-padding, cell-spacing, etc, because this is obsolete now as everything is handled from CSS.

[Bob Deaver]

Thanks. I’ll give that a try later.

[Bob Deaver]

When I get around to really cleaning up my code, I’ll do your suggested method. For a quick fix, I just added this to my table tag…

style=”table-layout: fixed; width: 100%;”

Rather than shrinking my images, it was just making some of my table columns too narrow.

Thanks for your help.

[Sushil Adhikari]

So it is working (or somewhat working) for you now?

[Bob Deaver]

Yes, I’m all set.

[Author]

Posts