for example
#footer .tri{
border-color:transparent transparent #212121;
into this :
#footer .tri{
border-color:transparent transparent url("border-image.png");
deos that actually work!! thanks
Check out CSS3's border-image property, which does exactly what you want. As with many other CSS3 styles, this is only supported by modern browsers. Unfortunately, this is not supported even by IE9.
Related
I have following CSS :
.rwWindowContent, .rwExternalContent
{
border-style: groove !important;
border-width: 1px;
border-radius: 10px;
background-image: url(background.jpg) !important;
border-color: GhostWhite;
}
the backgound Image added in above css display well in Mozila,chrome, Safari, and IE9..
but it doesn't display in IE8 only..
as you can see in following Image all the styles related to Background has been removed by IE8 tool:
Is there any suggestions ??
make sure you saved you jpg in RGB mode instead of CMYK. hope this helps.
IE 8 needs to know width and height of the container if its empty.
I think better convert your image from .jpg to .png format. This may solve your problem.
Hello guys i have the following..
.selected2:first-child{
background: url(../img/css/first-selected.png) no-repeat !important;
background-position: center center !important;
box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important;
}
.selected2{
background: url(../img/css/second-selected.png) no-repeat !important;
background-position: center center !important;
box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important;
}
.selected2:last-child{
background: url(../img/css/third-selected.png) no-repeat !important;
background-position: center center !important;
box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important;
}
it works perfect in ie9, chrome, opera, firefox... but in ie8 i get only the second background on every li element.
What is the problem? ie8 does not support first-child?
You have two issues here: Firstly the :last-child selector, and secondly the RGBA background colours.
IE8 does not support :last-child. (It does support :first-child though)
You can see the browser support for these (and all other CSS selectors) at Quirksmode.org.
The quickest and easiest way to deal with this if you need IE8 support is simply to add classes to the relevant elements and style them that way instead. It's the old-school way of doing things, but then IE8 is something of an old-school browser.
If you really need to use selectors like :last-child, and you really need to support IE8, there are Javascript solutions you could try:
http://selectivizr.com/ -- this is a JS library that adds support for a bunch of CSS selectors to old IE versions. It requires you to also use another lib such as jQuery that it uses to do the hard work.
https://code.google.com/p/ie7-js/ -- this is a JS library that tries to patch old IE versions to fix as many of the bugs and quirks as possible and back-fill as many missing features as possible. It's pretty wide-ranging in what it does. It does include most of the advanced CSS features.
Either of these libraries should do the trick for you to add :last-child support, unless you have users with JS turned off.
However as I said, IE8 does support :first-child, so missing selectors isn't the reason for your code not working in this case. The reason your CSS isn't working for :first-child is because you're using an RGBA colour for the background. IE8 doesn't support RGBA colours.
For this, the only solution available is a JS library called CSS3Pie. This adds various CSS3 features to IE6/7/8, including RGBA colour support (albeit to a limited extent; it doesn't do everything).
IE8 and lower don't support those pseudo classes. There is a Javascript tool that makes IE7 and IE8 behave closer to IE9 and adds support for first and last childs.
https://code.google.com/p/ie7-js/
In the downloaded file, you will find IE7.js IE8.js and IE9.js just use the IE9.js it includes the other two...
As previously mentioned, you can't use the :last-child pseudo-class, but you could do .selected2 + .selected2 etc. to target the one you need.
My Box Shadow is not showing in IE7 and IE8.
#bodyContainer{
background: url(../images/site_bg.png) repeat ;
margin: 0px auto;
width:1000px;
float:left;
position:relative;
border: 1px solid #EEEEEE;
/*background:#FFFFFF;*/
box-shadow: 0 0 5px 0 #000000;
}
Use CSS3 PIE, which emulates some CSS3 properties in older versions of IE.
It supports box-shadow (except for the inset keyword).
and
There are article about CSS3 Box Shadow in Internet Explorer and Box-shadow.
Hope this helps
also you can use
style="FILTER: DropShadow(Color=#0066cc, OffX=5, OffY=-3, Positive=1);width:300px;font-size:20pt;"
style="filter: progid:DXImageTransform.Microsoft.dropShadow (OffX='-2', OffY='-2', Color='#c0c0c0', Positive='true')"
You have to use the non-standard IE filter property. See this article
box-shadow is a feature of CSS3
hence it is not supported below ie9
you can check the compatibity here:
http://caniuse.com/#search=box-shadow
Box-Shadow is not compatible below IE9
Always check compatibility of CSS Properties using following link
http://caniuse.com/css-boxshadow
Accoding to Box-shadow's MDN compatibility table, Box-shadow doesn't support in IE7 and IE8.
Check the same link (Notes section) for more info on alternative properties like Dropshadow and shadow properties.
Syntax:
filter:progid:DXImageTransform.Microsoft.DropShadow(sProperties)
filter:progid:DXImageTransform.Microsoft.Shadow(sProperties)
I am trying to put a border around it, but i can't. Here is what i have as far as CSS:
body{ margin:1em; }
body *{ font-family: RussellSquare}
body{background-color: #363636;}
input[type=number]{
font-size:1em;
width:2.5em;
padding:3px;
margin:0;
border-radius:3px;
border: 1px solid #000;
text-align:center;
}
input[type=number]:focus{
outline:none;
}
It works just fine. Try it yourself on different browsers here.
Short explanation would be:
border is CSS property that is supported on all major browsers.
border-radius is CSS3 property that runs on all modern browsers. IE 6/7/8 is not one of them.
In case you want to know more about Internet Explorer support of border-radius
Read: Support for "border-radius" in IE
I did some searches on google for this and there are a lot of various examples, some outdated some not.
I also had a look at the example at the bottom on http://www.w3schools.com/Css/css_image_transparency.asp which is similar to what I want to achieve. In the example the text on the div is also a bit transparent but it's hard to see because it's black text on a white div.
I have a background image with a lot of black elements in it and on top of that a black div with 55% opacity, when I add white text on top of that some of the very dark elements in the background image is slightly visible through the white text which I don't want.
Anyone with a recent example/best practice on how to achieve this (either with transparent png or css)? It doesn't have to support IE 6..
Thanks in advance.
Milan is almost correct. You'll want to make the background of the transparent div transarent via RGB. For black that would be (0,0,0). To add transparency, you'd simply add a decimal (similar to 'opacity:.55' for CSS; so to get a 55% opaque black background, you'd use
background: rgba(0,0,0,0.55);
So, to make an example div with a 55% opacity background w/ white text, use:
.blackopaque {
background:rbga(0,0,0,0.55);
color:#ffffff;
}
The 'background' changes the background, and the color changes the color of the text (white, in this case).
Hope this helps!
Matt
EDIT: IE Support
Adding support to IE is easy, all you have to do is specifically target IE users with their own stylesheet for that element. Open up your theme's header file, let's say you have a stylesheet designed specifically for IE w/ a transparent PNG to get the transparent black effect, named IE.css. You'd want to insert this code below your existing CSS inclusion:
<!--[if IE]>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/IE.css" />
<![endif]-->
This conditional stylesheet makes itself available only to IE users, so the rest of the ahem, more advanced browsers can enjoy RGBa.
For the IE stylesheet, you'd want something like this:
.blackopaque {
background:url('*link to your 55% opaque png file*')
color:#ffffff;
}
NOTE You'd only have to include that one rule in the IE stylesheet, just so that it overrides the default rule for that background.
RGBA isn't supported until IE9, so your best bet if you need to support earlier versions of IE is simply a semi-transparent PNG.
Sorry I thought text should be transparent, here is transparent background
#content {
position:relative;
z-index:1;
}
#content:before {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background:url(your_image.jpg);
opacity:0.7;
}