2 replies [Last post]
moonh's picture
Last seen: 9 years 33 weeks ago
Timezone: GMT+2
Joined: 2013-06-12
Posts: 1
Points: 2

I have no idea why but my images won't show at 100%
table.cls-table-gallery td.wpscls-post-content {text-align:center; width:30em;}

If i remove width:30em; it works on firefox but on safari the images are all on top of each other.

Here is the page:

Any help would be great, i am desperate to resolve this issue.

gary.turner's picture
Last seen: 1 year 47 weeks ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

You have so many

You have so many opportunities for error as to wonder whether doing something as usually straightforward as x-browser compatibility is possible without extraordinary efforts. I will offer some simple suggestions that may solve your apparent problem. They will not address the lack of proper structural nor of non-semantic markup.

You're using a table for layout. Tables are for tabular data. To that end, there is a lot of browser controlled flexibility. At best, author specified heights and widths are suggestive only.

For some reason (known only to the WP theme author?), the table and the menu column are positioned absolutely, a generally not-good idea for major layout elements. His use of the .clr class indicates a lack of understanding of its purpose.

Vertical overflow is hidden; not very customer friendly, especially for folks with short browser windows.

The left column, containing your menu, is fixed position. That makes any below-the-fold parts unusable. Fixed position is not scrollable; if it runs off the bottom of the page, it's just lost.

Were it me, I'd simply trash this iteration and start over using better choices. Since it's not my page, I suggest starting by deleting the overflow property on the body element.

body {
  background: none repeat scroll 0 0 #FFFFFF;
  color: #444444;
  font: 14px/1.8 'PT Sans Narrow',Helvetica Neue,Helvetica,Arial,sans-serif;
I also deleted the text-align property as redundant; that's the default.

For the left column, do this:

.container-left {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9);
  left: 40px;
  position: absolute;
  top: 0;
  width: 200px;
Note that I deleted a couple of properties.

For the td elements, edit this:

table.cls-table-gallery td {
  padding-right: 18px;
  vertical-align: top;
Notice the width property is gone.

These edits should allow the table to conform to its content and for your visitors to scroll as needed to view the page and to use its menu.



If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Brendon77's picture
Last seen: 8 years 7 weeks ago
Timezone: GMT+5
Joined: 2013-06-26
Posts: 3
Points: 3

Thanks for shring codes and

Thanks for shring codes and solve my problem, i apply these codes.