Okay, so I am a javascript newb and I have a problem. I want my website to have different css for different browsers so what i have now is a check to see what browser is being used and depending on that browser i need to change what styles are used. this is what i have so far but it isnt working how can i get the css to change from javascript?
if (/Safari/.test(navigator.userAgent) ||/Chrome/.test(navigator.userAgent)){
document.write("This browser lets my pics be awesome!<br>");
document.write("<style type=text/css>
.images{
float:left;
color:#CDC0B0;
margin-left:50px;
margin-right:-20px;
margin-top:10px;
-webkit-transform:scale(1.0);
-webkit-transition-duration: 0.5s;
}
.images:hover{
-webkit-transform:scale(1.5);
-webkit-box-shadow:0px 0px 40px #ccc;
}
.images .layer{
width: 100%;
height: 100%;
background-color:#000;
position: absolute;
opacity:0.5;
-webkit-transition-duration: 0.8s;
}
#image1:hover .layer{
width:0%;
}
#image2:hover .layer{
height:0%;
}
#image3:hover .layer {
height:0%;
margin-top:150px;
}
#image4:hover .layer{
margin-left:150px;
margin-top:150px;
height:0%;
width:0%;
}
</style>
}
");
else
{
document.write("This browser does not support my awesome pictures");
}
