text-align top in tinymce

[davy_yg]

Hello,

I am having a problem aligning text to the top of the table.

Cek this out: http://gsa-constructionspecialist.com/experiences

All the text is not aligning to the top. It's aligning to the center vertically. I wonder how to align the text to the top with tiny mce.

I don't think I have enough button to do so. I download a free version of tiny mce and start adding plugin with it. I do not know which plugin to add to align the text vertically. And how to add such plugin in tiny mce free version.

Any idea?

The link shows the site. It.s not obvious to which bit you.re referring. What table?

[gentlemedia]

Cek this out: http://gsa-constructionspecialist.com/experiences

Wow! Those colours! ¯_(ツ)_/¯

[davy_yg]

Hello, I create those text within table with border = 0.

The only problem is that the text align vertically center within the table.

For example:

2005 - Now See the text next to it is not align with 2005 - Now, there is a space in between the text next to it (see the right side of Now).

Looks like the useragent stylesheet is setting vertical-align to middle on tbody. Just supply your own tbody.

[davy_yg]

Like how? (this is tinymce)

tbody{
    vertical-align: top; 
}

This is not TinyMCE - it is the default for your browser. TinyMCE is not applying any formatting on this from what I can see.

[davy_yg]

I see what you mean. lol. but the css of tinymce is confusing. I do not know which one to change in order to make all the vertical alignment aligning to top.

[davy_yg]

Hey, I try to edit the tinymce:

https://www.tinymce.com/docs/configure/content-appearance/#body_class

  <script>  
    tinymce.init({
    selector: 'textarea',
height: 200,
    width: 600,
    content_css : '/assets/tinymce/custom_add.css', 
    plugins: [
           'advlist table autolink lists link image charmap print preview anchor',
           'searchreplace visualblocks code fullscreen',
           'insertdatetime media table contextmenu paste code'
            ],
    toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | table',
    content_css: "<?php echo site_url('assets/tinymce/css/codepen.min.css'); ?>",
    file_browser_callback: RoxyFileBrowser
    });  
  </script>

assets/tinymce/custom_add.css

tbody { vertical-align: top; }

Even so, I have not seen the result in my actual website.

This (tbody{...}) should not be in tinymce css file, but in your general site stylesheet. The editor view masy have nothing to do with the displayed html that the viewer sees.

[davy_yg]

The problem is I would like each line that I input horizontally inline with each other not in between space as you see.

I don't think the general style sheet able to do that.

[gentlemedia]

Davy, why aren't you listening to Diafol?

HTML elements have default styling also named browser defaults (placed in user agent stylesheets) and they're according to the spec.
https://www.w3.org/TR/CSS2/sample.html

That said... the browser defaults of tbodyare shown below.

thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }

And this is what you see. Your dates are vertically aligned in the middle of the td The td is placed inside a tbody(even if you didn't do that, the browser does that for you) and as you see above, the td inherits the vertical-align: middle from tbody.
Do you want them at the top of the td, then you override the default styling of tbody in your own sylesheet (not the tinyMC stylesheet... this has nothing to do with it) to vertical-align: top;

So like this:

tbody { vertical-align: top }

[davy_yg]

ok, I have tried what you what you adviced. I place the following code on :

http://www.gsa-constructionspecialist.com/experiences

<link rel="stylesheet" type="text/css" href="<?php echo site_url('assets/css/style.css'); ?>" />

assets/css/style.css

tbody { vertical-align: top }

The article alignment does not change yet.

[gentlemedia]

The article alignment does not change yet.

You mean the dates right? They are aligned at the top of the the td now on my screen.

Flush your cache davy

[davy_yg]

Thanks, it works out correctly now.

[gentlemedia]

Thanks, it works out correctly now.

Good! And now mark as solved, please!