I need help. This has been bugging me for days and I cannot for the life of me figure out what is happening.

I’m on Firefox Developer Edition version 90.0b12, Safari version 14.1.1 and Edge version 91.0.864.59.

r/webdev - Image causing weirdness on rest of page

the code

I have div with an image in the HTML. In my CSS, both the html body elements have height: 100%; and the body is a grid element, with place-items: center;. The div (card), has height and width 66%. The image is a child of the div, and if I would made it height: 100%, it would make it the same height as the div. Except it does not. On Firefox and Edge (Chrome and Opera too). On Safari I get expected behaviour.

r/webdev - Image causing weirdness on rest of page

Safari, expected behaviour

r/webdev - Image causing weirdness on rest of page

Firefox (1/2)

r/webdev - Image causing weirdness on rest of page

Firefox (2/2)

r/webdev - Image causing weirdness on rest of page

Edge (1/2)

r/webdev - Image causing weirdness on rest of page

Edge (2/2)

Edge makes the height of image the same height as the body, so it doesn’t get the height of the parent, but the containing block of the parent. This does not happen with non-image elements (like divs).

Now let’s do height: 10%; on the image.

r/webdev - Image causing weirdness on rest of page

the code, with height: 10% on the image element

r/webdev - Image causing weirdness on rest of page

Safari, expected behaviour

r/webdev - Image causing weirdness on rest of page

Firefox (1/2)

r/webdev - Image causing weirdness on rest of page

Firefox (2/2)

r/webdev - Image causing weirdness on rest of page

Edge (1/2)

r/webdev - Image causing weirdness on rest of page

Edge (2/2)

Again, Safari is doing what I think is supposed to happen. Having the image on the card pushes the card down on Firefox, and I don’t know what the hell Edge is doing (it’s the same with Chrome and Opera). When I remove the image from the HTML, the card is centred on all browsers.

Why is this happening?

Let me know if I have given sufficient information.



Source link

Write A Comment