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

HTML HTML Forms Choosing Options Checkboxes

Mousa Zeidan
Mousa Zeidan
2,490 Points
Posted by Mousa Zeidan
Mousa Zeidan
2,490 Points

Effect browsers have on visuals of page?

I noticed that Nick's version of the page looks slightly different than mine. His check boxes pop a little more, compared to mine (flat). Also the text appears to have a slight difference in color. The only difference between our two pages (that I can think of) is the browser, I'm using Firefox.

Is there any way to adjust the CSS so that I can be sure that all my visitors are seeing the same things (aesthetically)?

Thanks :]

matthewhorton68
matthewhorton68
13,882 Points

Absolutely, each browser has its own default 'user agent' stylesheet.

Read more about it here. (The CSS reset): http://cssreset.com/what-is-a-css-reset/

Hope that helps.

1 Answer

Evan Agee
Evan Agee
13,088 Points
Evan Agee
Evan Agee
13,088 Points

This is a great question. The good news is that this problem isn't nearly the issue it used to be; most browsers these days have adopted a standard rendering engine and thus the differences between them are slowly dwindling. The bad news is that it'll likely always be an issue.

The problem isn't that the CSS needs to be modified to get the correct visual on all browsers, it's that the different browsers interpret CORRECT CSS in different ways. A CSS reset (like Andre recommended) will help you make sure that your styling looks as consistent as it can across multiple browsers, but the truth is that there are some properties that just render differently across the plethora of browsers out there.

Learning to style effectively for all of them is a career-spanning endeavor, but you can learn how to target specific browsers and deliver styles that are tailored to them. The solutions for this are sometimes as simple a browser prefixing or as complicated as delivering different stylesheets to different browsers.

https://www.w3.org/community/webed/wiki/Optimizing_content_for_different_browsers:_the_RIGHT_way

Have fun!