Icon for links is too big

m.chraibi 1 year ago updated by Christian Fritz 1 year ago 6

For some reason in the default theme, the svg-file

is huge and does not render correctly using this GitHub page

Any idea how to fix this?

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


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

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

Under review

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


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


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.


My "solution" is now to copy/paste your CSS snippet in my theme 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!