Contrib.social

Formatting thrown off by comment in CSS file

Open on Drupal.org ā†’
Created on 8 February 2024, 11 months ago
Updated 1 March 2024, 10 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 2 days 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 11 months ago ā†’
    šŸ‡ŗšŸ‡øUnited States guymandude
  • Comment 11 months ago ā†’
    šŸ‡¦šŸ‡ŗAustralia larowlan šŸ‡¦šŸ‡ŗšŸ.au GMT+10
  • Status changed to Postponed: needs info 11 months ago
  • Comment 11 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 11 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 10 months ago
  • Comment 10 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 10 months ago
  • Comment 10 months ago ā†’
    cilefen
  • Comment 10 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 10 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 10 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 10 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 10 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 10 months ago
  • Comment 10 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