<script type="text/javascript">
var browserName = navigator.appName;
var browserVer = navigator.appVersion;
if(browserVer.match("MSIE 7.0"))
{
	<?php echo "<link rel=\"stylesheet\" href=\"".JURI::base()."/templates/$this->template/css/ie7.css\" type=\"text/css\"/>" ; ?>
}
else if(browserVer.match("MSIE 8.0"))
{
	<?php echo "<link rel=\"stylesheet\" href=\"".JURI::base()."/templates/$this->template/css/ie8.css\" type=\"text/css\"/>" ; ?>
}
</script>

Okay so the if statments work perfectly fine, but my problem is that when the php displays it doesnt load the correct css page still, can anybody help me here? I can see the if statment and both stylesheet links inside of the source, but should 1 be called based on the if statment?

Thank you,
Musya

Ok, this doesn't make a whole lota sense. The best advice I can offer is for you to completely scrap this and use Internet Explorer conditional comments

Why doesnt it make sence, the php code outputs the correct path of the style sheets, and if that particular browser is being used then it should display that particular css link shouldnt it?

It doesn't produce syntatically valid javascript. Reading that is a bit like reading some code and all of the sudden the declaration of independance showing up. Ok, maybe not, but you are switching languages midstream.

Since I have a little bit better idea of what you want, I'll give you my other idea, although I still believe conditional comments are way better if you can separate the css appropriately (two lines versis all of this jazz, and more general to boot!).

To make it syntatically valid and possibly do what you want, try


so php parses and executes the page, and generates some thing like


which should make sense. the document.write will write into the browser's DOM for the page either one or the other (or neither!) link as the page is being parsed.

There are various reasons I don't like this, though.
1. what about support of MSIE 9 or other browsers?
2. lengthy
3. page not viewable without javascript support (although, frankly, I've been guilty of writing pages requiring javascript on numerous occasions...)
4. I'm not a fan of using document.write except in very few instances. (although this might be acceptable.
5. If javascript breaks on your page previous to this script, you're screwed (it won't be executed, and the css won't load).

Now, lets take a look at the contender


I can't think of any negatives, other than you're using MS's proprietary code (but that's a good thing as it precisely defines the target!). Pluse it's short and doesn't envolve javascript and supports the next version of MSIE, which I would guess should also be standards compliant.

This post has been edited by JayFCox: 1 Jul, 2009 - 05:21 AM

Here's why it's not working like you think it should: The PHP is not processing at the same time as the javascript. PHP parses on the server and then sends the outputted file to the browser and then the javascript is parsed. Go to view source an the page and you'll see what I mean. you'll see the code looking like this:

<script type="text/javascript">
var browserName = navigator.appName;
var browserVer = navigator.appVersion;
if(browserVer.match("MSIE 7.0"))
{
        <link rel="stylesheet" href="xxxx/templates/xxxx/css/ie7.css" type="text/css"/>
}
else if(browserVer.match("MSIE 8.0"))
{
       <link rel="stylesheet" href="xxxx/templates/xxxx/css/ie8.css" type="text/css"/>
}
</script>

That's what's in the javascript file, and it's not valid javascript. Here's what I suggest you do: set the href of the stylesheet in a variable in the if and else statements, and then go from there. Check it out:

<script type="text/javascript">
var browserName = navigator.appName;
var browserVer = navigator.appVersion;
if(browserVer.match("MSIE 7.0"))
{
styleHref = "<?php echo JURI::base()."/templates/$this->template/css/ie7.css"; ?>";
}
else if(browserVer.match("MSIE 8.0"))
{
styleHref = "<?php echo JURI::base()."/templates/$this->template/css/ie8.css"; ?>";
}

// and then create the element
styleElement = '<link rel="stylesheet" type="text/css" href="+styleHref+" />';
</script>

Okay I tried the document.write for the javascript but it didnt work.

However for now I'll stick to conditional comments in IE but my only problem with this though is how can I check for Firefox?

well.... now I get to the part about separating css...

Since you were originally not asking about firefox, I did not answer, but now I shall

Normally, What I do when writing css for Firefox and the multiple browsers, if I choose the conditionals as I've said, is I have a main css file which works for most standards compliant browsers, then I use the conditionals for modifications to the css for the other IE browsers.

So. We have css that works for IE8. It supposedly has been tested for standards compliance, so it should work for firefox as well.

So, we should be able to remove the conditional coments for the IE8 file! However, that means when you're using IE7 or earlier, you need to make sure your IE7 css overrides any issues the IE8 file. To do that, you need to at the very least place the conditionally linked in css file after the IE8 link file (note this is backwards from what I showed earlier,but my point there was to create conditional comments that somewhat mirrored the javascript code.) Since you already have a full IE7 and IE8 css file, this may cause some issue. You could try it and see if it works...

Gotcha, thanks.