Protostar: Strange behaviour

[sokrates_mx5]

A strange behaviour has just appeared on my multilingual website using the Protostar template.

I have a border around the images that was created in user.css long time ago.

Code: Select all

img {
    border: 1px solid Black;
    border-radius: 5px;
}

Meanwhile I was adding some banners, using the default Joomla Banner system, all of a sudden the borders around the images on the pages of the Spanish language version of the site vanished, but they're still in place on the pages of the English language version of the site.

When inspecting the code one can see that the following code is added only to the Spanish language version of the site:

Code: Select all

<style>
img {
    border: 0 !important;
}

This code in <style> does only show up in the Spanish language version, not in the English language version. Strange!

At the beginning when the page is being loaded the border is shown during a split second but then disappears.

https://terrazas-del-rodeo.com/es/

Where on earth does this <style> code come from?

[sokrates_mx5]

It looks like the code that mess it up comes from <inline style sheet #2>.

What are the purpose with "inline style sheets", where to find them and how are they created?

[Webdongle]

I see borders not the code you say. image please

[sokrates_mx5]

Here is a screen dump where one can see that the image is lacking its border, which is due to the code shown in <inline style sheet #2>. This strange behaviour only appears for the Spanish main page "Portada" (https://terrazas-del-rodeo.com/es/).

Inline-Style-Sheet.jpg

The code in <inline style sheet #2> is:

Code: Select all

@media only screen and (max-width: 580px) {
 .brnone {
  display: none;
 }
 .bodyn {
  width: 320px !important            
 }
 .ancho {
  width: 100% !important            
 }
 .oculto {
  display: none !important            
 }
 .titular {
  font-size: 20px!important            
 }
 .texto {
  font-size: 18px!important            
 }
 .texto span {
  font-size: 30px!important            
 }
 .boton1 {
  float: none!important;
  margin: 0 auto!important            
 }
 .boton2 {
  float: none!important;
  margin: 15px auto 0!important            
 }
 .logo {
  float: none!important;
  margin: 0 auto!important            
 }
}
.Snippet,
.ExternalClass {
 font-size: 13px !important        
}
td,
tr {
 border-collapse: collapse !important        
}
* {
 line-height: 120% !important        
}
a {
 cursor: pointer !important;
 border: 0 !important        
}
img {
 border: 0 !important        
}

Beside that the border of the images, which is most noticeable, even some other alteration of the style appears.

I've emptied the caches and tried with different browsers, but the result is the same.

I just don't understand what creates the code in <inline style sheet #2>.

[sokrates_mx5]

It looks like the strange behavior was caused by a banner.

[Webdongle]

Which browser are you using? The border shows for me.

[sokrates_mx5]

Which browser are you using? The border shows for me.

The screen shot is from Firefox. I tried it on Edge and Chrome too.

The good thing is that I've sourced this issue to one of the banners that was displayed. Now it seems to work as it should again