Hi guys I’m doing a customized version of the portfolio page for myself and apparently when I open the HTML file in Chrome, the images won’t show up under my project list, only the names.
It seems like when I put height attr as auto for the img, they do show up, but anything like calc(100% - 6.8rem) or simply put 100% won’t cut it. Any static number would work but that’s not what we want. Weirdly enough, this works flawlessly in Firefox, which begs me the question is it because of Chrome? Why would Chrome not play nice with calc?
To clarify this, the code works fine in codepen, just not pure code running under Chrome.
Thank you for your help guys, this will be a ton of help.
100% of what? Does the parent have a defined height? And if that height is a percentage, then does its parent have a defined height and so on
Also, do you have spaces in the actual code ie calc(100% - 6.8rem) rather than calc(100%-6.8rem) (no spaces will break things in certain browsers)
It would probably be best if you gave us the link to the codepen so we could look at the code instead of having to guess what is going on.
I’m actively looking for the actual height of this, but I just dump the code from the FCC project from codepen which works, and it simply just doesn’t work in Chrome, while it works in Firefox, that’s what’s strange to me.
I double checked on the calc function, as I did some research myself as well and I’m pretty sure there is proper space in that function call, like you pointed out.
This is my page: https://sythanhho.github.io/
And the repo: https://github.com/sythanhho/sythanhho.github.io
Different algorithm for grid size calculation in the underlying browser rendering code. In Chrome, you’re saying 100% height, but of what? There is no height on the parent, so it’s 100% of nothing, which is nothing. For some reason, FF decided to infer a height automatically when rows are automatically created, whereas Chrome did not. Note that this isn’t specific to grid layout, in all browsers [I think] if you specify height: 100% (for example), it needs to be 100% of some defined height. Grids seem to be the exception in Firefox
I do not disagree with what you said as there’s absolutely no rules for cell height whatsoever in the code so a straight solution is to provide one, which kinda helps. But what still bugs me is this is the soul of the default given code for the project, which is available by FCC in the following codepen:
Even though we might agree on a solution to this one, I still want to find out why it works in codepen, and in Firefox, but not Chrome. Well thanks for your replies though.
What exactly have you changed to stop it working? Is it just changing height from auto to 100% (the calc is irrelevant here, it will exhibit the same behaviour regardless). If it works in the FCC example but not in yours, then something has been changed to break it, and if it’s that, then, yes, it will not work, because there is no height on the parent
I have fully explained things and I believe I am not dumb enough to break something that is still working and I hate that I have to manually create a pen, and put codes on it just to prove that I am correct, but here is the exact code I am using offline, put on pen and it works.
I have changed nothing and it’s just that Chrome doesn’t work. I am sorry but you seem to not get my problem.
I confirm again that it is not a problem of either FCC, or mine, Chrome is just not cooperating.
You are missing the HTML boilerplate stuff. Add the HTML you have inside the body. That should fix it for Chrome.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Add HTML here -->
</body>
</html>
That is the problem with copy-pasting things. On CodePen it is not needed because it gets added.
2 Likes
I get your problem. I’m not trying to be antagonistic here, I just need to know what is different, because your site works in Firefox but does not work in Chrome for the reasons I stated. This was unquivocally why it doesn’t work, it is easy to test: go to computed properties in the inspector on your site, the height is 0px in Chrome. So there has to be a difference that you have not noticed. (And as I’m typing this, @lasjorg has found where the difference in the code is)
Nice catch @lasjorg. Figured it was something simple like that.
As far as copying the FCC template for this project, there are issues with the template that need to be fixed. For example, if you manually increase the text size the text under each project image breaks out of the box. @sythanh14, I think you are better off starting this from scratch and building it yourself if you really want to learn this stuff.
As far as I can tell it seems related to how Chrome handles quirks mode. If you just remove the doctype (<!DOCTYPE html>) it will fall back to BackCompat and the images will be 0 height.
You can check the mode in the browser console.
// no doctype
document.compatMode
"BackCompat"
// with doctype
document.compatMode
"CSS1Compat"
Not sure which browser is being the most compliant here or what the specs really says about it. But if you run in quirks mode I’d say all bets are off.
2 Likes
Yup my man I am not going to tell people this is my code I am looking at it as an example and a hang to put my stuff on when things are not there yet. I will do everything from 0.
But sometimes going bottom-up isn’t very good it just takes a bit of research and sometimes, it might just need a bright eye of @lasjorg. Big lesson this time.
Huge lesson for me this time. Honestly even if I go the hard way I don’t think I could even see this because I don’t think I fully understand what the doctype has to do. I appreciate your help man it’s gonna go in my book.
Merci bien!
I cannot explain what I have done in the process it might just not be worth it and might just make me look worse here. I mean, I appreciate the help man. I feel good finally the answer has come.
Can you take a look at this pen please? I have made a new pen by myself and now I have no idea why my first grid tile applies different height to my image, while doing the same for every tile on from the second:
P/S: I actually experimented with my offline code, by removing the div around the anchor. Before, when the div was still there, there was the problem. But when I remove the div and treat the anchors as the grid item, the problem is gone.
So my final question is why does putting a wrapper around the anchor provoke the problem like this? I think I have provided correct box size for the divs. Maybe you’ll have a better look at it.
Thank you!
[I’m assuming this is the reason, not tested] So the grid layout applies to direct children. When you don’t have the wrapper, the children are the anchor elements, and their display property changes from the default inline to be a grid item.
Once you put them inside another element, you haven’t set the display property of the anchor to anything other than its default (inline). You can’t apply height and width to inline elements, and it collapses to the height of the content – the image you’re using is a background image, so it doesn’t affect the height of the element its been applied to, so the content height will be whatever the height of the text is
Can’t deny that you actually have a point. I don’t have an answer yet but maybe you’re going to see something not so right here:
As you can see all of them are displayed as block, the anchors have the same dimensions, and I set the imgs inside to have 100% height, and for some weird reason the second one decides to not take everything.