I would like my CSS to be slightly different dependant on which browser is being used to view my web site. How do I accomplish this?
how do you overcome “bugs” like unsupported > and + selectors? 
you should always code rules for the exception and not code the exception as a rule 
don’t let the shortcomings of ie dictate what level of css and html you’re using. after all, i see you’re using xhtml, and ie is not supporting it. take advantage of the css 2.1 at least. and by doing that, you do need different code for ie. 
same here
but when a particular browser stands in the way of using the standards, i choose the use of CC (for clarity) and the use of standards (for the 60% or more of the rest of the web) a fair trade i say.
Thanks for all the input some of it is a bit over my head. I am wanting to learn to code the right way hence I am glad of the advice.
There has been mention that to have go this way is due to the code being wrong. If I don’t use the Conditional Comment how can I acheive what I want the right way, should I put the words in as images instead so they are the same across browsers or do I have to change the colour of the word so that a shadow isn’t needed to make it stand out (however this is in my eyes is breaking the overall theme that I am trying to acheive) Is there another way?
You can use the conditional comments I posted in the previous thread to target all/any versions of IE.
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<link href="iecss.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
</body>
</html>
Just create a stylesheet for IE but only put in the differences or things that need to be over-ridden. Don’t include the whole stylesheet.
Some people don’t like using Conditional comments but they are an easy way to target all versions of IE but do make maintenance a little harder.
This begs the question why?
If it’s to overcome a bug then there may well be a better way to do this.
You don’t really want to have multiple files if you can help it as it makes maintenance a nightmare.
In truth the only browsers you can really target without using javascript is IE and it’s probably only IE that you should ever supply different code to anyway. Most of the other browsers (apart from the odd bug) are pretty consistent.
I never code in a way as to need those selectors in the first place, so I overcome it by not using it in hte first place.
Perhaps when IE6 is completely out of the way I’ll tinker with it
I think it should be mentioned that you should almost never ever need different code for IE, except to overcome bugs, otherwise it’s just coding failure on your part
There is no easy way to target the hundreds of different browsers that do not yet support CSS3, particularly as various of them are adding that support over time. Any CSS3 you use in the page should be added to already usable CSS 2.1 code so as to enhance the experience for those who are using a browser that supports it while not breaking it for those using browsers that don’t.
we need a link if we are to help you. a blind advice could do more harm.
that said, you can target ie the way you see fit. the debate of CC vs HACKS has less to do with how you want the things done, and more with the actual path you take to achieve your goal. they both get you there.
if all you want is to make darker colour for ie, there are ie hacks for css selectors and rules, allowing you to target ie6 or ie7. alternatively, you could use CC to point to a css file having these selectors and rules, w/o hacks this time.
there are also javascript solutions to make shadows in ie, but you need to remember that resorting to javascript might not work in all cases. there are users out there that are not allowing javascript code to execute in their browsers.
if you rely on css3 only, you also need to know not all browsers support it, and those supporting it may only support bits and pieces of it, and css3 is not for production use yet.
the problem is there are many ways and you have to find the right way
I agree that for the OP’s purpose multiple stylesheets are not required, but in general I think “nightmare” is a little harsh although it does take about an extra minute at the most for me to update multiple stylesheets (up to 5) to cater for all the most common browsers.
Admitedly the stylesheets for each browser are much the same nowadays but occassionally IE7, Safari and Chrome do some things slightly differently (calculate widths of elements with margins etc or they don’t support a css feature).
I use Netbeans as my IDE and it makes having multiple files open at one time and navigating to selected parts of each file quickly very easy and so for me it is more efficient to spend a few seconds copying and pasting styles to multiple stylesheets than to try to adjust styles in a single stylesheet to fix a bug in one browser only to find it breaks the layout in another browser - but each to their own way of doing things - my :twocents:
It depends if the stylesheets you are working on are your own or someone elses
I’m working on a very large site at the moment and it’s a “nightmare” because every time you adjust a rule you have to remember to cycle through all the extra IE stylesheets as well. Now it only takes a minute but if you do that 500 times it soon mounts up.
The original author just put too many unnecessary rules in the extra stylesheets and made it more complicated than it needs to be. This is the danger that I see when people use CCs too much. Every little margin difference and anything that’s not quite right then they just throw more code at it and miss the original problem. I’ve seen this in the forums numerous times and in fact on many many occasions I have been able to remove all the special IE rules altogether and fix the OPs site.
However, I think CCs are useful and I do use them but I try to have as few lines in then as possible and would rather change the design a little to avoid the problem in the first place.
I also stand by my original comment and you should not really be hacking other browsers (non IE). There are slight differences and the odd bug and the only time I would really like to use a hack is where form elements are concerned.
Otherwise I can’t remember the last time I really had to do anything different for non IE browsers. Once you start doing that then where do you stop. The fact that things are slightly different in one browser is a feature not a bug (that’s a quote from John Allsopp :)).
browser feature detection can be used but that means you depend on javascript being allowed to execute on client side, which may not be always the case.
for a more specific UA sniffing, done server side, you can use user agent strings that are transmitted via the User-Agent request header.
as a side note, the recommendations are to target the standards and not particular browsers and limit the use of vendor/version specific features.
I am very new to all of this so there is probably a better way to do this and there may well be issues with my thought process.
I hope this makes sense. I have a statement on my site where I want three key words spread throughout the statement to be a different colour (the same colour as the theme of the site). I have done this by putting a span and class around each of the words and styled it with the colour. The colour is quite pale so I have also used a text shadow in the CSS which in Firefox makes it stand out how I want it but this doesn’t work in IE. I was therefore going to just make the words a darker colour for IE only or even use an image of how I want the words to be instead.
Anway if anybody has any better suggestions I would love to hear the and as I am such a newbie you may have to repeat it a few times before it sinks in.
Thanks