Using HTMLEditorKit in Java, <img> tags are ignoring my CSS styles (but text accepts styles just fine)

Question

Okay, so I am working on a "chat window" in Java that's built with HTMLEditorKit. The general approach is that I first build up a stylesheet using StyleSheet.addRule(). The stylesheet I build up is:

body  {color:#ff00ff; font-family:SansSerif; font-size:12pt;}
p     {color:#ff00ff; font-family:SansSerif; font-size:12pt;}
.msg  {color:#ff00ff; font-family:SansSerif; font-size:12pt;}
.csa  {color:#ff0000; font-family:SansSerif; font-size:12pt;}
.usa  {color:#0000ff; font-family:SansSerif; font-size:12pt;}
.icon {width:16px; height:16px; object-position:0 5px; }

Then, when I have a chat line I want to apply, I put it in a div and add it to the JTextPane:

try {       
  kit.insertHTML(doc, doc.getLength(), "\n<div class="+style+">" + s + "</div>", 0, 0, null);                   
} catch (BadLocationException ble) {
  ErrorDialog.bug(ble);           
} catch (IOException ex) {
  ErrorDialog.bug(ex);            
}
conversation.update(conversation.getGraphics()); //Force update of graphics

So far, this is all working fine! Next, there is the issue of wanting to be able to add little images into the text.

Adding the images themselves goes along fine too, as long as I stick to html attributes, e.g.:

<img src="dice.png" width="16" height="16">

BUT, as soon as I try to do EITHER of the following two things, it IGNORES all my styling:

<img src="dice.png" class="icon">

<img src="dice.png" style="{width:16px; height:16px; object-position:0 5px; }">

I have tried all sorts of workarounds including span tags, I have tried id styling (e.g. #icon and id="icon"), separate divs, etc. No joy!

This is an add-on to some legacy software running under a pretty old version of Java (1.8), so I'm always "expecting the worst", but as I say all the other CSS style elements (as far as text and layout go) are working perfectly. Looking for any troubleshooting hints, OR if there are somehow special HTMLEditorKit limitations with images (but again all my images work great as long as I stick with html attributes instead of CSS, and yet all my CSS works fine with text). Many thanks for any help.

Answer 1

try setting the image to display: block or display:inline-block. inline-block might not be supported. if an image is display: inline, then height and width properties won't affect the image. Also recommended to only set width to maintain aspect ratio.

.icon1 {
  width: 100px;
  height: 100px;
  display: block;
}

.icon2 {
  width: 110px;
  height: 110px;
  display: inline-block;
}

.icon3 {
  width: 120px;
  display: block;
}


/* extra styles for example */

img {
  margin: 4px;
}

<div class="wrap">
  <!-- div not required, just to wrap image in this example -->
  <img src="https://placekitten.com/130/130" class="icon1">
  <img src="https://placekitten.com/128/128" class="icon2">
  <img src="https://placekitten.com/132/132" class="icon3">
</div>

Edit:

Using a div with a background image set with background-image: url(path/to/image/file) might work if you set the divs height and width.