Contrib.social

Formatting thrown off by comment in CSS file

Open on Drupal.org ā†’
Created on 8 February 2024, 10 months ago
Updated 1 March 2024, 9 months ago

I have a custom css file under the info.tml theme config. The CSS is built around styling an HTML table. While working I happened to save some code in a block comment that now when I try to delete, it throws the table formatting way off. I'm confused how it is even affecting the CSS since is is a comment out but it does.

ckeditor5-stylesheets:
  - css/ck5style.css
  - css/iabck5.css

Here is the code that is commented out:

/*
    <table "border-color:black;border-style:solid;width:250px;" border="1" cellspacing="0" cellpadding="0">
*/

Here's the entire contents of the iabck5.css CSS file:

/*   Remove some formatting from the native ckeditor 5 styling 

.ck-content .table table td, .ck-content .table table th {
 padding: 0em!important;
}

.ck-content p {
 margin: 0px!important;
 padding:0px!important;
}

*/


.iab-table-frame {
 background-color:#2c2e30;
 float:left;
 margin:10px
}

.iab-table-format {
 background-color:#232624
 border-color:black;
 border-style:solid;
 width:250px;"
}

.iab-table-format tr {
 height:10px;
}

.iab-table-format td {
 height:10px;	
 background-color:#232624;
 border:1px solid black;
 color:#3a5572;
 font-family:arial;
 text-align:center;
 white-space:nowrap;
}



/*
    <table "border-color:black;border-style:solid;width:250px;" border="1" cellspacing="0" cellpadding="0">
*/


.iab-rack-table-cell-header {
 color: yellow;
 text-align:center;
}

.iab-rack-table-cell {
  white-space: nowrap;
  color: #3a5572;
  width: 222px;
  border: 1px solid black;
  background-color: #d4d4d4;
  height: 10px;
  font-family:arial;
  font-size: 0.8em;
  text-align: center;
  padding: 0px;
}

.iab-rack-table-cell-rear {
 white-space: nowrap;
 color: #3a5572;
 border: 1px solid black;
 background-color:#232624;
 height: 10px;
 width: 15px;
 font-family:arial;
 font-size: 0.8em;
 text-align: center;
 padding: 0px 3px 0px 3px;
}

.iab-rack-table-cell a {
 text-decoration:none;
 color: black;
}

.iab-rack-table-cell a:hover {
 text-decoration:none;
 color: white;
}

.iab-rack {
 border: 1px solid black;
 font-size: 0.8em;
 background-color: #232624;
}

.iab-rack-number {
 color: #5bba02;
 font-size: 0.9em;
 font-family:arial;
 font-weight:bold;
 padding-left: 2px;
}
šŸ’¬ Support request
Status

Closed: works as designed

Version

11.0 šŸ”„

Component
CKEditor 5Ā  ā†’

Last updated about 17 hours ago

Created by

šŸ‡ŗšŸ‡øUnited States guymandude

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Issue created by @guymandude
  • Comment 10 months ago ā†’
    šŸ‡ŗšŸ‡øUnited States guymandude
  • Comment 10 months ago ā†’
    šŸ‡¦šŸ‡ŗAustralia larowlan šŸ‡¦šŸ‡ŗšŸ.au GMT+10
  • Status changed to Postponed: needs info 10 months ago
  • Comment 10 months ago ā†’
    šŸ‡«šŸ‡·France nod_ Lille

    does the minified file looks ok? maybe the css minifier is having trouble with the comment?

    If you remove the comment, does it looks ok?

  • Comment 10 months ago ā†’
    šŸ‡ŗšŸ‡øUnited States guymandude

    When I remove the comment the display is a mess. See attached screenshot.

    Screenshot

    I have not touched the minifile. How would I check it?

  • Status changed to Active 9 months ago
  • Comment 9 months ago ā†’
    šŸ‡®šŸ‡³India shivam-kumar

    Please add exact file names and the path where the issue is occurring, it is unable to reproduce.

  • Status changed to Postponed: needs info 9 months ago
  • Comment 9 months ago ā†’
    cilefen
  • Comment 9 months ago ā†’
    šŸ‡ŗšŸ‡øUnited States guymandude

    web/themes/custom/infoseciab/infoseciab.info.yml
    web/themes/custom/infoseciab/infoseciab.libraries.yml
    web/themes/custom/infoseciab/css/iabck5.css

  • Comment 9 months ago ā†’
    šŸ‡§šŸ‡ŖBelgium wim leers Ghent šŸ‡§šŸ‡ŖšŸ‡ŖšŸ‡ŗ

    Repeating what @nod_ asked, but with no room for misinterpretation: what happens if you remove

    /*
    <table "border-color:black;border-style:solid;width:250px;" border="1" cellspacing="0" cellpadding="0">
*/

    entirely from that file?

  • Comment 9 months ago ā†’
    šŸ‡ŗšŸ‡øUnited States guymandude

    My apologies, I should have been more clear. I have only ever removed the entire comment. What you see in that screenshot is what happens. The formatting goes haywire.

    I'm not sure if I even have that test box around any more to troubleshoot further.

  • Comment 9 months ago ā†’
    šŸ‡§šŸ‡ŖBelgium wim leers Ghent šŸ‡§šŸ‡ŖšŸ‡ŖšŸ‡ŗ

    That's very helpful, and that's also a relief. Because I can imagine that the CSS minifier doesn't deal with HTML-in-a-comment all to well šŸ˜…

    But given that that's not what you tried, yet you managed to break things, that suggests that there really is something in your fine-looking CSS that's breaking our CSS minifier šŸ¤”

    So I copy/pasted the literal snippet in the issue summary into a CSS validator, and it told me within seconds that there are at least 2 parsing errors šŸ˜…

    .iab-table-format {
 background-color:#232624
 border-color:black;
 border-style:solid;
 width:250px;"
}

    šŸ‘† the 2nd line is missing a trailing semi-colon
    šŸ‘† the 5th line has a trailing double quote that should not be there

    I bet those are causing this.

  • Comment 9 months ago ā†’
    šŸ‡ŗšŸ‡øUnited States guymandude

    Wow, do I feel like a tool Wim. I can't believe I didn't catch those CSS errors. You were right, they were the problem.

  • Status changed to Closed: works as designed 9 months ago
  • Comment 9 months ago ā†’
    šŸ‡¬šŸ‡§United Kingdom longwave UK

    Thank you for getting back to us, glad we could get to the bottom of it.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024