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

CSS

Erik Robles
PLUS
Erik Robles
Courses Plus Student 10,635 Points
Posted by Erik Robles
Erik Robles
Courses Plus Student 10,635 Points

Trouble with cross browser display outside of Chrome and Opera

I can't seem to make my site look as good as it does in Chrome or Opera. If you look at the files in my git-hub account titled "SuegraWebsite Version 3" at: https://github.com/ErikRobles/Psycology you will see that in chrome and opera, the margins, padding and menu items are respected and overall the site is as responsive as I want it. However, if you look at it in other browsers, the menu button gets pushed out the the header area and some of my content gets pushed aside. I have implemented a lot of fixes and pre-fixes which has helped some but not giving me the results I need. Can someone please look at the files and run them in the various browsers to see if there is an easy fix. Thank you in advance.

2 Answers

Zack Lee
PLUS
Zack Lee
Courses Plus Student 17,662 Points
Zack Lee
Zack Lee
Courses Plus Student 17,662 Points

here is a list of all css properties and their corresponding compatibility with different browsers:

https://www.w3schools.com/cssref/css3_browsersupport.asp

you can also use vendor prefixes to make certain properties compatible with browsers. give a quick google search and find some articles elaborating on this stuff.

also, you can find programs that will automatically fill your css with vendor prefixes for cross browser compatibility. this is known and css post-processing so you have a starting point for your research.

Erik Robles
PLUS
Erik Robles
Courses Plus Student 10,635 Points
Erik Robles
Erik Robles
Courses Plus Student 10,635 Points

Thank you Zack. Useful information. I was finally able to add some specific targeting using ie targeting media queries and that did the trick. You can follow the evolution of that project by visiting my github repository: https://github.com/ErikRobles/Psycology to see how I solved the issue in greater detail.