No lines inside of tables displayed

No lines inside of tables displayed

by Hartmut Scherer -
Number of replies: 14

Hi all,

When I use tables in web pages, lessons or the database activity with the Anomaly or Aardvark-Makeover theme, the lines within the table (all red lines) are not displayed.

Missing lines in table

I used Firebug to find the proper CSS code, but I was not successful. Changing border-width from 0px to 1px and adding it to the core css file in the theme helped displaying all lines of the table. Unfortunately, these lines also showed up in the user profile data.

th, td, a img {
    border-width: 1px;
}

Can this problem be solved with changing the CSS in themes or is it necessary to change the config.php of themes?

Any advice is highly appreciated.

With kind regards,

Hartmut

Average of ratings: -
In reply to Hartmut Scherer

Re: No lines inside of tables displayed

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Just add that CSS rule to the very end of the main css. In Aardvark Makeover it is aardvark_styles.css (I think!!!) in Anomaly it will be core.css.

Never change the config.php unless adding a new css file.

Mary

Average of ratings: -
In reply to Mary Evans

Re: No lines inside of tables displayed

by Hartmut Scherer -

Hi Mary,

Thank you for your reply and for your warning not to fiddle with config.php in themes.- The lines in the tables are also missing in the standard theme.

How can I style an element and restrict the change only for example for lessons so that user profiles will not be affected? I tried the following code in Aardvark_styles.css

/*ADDED*/
.mod-lesson-view th, td, a img {
    border-width: 1px;
}

but the lines also show up when displaying the user profile data. Can you help me, please?

With kind regards,

Hartmut

Average of ratings: -
In reply to Hartmut Scherer

Re: No lines inside of tables displayed

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

To do this Hartmut, you need to also specify the page and path of the elements you want to style.

If you use Firebug with Firefox, first inspect the element you want to change, and in the HTML side (right) in the Firebug window if you scroll up passed the element you were checking, until you reach the body tag, you will see it specifys the page and the path, something like "page-mod-lesson-view" and "path-mod-lesson" or something similar.

You can then add the css like so...

#page-mod-lesson-view .path-mod-lesson th,
#page-mod-lesson-view .path-mod-lesson td,
#page-mod-lesson-view .path-mod-lesson a img {
    border-width: 1px;
}

I may have this wrong but that is the gist of it. You need to style EACH element th, td and a img although I would not add 'a img' as this would put a line round every image on the page including the icons.

HTH

Mary

Average of ratings: -
In reply to Mary Evans

Re: No lines inside of tables displayed

by Hartmut Scherer -

Hi Mary,

Thank you for your suggestions. I was not successful in styling tables in the lesson module, i.e., either the lines show up everywhere or nowhere, but never in lesson alone. But thanks for offering your help. I always appreciate this.

With kind regards,

Hartmut

Average of ratings: -
In reply to Hartmut Scherer

Re: No lines inside of tables displayed

by Frank Ralf -
Hi Hartmut,

Basically Mary is right with her suggestion. But you must slightly modify her CSS. As given above it won't work because id and class both belong to the body tag so there's no hierarchical connection between them. Using only the id OR the class should do the trick (see screenshot for a proof of concept, database activity with Anomaly theme). You might also use "!important" for giving your own CSS rule a little more punch wink

hth
Frank

Attachment Moodle table borders database activity.png
Average of ratings: -
In reply to Frank Ralf

Re: No lines inside of tables displayed

by Hartmut Scherer -

Hi Frank,

Many thanks for your advice. Now all the lines in the tables appear and I know how to style elements in activities. You and Mary helped me better understand CSS. I really appreciate this.

With kind regards,

Hartmut

Average of ratings: -
In reply to Hartmut Scherer

Re: No lines inside of tables displayed

by Angela Butterworth -

There seems to be a bug in the Advanced tab of the table editor. Like the previous comment, I cannot get lines internally in tables. I assume that choosing Rules-> All should achieve this but it doesn't. If I choose Rules-> Rows, I get rows and if I choose Rules-> Columns, I get columns.

