CODEWITHSUNDEEP
javascripthtmlcss
Sebastian Ampuero Morisaki
Sebastian Ampuero Morisaki

Reputation: 337

unwanted border on image css styling

<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

Answers (3)

J.DD
J.DD

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

Johannes
Johannes

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

Lowkase
Lowkase

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

Related Questions