<div>s overlapping in Firefox but not Chrome or Edge

HTML & CSS
1

Hi,
I have created the following codepen that illustrates the problem I am having.

On Windows 10 it works fine in Edge and Chrome but in Firefox if you start with the browser as narrow as possible and gradually expand the width you will notice that just after the 600px breakpoint and just after the 992px breakpoint the divs containing the logo and the text overlap.

I am using the most recent versions of each browser.

Does anyone have any idea why this is so and what I can do to fix it?

I apologise if my code is rambling and difficult to follow. Also, some of the CSS refers to other pages but I left it in in case it is part of the problem.

Any help/pointers gratefully received. Thank you.

2

The divs are not overlappeing. The logo image is overflowing its div container.

For the logo use margin:20px; instead of padding:20px;

1 Like
3

That worked - thank you. I wonder why the problem occured in Firefox but not Chrome or Edge?

4

I don’t know why the problem only occurred in Firefox.

It would have been appropriate to apply the padding to the div containing the logo image.

1 Like
5

It looks like Firefox can’t really work out how wide that image is because you have not set a size for it explicitly.

e.g.

.container2 img{
  width:100%;
  height:auto;
}

I would also apply the natural height and width attributes in the html otherwise the correct space cannot be computed until the resource has loaded and then overlaps or reflows may occur.

i.e.

<img src="https://www.danieljeffery.co.uk/coffeechoice/images/precisionHeatingLogo.svg" class="logo" alt="Precision Heating Logo" width="1151" height="987">

Browsers always look at the html attributes of the image before they css the css and if present can compute the size properly even if resized later with css.

As @Archibald said above applying padding to an image is a bit weird anyway and you would be better
off with padding on the container or margins on the image.

It also looks like the issue could be fixed if you added box-sizing:content:box to the image. Im guessing that the 1fr grid size is computed on the image’s size but the padding on the image is being added to the image’s width which the browser has now mis-calculated.

There have always been problems with browsers trying to work out the width of containers where the width of the container is dependent on the width of its content whose content is also based on the width of its parent (browsers hate circular references). The spec says that in these cases the layout is undefined.

None of which answers the problem explicitly so I would guess that Firefox’s behaviour is buggy but not unexpected.:slight_smile:

1 Like
6

Wow. Comprehensive answer, as always. Thank you very much.
I wish my brain could get the overview of these things that you seem able to get. More learning points - thank you.

7

How did you derive those figures for the height and width of an SVG?

8

Well I just cheated and pasted the image into the browser and read the height and width it gave me. It will have the correct aspect ratio but I assumed you knew the intrinsic width and height of the svg you created :slight_smile:

9

Ah, I see. So it’s the aspect ratio that is significant?

I created the SVG in Illustrator and the artboard has a height and width in pixels but I didn’t think that meant anything in terms of web, apart from the aspect ratio? Sorry if I have missed something here?

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.