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
Jason Broderick
7,361 Points% based widths - Safari rendering differently
Can somebody take a look at this and explain to me why safari displays something completely different to firefox/chrome
here is a jsfiddle
Safari renders the width uninherited from its parent div but firefox/chrome inherits the width and displays correctly.
Is there some reason why safari does this? It also displays absolute measurements differently eg;
if I change the % to 700px lets say, then it shrinks in firefox/chrome but displays correctly in safari?
Ive been stuck on this for weeks would really appreciate a hand with this.
Jason.
2 Answers
Dave Evans
13,160 PointsIt is because your code
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
Isn't supported by Safari. See this CSS3 Quick Reference for a guide.
Jason Broderick
7,361 PointsThanks for taking a look,
Ive used a browser hack to temporarily fix it but id really like to use the proper code,
What would you suggest I do instead?
I thought the "-webkit-box" was for safari 2009 syntax?
Dave Evans
13,160 PointsUnfortunately there isn't much that you can do in regards to browser support. You could use some JavaScript to simulate the same thing or just use more traditional CSS to accomplish the same functionality.