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
Tibor Ruzinyi
17,968 PointsDifferent stylesheet for different browser
Hi all, Iam having an issue with my website. In mozilla firefox are some pieces of web content displayed different and it looks horrible.
My question is if its possible to link different stylesheet for different browser ?
4 Answers
Michael Austin
Courses Plus Student 7,814 PointsHi,
I would recommend you look at some debugging tools. In Chrome you have Web Developer Tools (Menu -> Tools -> Developer Tools) and Firefox the plugin extension Firebug. Other tools are available for other browsers, but I would start with those.
You should never need to load a separate stylesheet for modern browsers. Older defunct browsers (IE6, IE7) you should use Conditional Comments but chances are you won’t be developing websites that will have a high (or even low for that matter) user base for IE6/IE7.
To give you a pointer, the bullets issue is to do with line-height on the bullet list. It’s way too small :)
bobkingstone
27,869 PointsHi
You should try to ensure all css is browser agnostic, creating separate stylesheets or using -moz- tags will reduce the maintainability of your website.
It is possible to select a different stylesheet for each browser using javascript, but this 'browser sniffing' is generally regarded as bad practice. You would be better off reviewing your css and identifying the trouble areas. Have you used a css reset? normalize.css for example?
Bob
Tibor Ruzinyi
17,968 PointsHi, yes i have css reset. In firefox have the list items less margin and padding, and they stuck on each other. You can check the problem here: www.pcthirdeye.com/about.php
Vikram Mudaliar
8,593 PointsI think, instead of creating different CSS for different Browsers, maybe you could make use of CSS Browser specific prefixes, -moz- -webkit- -ms-
Tibor Ruzinyi
17,968 PointsTibor Ruzinyi
17,968 PointsGreat ! Your right :) I have changed the line high and its working. Thanks a lot
Tibor Ruzinyi
17,968 PointsTibor Ruzinyi
17,968 PointsMichael do you have some idea why i have different font style for list items in firefox as in chrome ?
Michael Austin
Courses Plus Student 7,814 PointsMichael Austin
Courses Plus Student 7,814 PointsYou’re assigning Franklin Gothic Demi Cond as a font to the list. This font isn’t a default font on computer systems. Remove all references to Franklin Gothic Demo Cond and the font will be the same as the body content.
If you want to use a serif font, use Georgia, Times New Roman, serif for the font-family as these will work on all computers. If you want a more fancy font research font-face in CSS, or use Google Fonts, which will supply you the code for more fancy font faces.