HI all
I need to style a layer background colour depending on the browser and platform used.
these are the two styles:
style1
IF on an PC using IE, Firefox, Netscape or Mozila...do this:
#alphabg {
background-color: #CFD0CD;
layer-background-color: #CFD0CD;
filter: alpha(opacity=40);
-moz-opacity: 0.40;
opacity: 0.40;
}
style2
Or ELSE if on a PC using OPERA or on a MAC....do this:
#alphabg {
background-color: transparent;
background-image: url(white-op60.png);
background-repeat: repeat;
}
white-op60.png being a PNG with alpha channel.
I have a great browser and platform detector so I can use that to detect.
Do I use javascript to do this? I was thinking along the lines of:
if (browser.isMac)
#alphabg {
background-color: transparent;
background-image: url(white-op60.png);
background-repeat: repeat;
}
else if (browser.opera)
#alphabg {
background-color: transparent;
background-image: url(white-op60.png);
background-repeat: repeat;
}
else
#alphabg {
background-color: #CFD0CD;
layer-background-color: #CFD0CD;
filter: alpha(opacity=40);
-moz-opacity: 0.40;
opacity: 0.40;
}
Cheers
ChrisI've just done a bit more research and it appears the it's only IE that doesn't support PNG's with alpha channel...if this is the case then maybe it would be best to use the PNG in all browsers and the filter: alpha & moz-opacity in IE only.
Also I found this:
/* for Opera 7.x (the standard declaration - hacks to feed IE and Moz
with different declarations follow) */
textarea {width:210px; height:100px; }
input.sbm {width:214px;}
/* for Moz/FiB (the *7 hack - hides from Opera but not IE) */
html* textarea {width:210px; height:100px;}
html* input.sbm {width:214px;}
/* for IE (the Tan multipass hack - feeds all versions of IE, hides
from all other standards compliant browsers) */
*html textarea {width:210px; height:100px;}
*html input.sbm {width:216px;
which implies that it's doing different things in different browsers.
can this be used to do what I need?
Cheers
ChrisThere's been a few threads about stuff like this now. Just use the search feature to pull 'em up. Personally I'd use a server side language, not a client side script to sort things out. Although when it comes to png's I just leave IE to screw 'em up. It ain't page breaking but it's a reasonable incentive to make the switch.
I need to style a layer background colour depending on the browser and platform used.
these are the two styles:
style1
IF on an PC using IE, Firefox, Netscape or Mozila...do this:
#alphabg {
background-color: #CFD0CD;
layer-background-color: #CFD0CD;
filter: alpha(opacity=40);
-moz-opacity: 0.40;
opacity: 0.40;
}
style2
Or ELSE if on a PC using OPERA or on a MAC....do this:
#alphabg {
background-color: transparent;
background-image: url(white-op60.png);
background-repeat: repeat;
}
white-op60.png being a PNG with alpha channel.
I have a great browser and platform detector so I can use that to detect.
Do I use javascript to do this? I was thinking along the lines of:
if (browser.isMac)
#alphabg {
background-color: transparent;
background-image: url(white-op60.png);
background-repeat: repeat;
}
else if (browser.opera)
#alphabg {
background-color: transparent;
background-image: url(white-op60.png);
background-repeat: repeat;
}
else
#alphabg {
background-color: #CFD0CD;
layer-background-color: #CFD0CD;
filter: alpha(opacity=40);
-moz-opacity: 0.40;
opacity: 0.40;
}
Cheers
ChrisI've just done a bit more research and it appears the it's only IE that doesn't support PNG's with alpha channel...if this is the case then maybe it would be best to use the PNG in all browsers and the filter: alpha & moz-opacity in IE only.
Also I found this:
/* for Opera 7.x (the standard declaration - hacks to feed IE and Moz
with different declarations follow) */
textarea {width:210px; height:100px; }
input.sbm {width:214px;}
/* for Moz/FiB (the *7 hack - hides from Opera but not IE) */
html* textarea {width:210px; height:100px;}
html* input.sbm {width:214px;}
/* for IE (the Tan multipass hack - feeds all versions of IE, hides
from all other standards compliant browsers) */
*html textarea {width:210px; height:100px;}
*html input.sbm {width:216px;
which implies that it's doing different things in different browsers.
can this be used to do what I need?
Cheers
ChrisThere's been a few threads about stuff like this now. Just use the search feature to pull 'em up. Personally I'd use a server side language, not a client side script to sort things out. Although when it comes to png's I just leave IE to screw 'em up. It ain't page breaking but it's a reasonable incentive to make the switch.