Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialBen Moore
22,588 PointsBrowser Compatibility
It doesn't appear the rendering of '.gallery a' works in Firefox. I switched over to Chrome to test and it works fine.
.gallery a {
width: 48%;
margin: 1%;
height: 10rem;
background: #99F;
display: block;
}
4 Answers
Gari Merrifield
9,598 PointsThe problem seems to be with Firefox and using a % for the top and bottom margins. After a bit of testing, I believe one possible work around is to set the vertical margins to "1vw", for 1% of the viewport width. While this isn't ideal, you can adjust the "vw" value slightly to accommodate the differences. Try using : margin: 1vw 1%; and see if your results are acceptable, or not.
EDIT: well, after more digging, I found the answer to why this happens. I can't explain it as well as Daniel Holbert has on comment 13 of this thread : https://bugzilla.mozilla.org/show_bug.cgi?id=1163119 It's part of the standard, and apparently Firefox is the only one that actually follows the specification. Rachel Andrew has a great post on the issue, and it applies to Grid as well as Flexbox : https://rachelandrew.co.uk/archives/2017/12/20/how-should-we-resolve-percentage-margins-and-padding-on-grid-and-flex-items/
EDIT#2: It sounds like they have come up with an answer, from a link in the previous link, https://www.bram.us/2017/07/30/vertical-marginspaddings-and-flexbox-a-quirky-combination/ Firefox 60 supposed to be making changes to match the rest, if I am reading this correctly, so this may be only a temporary issue for those with Firefox.
Hakim Rachidi
38,490 PointsI discovered a related issue that has to do with the top and bottom margins of the gallery and anchor elements, which doesn't show up in Firefox. In Safari (same html and css) it is rendering with all margins as aspected.
Steven Parker
231,248 PointsThe selector construction and properties shown here are all very basic, any browser should handle them. I would strongly suspect any compatibility issues would be somewhere in the other code (HTML or other CSS, if any).
Kat Stacy
41,658 PointsI experienced the same problem. I do not think there is an error in the code since at the beginning of the lesson Nick had us open a new workspaces.
Hakim Rachidi
38,490 PointsHakim Rachidi
38,490 PointsI think this is the best result you can currently get. I first thought I could calculate the margin with the calc() method.
BUT the result of the calc() method is always a percentage value when the one of the operands a percentage value is.