0

I'm seeing this weird error on both Chrome and Firefox.

The width and height properties are disabled because Chrome says: "The display: inline property prevents height from having an effect. Try setting display to something other than inline."

But the property below it says display:block.

CSS error

Firefox has a similar message.

I don't know what else I can do.

CSS code:

.test:before {
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 2rem;
    height: 3rem;
    display: block;
    position: absolute;
    left: -3.5rem;
    font-size: 3rem;
    background-image: url("image.jpg"); /* this image doesn't display */
}
Ben Alan
  • 1,399
  • 1
  • 11
  • 27
  • 4
    It's really hard to diagnose a CSS issue without any CSS code. All you have provided is a picture of your dev tools. Please put a code snippet in your question that can reproduce the issue – Chris Barr Jul 17 '23 at 19:11
  • `display:block` should happen BEFORE the height/width are set .. That said, you could be being overwritten by another class .. To test this theory, use `display:block !important;` – Zak Jul 17 '23 at 19:13
  • 3
    FWIW I have seen some errors with the inspector helper tooltips so if everything is working correctly I wouldn’t stress about it. However, if it’s not working as expected you’ll need to post a code example so folks can help https://stackoverflow.com/help/minimal-reproducible-example – Ted Whitehead Jul 17 '23 at 19:14
  • 1
    @Zak The order of CSS properties has no effect in this case. That matters when you have the same property twice, in which case the second one is applied. – Ted Whitehead Jul 17 '23 at 19:15
  • @Zak The order didn't change anything, and the !important didn't either. – Ben Alan Jul 17 '23 at 19:16
  • 6
    Try adding `content: ''` – Fynn Jul 17 '23 at 19:18
  • 2
    Or maybe adding `content: ''` to the pseudo element might work. – Klaassiek Jul 17 '23 at 19:19
  • @Fynn This worked (made my background image show up)! Not sure why the inspector is showing this error. I couldn't reproduce it in jsfiddle anyway. – Ben Alan Jul 17 '23 at 19:27
  • I can reproduce the rendering behavior in [the MDN playground](https://developer.mozilla.org/en-US/docs/Web/CSS/::before#try_it). Setting just `display: block` on the `::before` doesn't cause the lines to break, but adding `content: ''` fixes it. – Darryl Noakes Jul 17 '23 at 21:00
  • This question was more regarding the inspector tooltip text. I didn't care so much about what I was trying to do with CSS. It seems it is just a bug in chrome that also happens to appear in firefox, but is triggered by something specific to the site I was working on. – Ben Alan Aug 22 '23 at 15:27

0 Answers0