How To Fix Google Chrome CSS??

[samsons17]

Hi all..

I just done a website using HTML,CSS and PHP.

For now,my website is only fine to be displayed in Mozilla and IE..

For IE(Internet Explorer), I just fix the css by doing another CSS layout for that.
like this one :

<!--[if IE 7]> 
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<! [endif] -->

But I dont know how do i do that for Google chrome?
and i until now,i still have no idea to fix the css for IE by not doing the
<--[if IE 7]> statement..Could you guys tell me how to really code the css to fixing the cross browser platform problem??

or any sources of reference perhaps?

Thank You :)

[Varnius]

The golden rule of HTML/CSS coding - your code must be valid. If it already is then there should be no (or very minor) differences between what your site looks at most recent versions of Firefox/Chrome/Safari/Opera/IE9.

If you are sure that you have done everything correctly but still have any problems in other browsers other than IE then you can use Javascript Navigator object or some functionality of Javascript jQuery lib to detect specific browsers. Note that for this to work Javascript must be enabled in client`s browser (imho not a problem since 9x % of users have it enabled).

On the other hand, the best way to solve IE6/7/8 problems is to use conditional tags as you have already done.

[george61]

This code detects if the browser is Chrome and when it is it loads diffferent style sheet. If you test your pages on Mozilla you could have very minor differences in Chrome so you'll probably have to replace just few lines of code in the stylesheet:

<script type="text/javascript">
if (navigator.userAgent.toLowerCase().match('chrome')
document.write('<link rel="stylesheet" type="text/css" href="stylechr.css">');
</script>

stylechr.css is the Chrome stylesheet.

[samsons17]

sory for a late reply..yeah george61,your post really help me out..
Thank You :)

[Charlynne]

Old thread, but the solution provided doesn't and didn't work for me. I am using Chrome 16.
The old solution was

<script type="text/javascript">
if (navigator.userAgent.toLowerCase().match('chrome')
document.write('<link rel="stylesheet" type="text/css" href="stylechr.css">');
</script>

I changed the script (by the way, you are missing an end bracket too) to

<script type="text/javascript">
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1);
document.write('<link rel="stylesheet" type="text/css" href="stylechr.css">');
</script>

With this solution, Chrome is identified correctly and the script works.

Hope this helped.

[t3o]

Old thread, but the solution provided doesn't and didn't work for me. I am using Chrome 16.
The old solution was

<script type="text/javascript">
if (navigator.userAgent.toLowerCase().match('chrome')
document.write('<link rel="stylesheet" type="text/css" href="stylechr.css">');
</script>

I changed the script (by the way, you are missing an end bracket too) to

<script type="text/javascript">
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1);
document.write('<link rel="stylesheet" type="text/css" href="stylechr.css">');
</script>

With this solution, Chrome is identified correctly and the script works.

Hope this helped.

The code you've provided doesn't work... The if is completely ignored with that ";" at the end of the line...

This works fine:

<script type="text/javascript">
if (navigator.userAgent.toLowerCase().indexOf('chrome')!=-1){
    document.write('<link rel="stylesheet" type="text/css" href="your_script.css"/>');                    
}
</script>

Regards...

[Charlynne]

@t30
Thanks for your reply and your own solution. I prefer using semicolons at the end, old programming habit. JS does not require you to end with a semicolon, but the code still works if you include them. JS does not malfunction due to that. Re your solution, it works for me too. My solution also works, seems there is more than one way to skin the proverbial cat.

[t3o]

@t30
Thanks for your reply and your own solution. I prefer using semicolons at the end, old programming habit. JS does not require you to end with a semicolon, but the code still works if you include them. JS does not malfunction due to that. Re your solution, it works for me too. My solution also works, seems there is more than one way to skin the proverbial cat.

mmmmmmhhh... I think you might be making a mistake, with the semicolumn at the end of the "if" line, the script works but not with the behaviour you're expecting...

Usually an if condition has this structure:

if(some condition will be satisfied){
 multi line statement
}

If and only if the statement is composed by only a single line, you can omit the "{}":

if(some condition will be satisfied)
 single line statement

Putting a ";" at the end of the if line, is equivalent to write:

if(some condition will be satisfied){}

So, the if condition is checked but completely ignored. The lines that follows the if will be executed regardless.

So, in your case, if you check only the behaviour in chrome, everything seems ok... But the same css will be added also in other browsers.

If you want you can verify what I'm saying by adding an alert message after the semicolumn.

if(some condition will be satisfied);
alert('oh my god...');

or you can simply verify that the css will be added also in firefox e.g.

Hope this helps!

Regards,
Matteo.

[Charlynne]

Matteo, Thanks again and sorry for only replying now. Again, I created my solution to work for Chrome and the IE9. It works perfectly on both. I use Arachnophilia as a web editor.

What I did in the meantime was to give you the benefit of the doubt, omit my solution, take your solution and try it out. Following has happened: The first time I tried it, it worked. This was the day you posted your solution. I have not had time to look at it since. Today I again opened my modified file, loaded it directly from Arachnophilia and it didn't work. I am talking about launching the IE directly from Arachnophilia. However, when I go into the windows file explorer and open the file directly from there (right click), it works perfectly on both browsers just like my old version did. To be honest, I am a little confused now. Perhaps it's got something to do with parameters passed by Arachnophilia and has nothing to do with your solution, I simply don't know.
Regards,
Confused C

[t3o]

Matteo, Thanks again and sorry for only replying now. Again, I created my solution to work for Chrome and the IE9. It works perfectly on both. I use Arachnophilia as a web editor.

What I did in the meantime was to give you the benefit of the doubt, omit my solution, take your solution and try it out. Following has happened: The first time I tried it, it worked. This was the day you posted your solution. I have not had time to look at it since. Today I again opened my modified file, loaded it directly from Arachnophilia and it didn't work. I am talking about launching the IE directly from Arachnophilia. However, when I go into the windows file explorer and open the file directly from there (right click), it works perfectly on both browsers just like my old version did. To be honest, I am a little confused now. Perhaps it's got something to do with parameters passed by Arachnophilia and has nothing to do with your solution, I simply don't know.
Regards,
Confused C

Hi Charlynne, except of your enviroment, Arachnophilla or whatever you'd like to use, I'm talking about a general programming rule...

Try this simple code: http://jsfiddle.net/E5Jpp/1/
You can try it in every browser... simply open the page and check the result in the bottom right box...

The first piece of code:

if (navigator.userAgent.toLowerCase().indexOf('you can write everything yo...') > -1);
document.write('rendered in every browser...');

is like your code: you can see the semicolon at the end of the if line. The document.write line will be executed in every browser...

The second piece will be executed only in chrome instead:

if (navigator.userAgent.toLowerCase().indexOf('chrome') != -1){
    document.write('<br /><br />rendered only in google chrome...');
}

and it's the same of:

if (navigator.userAgent.toLowerCase().indexOf('chrome') != -1)
    document.write('<br /><br />rendered only in google chrome...');

without brackets...

Definetely, I don't know why your code could works.
If you want you can write your own Fiddle and let me try your code...

Regards,
Matteo

[Charlynne]

Ah, the fiddle made it clear to me! Thanks so much, Matteo! Awesome! I now too understand why it still works for me. :cool:
Regards,
Charlynne (chuffed)

[t3o]

Ah, the fiddle made it clear to me! Thanks so much, Matteo! Awesome! I now too understand why it still works for me. :cool:
Regards,
Charlynne (chuffed)

Never mind Charlynne, it was a pleasure... ;)

If you want you can reproduce your situation in jsfiddle so we can try to understand why your code works... ;)

Regards,
Matteo.

[Charlynne]

The reason mine works is because I didn't code it just for Chrome. Though I address Chrome directly by calling for the useragentindexof, I used a code for all browsers(incl chrome) as in the fiddle, so yeah, it's not just for chrome. That was my mistake. It wasn't the code itself, it was what I was trying to do with it. You made me see that. So it's nothing for the fiddle, the code is the same. Nothing to add. Just the way it gets used.

[shaddam]

<script type="text/javascript">
if (navigator.userAgent.toLowerCase().indexOf('chrome')!=-1){
    document.write('<link rel="stylesheet" type="text/css" href="your_script.css"/>');                    
}
</script>

This code is on working chrome and opera. But I want to only chrome. Anybody please help me.