Reputation: 337
<script id="canteen_card_row_template" type="text/html">
<div class="normal-box">
<div class="subtitle-box">
<div class="mensa-img">
<img src="{{type.[0].image}}" id="mensa-image">
</div><span class="options-title" id="mensa-text">{{title.de_DE}}</span>
</div>
<div class="side-text-box">
<span class="side-text">{{price.student}}€</span>
</div>
<div class="small-text">
<span class="normal-text" id="mensa-text">{{content}}</span>
</div>
</div>
</script>
CSS
#mensa-image{
height: 13px;
width:13px;
border: none !important;}
I have the problem where img src="blabla"
is... Using handlebars and a webservice that template is loaded 4 times.. The fourth "normal-box"
does not have content therefore no image(thats ok).. the problem is, since it has no image the div
where the image is placed should be blank, but there an unwanted border instead... Here is an image of how it looks like pic
Upvotes: 0
Views: 351
Reputation: 388
That's the work of the browser when no image is found. The easiest fix is just to add a transparent .png.
Upvotes: 1
Reputation: 67814
Try this CSS rule instead and remove the ID from the image:
.mensa-image img {
border: none;
}
and HTML (partly):
<div class="subtitle-box">
<div class="mensa-img">
<img src="{{type.[0].image}}">
</div>
<span class="options-title">{{title.de_DE}}</span>
</div>
As @Lowcase wrote, you should not use an ID several times (same for the text span
, BTW). If you simply remove the ID, the above rule should work.
Upvotes: 1
Reputation: 5699
Use 0 instead of none
border: 0;
not
border: none;
Also, if you are generating multiple "mensa-image" images then you should be using class instead of ID.
Upvotes: 3