-1

I have a div with the class "flag" with a picture inside of it. The div is sitting nested inside of another div named "top". "top" contains a number of other divs inside of it. For some reason the "flag" CSS class listed below isn't being applied to the "flag" div with the same class. Why?

.flag img {
  width: 1px;
  height: 1px;
  margin: auto;
}
<div name="top">
  <div class="blog-title">
    <a href="https://prop11-2.tumblr.com/"> Vote Yes On Proposition 11.2 </a>
  </div>
  <div class="flag">
    <img src="https://ak3.picdn.net/shutterstock/videos/2565830/thumb/1.jpg"> </img>
  </div>
  <div id="description" class="container">
    <h1> Proposition 11.2 is an amendment to the already in place law that allows the humane execution of inmates via what our scientists are calling "Orbital Execution".
    </h1>
  </div>
</div>

This should result in the picture in the above div being 1px by 1px, but for some reason it isn't working. For the life of me, I can't figure our why. What punctuation mark did I miss?

edit: for some reason, I made a new CSS class titled "flag2" and that seemed to do the trick. I still have no idea what was wrong, all I did was copy and paste the "flag" class, rename it to "flag2" and changed the target of the div class.

user4864095
  • 9
  • 2
  • 5
    There's no `` tag. Other than that I see no reason why it wouldn't apply. Do you have other CSS rules that are overriding that one? – j08691 Apr 24 '17 at 21:04
  • The image tag is a self-closing one, so the correct syntax would be ``. But the css class is being applied. Check it again, because a 1px by 1px image is a little difficult to see... :P – LcSalazar Apr 24 '17 at 21:17
  • 1
    when you say it's not working, what exactly do you mean? Because when I run your code snippet, there's a very tiny black dot underneath the 'V' in 'Vote...'. That's your 1px by 1px image. – heyitsjhu Apr 24 '17 at 21:17
  • Off of your edit.... might wanna check for a typo in your css, that sounds like a missing `}` or such. – abluejelly Apr 24 '17 at 22:38

2 Answers2

0

Images are display:inline by default, and so setting a width, height, and margin:auto won't work like you expect. Try setting display:block on the IMG tag as well. That should do the trick.

Alex MacArthur
  • 2,220
  • 1
  • 18
  • 22
  • I'm not sure I understand-width and height set the width and height. What expectations do you believe the OP is missing? – Dave Newton Apr 24 '17 at 21:26
  • 1
    No, I'm sorry that's not correct. Although browsers render the `` tag as `display: inline` by default, it acts as a `display: inline-block` as a special treatment to images. So width and height will work as well. See here: http://stackoverflow.com/questions/2402761/is-img-element-block-level-or-inline-level – LcSalazar Apr 24 '17 at 21:26
  • Still doesnt work. I added display: block; to the .flag img{} and nothing changed, it still gives me the same result. For some reason, I suspect that the CSS isn't even applying itself to the div because none of the changes are reflected and when I inspect the page via the chrome inspection tool, it doesn't tell me that the flag image has ANY css. – user4864095 Apr 24 '17 at 21:57
  • Are you sure this CSS file is even being loaded? Check out the source of the page and confirm that. – Alex MacArthur Apr 24 '17 at 22:01
  • They're only `inline` because they technically don't declare their `display` to anything else. The effective decl is `display:inline-block;`, however, as they support `height`/`width` by default ([attributes too](https://www.w3.org/TR/2011/WD-html-markup-20110405/img.html)), which requires block. [W3 Schools](https://www.w3schools.com/tags/tag_img.asp) also claims it's `inline-block` for most browsers. – abluejelly Apr 24 '17 at 22:34
0

It does work however your style is only 1px making it difficult to see, try increasing few pixels

.flag img{
  width: 100px;
  height: 100px;
  margin: auto;
}
CodeBox
  • 446
  • 4
  • 19
  • The flag actually is appearing at its full size, instead of the 1px * 1px that I declared in the class. That's the issue – user4864095 Apr 24 '17 at 21:55