See example in the attachment.

I have tried different themes to see if this would make a difference but there is no change to this problem.

Average of ratings: -
In reply to Angela Butterworth

Re: No lines inside of tables displayed

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
 Cell One  Cell two
 Cell Three  Cell four

This is odd...I think there IS a bug in the Tiny MCE Editor

Mary

Average of ratings: -
In reply to Mary Evans

Re: No lines inside of tables displayed

by Pavel Mynařík -

This is NOT a problem of Tiny MCE Editor because the HTML source is ok.

If you try to show table in web browser you will see, everything is ok. It has to be porblem with CSS styles in Moodle.

Average of ratings: -
In reply to Pavel Mynařík

Re: No lines inside of tables displayed

by James D -

I agree. I think it is a CSS problem as well, but I cannot find the problem in the CSS file.

I am also wondering if it is a TinyMCE problem because it is not in the CSS.

Example:

In Dreamweaver, when you create a table with a border of 1, you get this #1 see attached graphic below.

 <table width="385" border="1" cellspacing="0" cellpadding="0">  

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

</table>

 But in Moodle the above code displays as #2 see attached graphic below:

 

In order to get the table to display correctly in Moodle I have to hard code it as below:

<table style="width: 385;" border="1" cellspacing="0" cellpadding="0">

<tr>

<td style="border: solid 1px #000000;"> &nbsp; </td>

<td style="border: solid 1px #000000;"> &nbsp;</td>

<td style="border: solid 1px #000000;"> &nbsp;</td>

<td style="border: solid 1px #000000;"> &nbsp;</td>

</tr>

<tr>

<td style="border: solid 1px #000000;"> &nbsp;</td>

<td style="border: solid 1px #000000;"> &nbsp;</td>

<td style="border: solid 1px #000000;"> &nbsp;</td>

<td style="border: solid 1px #000000;"> &nbsp;</td>

</tr>

<tr>

<td style="border: solid 1px #000000;"> &nbsp;</td>

<td style="border: solid 1px #000000;"> &nbsp;</td>

<td style="border: solid 1px #000000;"> &nbsp;</td>

<td style="border: solid 1px #000000;"> &nbsp;</td>

</tr>

</table>

 

 

 

Attachment Tables.png
Average of ratings: -
In reply to James D

Re: No lines inside of tables displayed

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

In example #1 Dreamweaver uses normal HTML to add the borders.

Moodle uses XHTML but unfortunatly it's been styled incorrectly. It should read border: 1px solid #000000; it's all in the syntax.

I'll see if I can find where that code is coming from and try and fix it in Moodle CORE.  Looks like another needle in a haystack search. LOL

If what you are doing works in your situation, then that's fine. Carry on.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: No lines inside of tables displayed

by John St -

I think this comes from core in base. Specifically:

th, td, a img {
    border-width: 0;
}

I usually just add:

th, td {
border-width: 1px;
}

Average of ratings: -
In reply to John St

Re: No lines inside of tables displayed

by David Scotson -

I agree with this diagnosis, though I think the fundamental reason is in YUI_combo.php, line 398 (not sure how that translates into the actual original file) where it sets

th, td {
    border: 1px solid rgb(0, 0, 0);
    padding: 0.5em;
}

This would add a border to every table cell in Moodle, so the line in core.css seem like a heavy handed fix for this issue.

I'm fairly suprised that YUI could add this and not cause widespread uproar, and on Googling to see if anyone else was complaining about it I found the bug MDL-27774 which claims the issue was fixed a few days ago.

Actually, on a second read, it seems like it was marked fixed by mistake.

Average of ratings: -
In reply to David Scotson

Re: No lines inside of tables displayed

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

MDL-27774 was assigned to me origially and then assigned to Moodle.com as no-one could make a decision, as is the case for small thing like this.

Patching TinyMCE to add a class selector, which in turn could be styled in Base theme would have worked. I have half a mind to go fix it now!

Cheers

Mary

Average of ratings: -