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 trial
Dylan Hobbs
9,279 PointsImages in Firefox are blurry compared to chrome?
I have some images inside hexagons on my website http://likewater.ca
I noticed the images I uploaded are crisp in chrome however in firefox they are blurry.
I initially started with png's but have since then tried jpeg and image-rendering: -moz-crisp-edges; with no avail.
bonus points to whoever can figure out how to give the hexagons a crisp edge as well.
Help is greatly appreciated,
Thanks guys!
2 Answers
Benjamin Harrison
10,958 PointsIt seems as though Firefox just isn't scaling your images correctly. So you have a few options.
- Make the images bigger, and scale them down.
- Don't use images. A word with a border around it isn't hard to make in CSS, with all of the advanced CSS on that site it is a little strange that you are even using a picture.
As for the hexagons themselves. "http://jtauber.github.io/articles/css-hexagon.html"
Take a look at the above link as it shows a way that i myself prefer. I find that it works nicer than simply rotating divs. Also, you should use css pseudo-elements :before and :after instead of constructing so many redundant divs and muddying the markup, which is something else the article mentions.
However, one thing you really need to look into is making that site responsive or at least fluid. You've taken a desktop first approach, which you should be cautious about. Its almost always easier to make a mobile site first and the scale it up and add things for the desktop than it is to make a great desktop site and then fight to fit it into a small screen. The moment I re-sized my browser to look at Firefox and Chrome side-by-side the whole site crumbled. It kind of ruins the great impression the site gives you when you load it up, and it does give a great impression but it just doesn't hold it up.
Keep up the good work, Hopefully some of that is some help to you.
Damjan Pavlica
2,169 PointsFor me, image-rendering: pixelated; solved this isssue.
Dylan Hobbs
9,279 PointsDylan Hobbs
9,279 PointsHi Benjamin,
Thanks a lot for your answers and suggestions! Yeah, I guess I should just use CSS and html instead of images.. I dont even know why I never even thought of that as it wont take long to even do haha.
As for the the hexagons, I have used/tried out that method before but I was unable to add images over top of those hexagons without some serious work. I suppose if I just z-index and position absolute the text with box's around them above those hexagons it will work fine. But I wont be able to use that hexagon markup for the hexagon's that have the icons over them will I?
Yes, you're right I should have started mobile first, that is what I have done on previous sites however there were so many new ideas I wanted to try for this site such as the SVG drawings, scroll load nav, adaptive backgrounds etc.. so I began making these with the desktop first. I do plan of course to scale down afterwards and hopefully I dont have too much trouble with it.
The site is built off bootstrap but I think I should be able to scale most things down with media queries pretty easily without mucking up the markup.
Thanks again for the advice and I will start switching those suggestions in now!
Cheers
Benjamin Harrison
10,958 PointsBenjamin Harrison
10,958 PointsZ-index, i think, would be the way to go. I can't see why that wouldn't work with the icons too, but I haven't tried that before.
I didn't say you HAD to start mobile first, and if your playing around with new techniques it sure is alluring not to. But its like when talking about riding a bicycle, you always have to throw in a talk about helmets.