Font-family problem and picture alignment in table

Try adding this to your stylesheet to change the font and centre the contents of all table cells. You will then need to specify a left-alignment where you want to override the centering.

td {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center !important;
}

Let me know if this works.

Hi zoonini,

First of all, thanks for your reply and suggestions. I added your suggestion at the end of my child located “twentyeleven’ style.css, and indeed, the font is now the same, text is aligned in the cells.
Because of this, I tried myself to remove certain html <table> and <td> commands in the WP page and inserted them in the child style.css.
Regarding this issue, that part of the style.css looks as follows:

/* Experimental table commands to get it as I want and to get rid of the html codes*/
table, td {
border: 5px double #666;
}

td {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
text-align: center !important;
vertical-align: bottom;
}

Adding the table command works much easier and is applicable for all tables, so no longer a need to add this in the html page.
Although I’m trying, I’m still stuck with a few problems.
They are:

I’m still stuck with the images in the table cells. I’ve got no idea how to align these. The text is aligned, but not the images.

I want to add (via the style.css) some space (like a paragraph) at the end of each table. Let’s give you an example how a table html looks like …..
<table style=”width: 750px; margin: 0pt auto;”>
<tbody>
<tr>
<td> <img src=”https://avsim-reviews.flight-simulation.eu/wp-content/uploads/2011/07/evo/T_doc1.jpg&#8221; alt=”” /></td>
<td> <img src=”https://avsim-reviews.flight-simulation.eu/wp-content/uploads/2011/07/evo/T_doc2.jpg&#8221; alt=”” /></td>
<td> <img src=”https://avsim-reviews.flight-simulation.eu/wp-content/uploads/2011/07/evo/T_doc3.jpg&#8221; alt=”” /></td>
</tr>
<tr>
<td>Airbus Evolution Series Notes</td>
<td>Checklists</td>
<td>Pilot’s Guide</td>
</tr>
</tbody>
</table>

I tried to do something with the margin command, but that failed. I’ve got no idea what the auto means. Somewhere or somehow this is now in the html, and my feeling tells me that this could be transferred to the style.css as well.

I’ll try in the mean time and hopefully I’ll find the solution myself.

Thanks in advance for your reply.
Angelique

can you please give us the link of your website to give you the solution? Maybe the exact page link that you wish to modify.

Valentin

Hey Valentin,

Thanks in advance for your reply.
The link was/is in my first posting, but it’s easier when I added it again. So, here you are:

Oops, something went wrong .. no link!
Then I’ll do it this way -> https://avsim-reviews.flight-simulation.eu/?page_id=246

Ok, for the images,
Go to styles.css line 786.
There is a padding that prevents the align center of the image. Change from padding: 6px 10px 6px 0; to padding: 0px;
Also add bellow that line a text-align:center;

As for the space below the tables
In styles.css line 770 add a:
margin-bottom:10px; (replace 10 with your own size)

I think this will do the trick.
Waiting for your reply.

Valentin

Valentin,

The padding suggestion works however, the “margin-bottom:10px;” doesn’t have any influence. Since I’m working with a style.css child file, I thought probably it’s due to this. After that thought, I added this line also in the normal style.css file, but with no result.
Find below what I did regarding the “margin-bottom:10px;”

.entry-content table,
.comment-content table {
border-bottom: 1px solid #ddd;
margin: 0 0 1.625em;
width: 100%;
margin-bottom:10px;
}

I hope this is what you mean?

Yes, i seen now that you have a child theme, so the theme is influenced by 2 css files. This is a bit of a problem. First of all from what you wrote above, you have the margin: 0 0 1.625em; that will now work with margin-bottom:10px;

The margin CSS rule can be used as following: margin: top right bottom left, or margin-top margin-right margin-bottom margin-left. Hope you understand. So instead of the two mentioned above, replace with
margin: 0px 0px 10px 0px;

The css class that define the td in your site are as follows:
.entry-content td, .comment-content td
in twentyeleven_child/styles.css at line 110
and
.entry-content td, .comment-content td
in twentyeleven.styles.css at line 786

Valentin

Valentin,

What I understand from reading the webs, the style.css (from the child theme) is loaded and refers to the twentyeleven style.css. Those settings are loaded, but modified by the style.css from the child theme. Ok, I’ll add below the complete contents of the child style.css file. What you see below are all the mods I made for the child website.

[please use a Pastebin to post large chunks of code, following forum etiquette]

The last block in the child style.css is changed as you suggested (I hope I did understand you correct), but not the expected result. Is it correct to write that first from the twentyeleven style.css “margin: 0 0 1.625em;” is loaded and implemented and then modified by the child style.css “margin: 0px 0px 10px 0px;”?