36

I am designing templates in Channel Advisor for eBay store and it doesn't allow javascript/jQuery. Also, the CSS3 doesn't work in various IE versions specially the img[src=] implementation is broken.

When I use template tags in img like: 

<img src="{{THUMB(ITEMIMAGEURL1)}}"/>

where {{THUMB(ITEMIMAGEURL1)}} is the image path, if the image is missing and the template is posted to eBay then the end result would be like this:

<img src=""/>

and this shows a broken image.

Is there a way to hide <img src=""/> with HTML or CSS that works in IE7+

Improve this question
0

3 Answers 3

Reset to default
97

You can use [attr=val] selector

img[src=""] {
   display: none;
}

The above selector will simply match, if the src attribute has no value. This selector is a general one and will match all the img tag in the document with an empty src, if you want to target specific ones, than use more specific selector like

.class_name img[src=""] {
    display: none;
}

Demo

Demo (Without the above selector, see that red line?)

Alternatively, if you want to reserve the space taken by img tag, you might like to use visibility: hidden; instead of display: none; as display: none; will simply mess your layout where visibility: hidden; will reserve the space, it will just hide the img

See the difference between display: none; and visibility: hidden;

Demo (visibility: hidden;, reserves space)

Demo 2 (display: none;, won't reserve space)

Note: None of the above selectors will REMOVE the img tag from the DOM, it will simply hide it from the front end

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

For SEO issues leaving src empty is not good that's why I personally use # as src. The global Seo friendly selector would be img[src=""], img[src="#"], img:not([src])
10

[attr=value] selector is CSS2, you should be ok.

img[src=""] {
  display:none;
}
Improve this answer

Comments

0

If src attribute is missing altogether:

img:not([src]), img[type='src'], img[type='src'] {
display:none !important;
}

Reference

Improve this answer

Comments