CSS img[src="..."] not being applied

Question

At this page, I have the image

which is @ http://www.orsgroup.com.au/wp-content/uploads/2012/11/MH-Logo.png

The page above has this stylesheet, which contains:

img[src='http://www.orsgroup.com.au/wp-content/uploads/2012/11/MH-Logo.png'] {
    width: 103px;
    height: 192px;  
}

However, the image is not being set to width: 103px or height: 192px, in fact, the CSS rule is not being applied at all.

I can't work out why - can you? Thanks.

Update: I've added a class so that the image tag is now:

<img class="alignright MHlogo" alt="MH Logo" src="http://www.orsgroup.com.au/wp-content/uploads/2012/11/MH-Logo.png" width="103" height="192">

and CSS:

.MHlogo {
    width: 103px;
    height: 192px;      
}

But .MHLogo is not being applied?

Update2: I commented out

img {
    width:auto;
    max-width: auto !important;
    height: auto !important;
    box-shadow: #000 0em 0em 0em !important;
}

and .MHLogo is now being applied.

Create a JS Fiddle of it, that will help us to identify the problem. — Naqash Malik, May 17 '16 at 05:37
Why you have chosen such a lengthy way to style? Apply a class to your image and style it in css? — Mohammad Usman, May 17 '16 at 05:38

score 4 · Accepted Answer · answered May 17 '16 at 05:47

4

If you insist on making it by href, you need to escape it. Something like:

img[src="http\:\/\/www\.orsgroup\.com\.au\/wp-content\/uploads\/2012\/11\/MH-Logo\.png"] {
    width: 103px;
    height: 192px;  
}

<img class="alignright" alt="MH Logo" 
  src="http://www.orsgroup.com.au/wp-content/uploads/2012/11/MH-Logo.png"
  width="103" height="192">

The way I generated this string, is by opening the console in Chrome, and running:

CSS.escape("http://www.orsgroup.com.au/wp-content/uploads/2012/11/MH-Logo.png");

More about CSS.escape()

I agree with everyone here saying that a CSS class is a better way to do it though. I just wanted to make sure I actually answer the specific question.

answered May 17 '16 at 05:47

Meligy

35,654
11
85
109

Hi Melingy, Thank you for solving this question. I've added an update to my question (I've tried using a class but it is not working). – Steve May 17 '16 at 06:22
I added a 2nd update, and the problem is fixed. Thanks. – Steve May 17 '16 at 06:39
Can you explain why you need to escape attribute value? – Justinas May 17 '16 at 06:50
Because special characters have special meaning in CSS, and the parsing isn't good enough to detect string boundaries in attribute value. You can have fun checking the [CSS Standard](https://www.w3.org/TR/selectors/#attribute-selectors), but there's also a good explanation in this SO answer http://stackoverflow.com/a/13988017/146656 which I found to reply to the comment. – Meligy May 17 '16 at 19:47

score 0 · Answer 2 · answered May 17 '16 at 05:41

0

you can add width and height in your stylesheet as

.alignright {
    width: 103px;
    height: 192px;
}

answered May 17 '16 at 05:41

Anubhav pun

1,323
2
8
20

score 0 · Answer 3 · answered May 17 '16 at 05:44

0

width:auto,height:auto property is overriding your required height and width in the style sheet

answered May 17 '16 at 05:44

akhil viswam

496
9
24

score -2 · Answer 4 · answered May 17 '16 at 05:42

-2

try this

<img class="alignright" alt="MH Logo" src="http://www.orsgroup.com.au/wp-content/uploads/2012/11/MH-Logo.png" style="
height: 103px !important;
width: 129px !important;">

You can move height and width to css class if it works.

answered May 17 '16 at 05:42

M.K

218
3
10

Inline styling is always a bad idea, as well as `!important`. For debugging purposes it may be useful, but it does not guarantee that moving those properties to the class's css will work. I would change your last statement to something like "if it works there and not on the css class it's because something is overriding those properties elsewhere." – Tiago Marinho May 17 '16 at 05:45

CSS img[src="..."] not being applied

4 Answers4