Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Tibor Ruzinyi
Tibor Ruzinyi
17,968 Points

Different 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
PLUS
Michael Austin
Courses Plus Student 7,814 Points

Hi,

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 :)

Tibor Ruzinyi
Tibor Ruzinyi
17,968 Points

Great ! Your right :) I have changed the line high and its working. Thanks a lot

Tibor Ruzinyi
Tibor Ruzinyi
17,968 Points

Michael do you have some idea why i have different font style for list items in firefox as in chrome ?

Michael Austin
Michael Austin
Courses Plus Student 7,814 Points

You’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.

Hi

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
Tibor Ruzinyi
17,968 Points

Hi, 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
Vikram Mudaliar
8,479 Points

I think, instead of creating different CSS for different Browsers, maybe you could make use of CSS Browser specific prefixes, -moz- -webkit- -ms-