Icon for links is too big

After inspecting the produced html  code, it seems that the following code is produced:

<code>

< img src="//bibbase.org/img/filetypes/link.svg alt="Generalized collision-free velocity model for pedestrian dynamics [link]" title="link" class="bibbase_icon" >
</code>

I think here the attribute style="height: 16px;" may solve the problem.

What you are seeing is certainly not the default behavior. The default theme loads this CSS, which sets the size of the icon:

img.bibbase_icon {
      width: 20px;
      max-height: 16px;
      vertical-align: text-top;
      filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */
      filter: grayscale(100%); /* Current draft standard */
      -webkit-filter: grayscale(100%); /* New WebKit */
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%); 
      -o-filter: grayscale(100%);
      filter: gray; /* IE6+ */
}

I assume either your browser didn't load that for some reason, or you have CSS defined on your page that interferes with this. That said, when I open your link it looks fine:

Hallo Christian,

thank you for your prompt answer!

I "solved" the problem, by dispensing with the use of "url" in the publications. This is why you don't see anything weird.

But, now I made a small change (just for you ^^), by reintroducing the "url" in one of the documents.

Checkout under "masterthesis"

A Knowledge-Based Routing Framework for Pedestrian Dynamics Simulation. Haensel, D. Master's Thesis,

What I don't really understand is that the other styles work just fine, only the default one does not.

(I like only the default style though! :-) )

I restarted my laptop, loaded the page with Firefox, Safari, and Chrome. No luck!

I have some CSS files there

https://github.com/chraibi/jpscore/tree/614_documentation/docs/css

but I'm not an expert in CSS so I'm not sure how I can go on debugging this.

EDIT:

I found this code in the produced page:

"< img src="//bibbase.org/img/logo.svg" style="vertical-align: middle; margin-left: 3px; height: 16px;" alt="bibbase.org" title="BibBase -- The easiest way to maintain your publications
page" >"

Here it seems that for the logo these little hight definitions are given.

EDIT2:

My "solution" is now to copy/paste your CSS snippet in my theme CSS

https://github.com/chraibi/jpscore/blob/614_documentation/docs/css/theme-blue.css

then all look nice again!

Just out of curiosity, and also because my hack is not nice, do you know why exactly  this happens?

Indeed the max-height property is being overridden by some other CSS on your page. In this screenshot see how max-height in "img.bibbase_icon" is crossed out. There are several rules with higher priority (above in the list) that set a different value.

The easiest fix for you would be to add:

img.bibbase_icon {
  max-height: 16px !important;
}

to your CSS.

Thank you! Solves my problem.

PS: this bibbase is amazing! Thanks for that too!