I've look all relevant topics but could not find solution so I created this question.
Im trying to implement box-shadow on IE8 And its not working.. It works on IE9+?
I have simple div:
<span id="controls" class="box-shadow">
<input id="start" type="text" placeholder="Get Directions: Enter Address or Postcode"/>
<input id="end" type="hidden" value="Text" />
</span>
And CSS:
#controls.box-shadow{
background-color: white;
font-size: 13px;
position: relative;
padding: 5px;
z-index: 10000;
float: right;
height: 35px;
width: 96%;
margin-left: 20px;
}
.box-shadow{
box-shadow: 0px 0px 15px 0px #232361;
-moz-box-shadow: 0px 0px 15px 0px #232361;
-webkit-box-shadow: 0px 0px 15px 0px #232361;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#232361')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#232361');
}
#start{ width:82%; height:27px; border:none; padding:5px}
Box-shadow doesn't work natively in IE8 but you can use a polyfill for CSS3.
Here's a working example: http://css3pie.com/
You need to apply the polyfill to your element like so
.box-shadow {
box-shadow: 0px 0px 15px 0px #232361;
-moz-box-shadow: 0px 0px 15px 0px #232361;
-webkit-box-shadow: 0px 0px 15px 0px #232361;
behavior: url(PIE.htc);
}
CSS3 box-shadow is not supported in IE8 or below. I personally would not worry about IE8 support, but if you need to, then MS has a DropShadow that has been around since IE5.5.
Box Shadow Support
Drop Shadow
if you don't want to use any third party plugin, you can refer to this website:
http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/
Related
I have a small challenge:
how to add shadow to each letter in the header?
I tried this but add shadow to the whole div not to separate letter...
shall i wrap each letter in a span or what is the solution ?
h2 {
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
You need to use text-shadow instead of box-shadow
Edit:
text-shadow doesn't have a spread value
Using your example it would be:
h2 {
-webkit-text-shadow: 10px 10px 5px rgba(0,0,0,0.75);
-moz-text-shadow: 10px 10px 5px rgba(0,0,0,0.75);
text-shadow: 10px 10px 5px rgba(0,0,0,0.75);
}
As an important note to the answer of Ricardo Ribeiro i'd add that in this way compatibility is "limited" in IE to the version 10+
For versions < 10 till 5.5 a proprietary filter can be used as fallback:
h2 {
filter:progid:DXImageTransform.Microsoft.Shadow(color=#xxxxxx,direction=[int],strength=[int])
}
more info here
so i have a nice box-shadow that seems to work in all browsers except ie 8 and below. I need my site to be compatible for IE 8.
here is the effect that i'm referring to:
http://unifiedforuganda.com/ugandanprograms.html
here is the relevant css:
.program-image {
position: relative;
float: left;
width: 400px;
padding: 2px;
margin: 10px 20px 10px 0;
-moz-box-shadow: 3px 3px 15px 3px #414141;
-webkit-box-shadow: 3px 3px 15px 3px #414141;
box-shadow: 3px 3px 15px 3px #414141;
}
i don't care about the shadow showing up in IE but is it possible to have a black border be there for the image only when the shadow is not rendered? i want to avoid IE conditional sheets if possible
EDIT: seems i even have to use conditional comments or use a hack which i don't want to. now just have to figure out to use the conditional comments for IE....
As you can see here, box-shadow is not supported until IE9. But here is a SO post expalining the usability of box-shadow in IE8 and below.
so i ended up using conditional comments in the of the html document...simplier than i thought....here the code i ended up using:
<!--[if lte IE 8]>
<style type="text/css">
.program-image { border: 1px solid black; }
</style>
<![endif]-->
this will target the .program-image class that normally has the box shadow working in most other browsers but when that fails, the above code will kick in and apply a small black border...this is the css:
.program-image {
position: relative;
float: left;
width: 400px;
padding: 2px;
margin: 10px 20px 10px 0;
-moz-box-shadow: 3px 3px 15px 3px #414141;
-webkit-box-shadow: 3px 3px 15px 3px #414141;
box-shadow: 3px 3px 15px 3px #414141;
}
I'm using a 1120px css responsive framework responsive or it can act as a fixed grid whenever I need it.
I have a div inside the 1120px container div on which I want to apply a full width background color.
The background color of the div's is of course only inside the container div and I want to make it fill the full width of the body element.
Now the problem is that the div is generated automatically by a shortcode so I can not create an outer div and set it to 100% width.
Here is the markup from the shortcode:
<div class="toggle-default">
<div class="toggle">
<div class="toggle_title toggle_active">LINE-UP</div>
<div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div>
</div>
</div>
and this css :
.toggle{ margin-bottom: 5px;
clear: both; float: left;
position: relative;
width: 100%;
}
.toggle .toggle_title {
position: relative;
font-size: 112.5%;
font-weight: 700;
padding-bottom: 15px;
padding-left: 25px;
text-decoration: none;
}
and here is a FIDDLE
Now, the problem is that this markup is under a container div which has 1120px width.
I was thinking to add on .toggle .toggle_title position:absolute; and set a min- width of 1480px for example but then everything will break.
I'm sure that is a better approach to this kind of issue.
Can anyone give me some tips on how to make this work?
Thank you!
Here's a really ugly way to do this. and I'm posting this with an expectation of someone downvoting this... but it works.
Here's a fiddle for it http://jsfiddle.net/5mn22/8/
Add this to your CSS:
.toggle_title, .toggle_content {
position:relative;
z-index:2;
}
.toggle:before {
content:"";
width:4000px;
position:absolute;
height:100%;
background-color:red;
left:-50%;
z-index:1
}
Basically, just adding a null content before the div with a width double the size of expected screen resolution and position it to the left 50% to make sure it stretches the entire distance.
What do you think?
Try out thinking different changing css parameter instead of using background-color. I have tested it with :box-shadow parametr:
.toggle {
box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
-webkit-box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
-moz-box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
}
Take a look at live example (blue row)^http://kreditka.testovi-site.pw
Regards,
Max
I have a very peculiar problem concerning formatted input buttons.
On my first page, I created a css rule named "button" for formatting buttons that stand alone in one row. it works perfectly, and the button appears as shown below
the css for this button is below
.button {
width: 100%;
height: 15mm;
background-color: #AAA;
color: #FFFFFF;
font-size: 20px;
text-shadow: 0px -2px #888;
border:none; !important
-moz-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
-webkit-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
}
In html, it looks like this:
<a href="dashboard.html">
<input class="button" type="button" value="SUBMIT" action="dashboard.html" />
</a>
The problem is, I've copied this rule and altered it slightly in a second page for buttons which are parallel, and it doesn't format the buttons. strangely enough, it appears right in dreamweaver
but in any browser, it loses it's formatting
Here is the css for the parallel buttons
.2buttons {
width: 40%;
height: 15mm;
background-color: #AAA;
color: #FFFFFF;
font-size: 20px;
text-shadow: 0px -2px #888;
border:none; !important
-moz-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
-webkit-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
}
and here is the html
<a href="report.html">
<input class="2buttons" type="button" value="OK"/>
</a>
strangely enough, even if you apply the first css rule, which works, to these buttons, they still remain unformatted.
There two thing in your code.
first
Never start class &ID name with numerical number.
Write like this .buttons2 instead of this .2buttons.
& Second
Write like this
border:none !important;
Instead of this:
border:none; !important
border:none; !important should be border:none !important;
And change the class name to .twoButtons (or something else) instead of .2buttons as class names can't start with numbers...
Do NOT start a class name with a number! This is only supported in Internet Explorer.
See
http://www.w3schools.com/css/css_id_class.asp
Your problem in that the name of the class starts with number. You should change that.
I want to use CSS to create rounded-corners on facebook fan-page. I have created the fanpage but I can't get the styles to work for safari browser. I have used to Safari Development tools and when I do the in-line styles it actually works but when I go and put it in the fbml code, nothing updates in safari. I have also included the same style in a stylesheet which is hosted somewhere else and it doesn't work. any help would be appreciated.
My CSS for rounded-corners
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
-khtml-border-radius: 0px 0px 8px 8px;
-webkit-box-shadow: #666 0px 2px 3px;
border-radius: 0px 0px 8px 8px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
padding-left: 5px;
padding-right: 5px;
background: #DAE1EB;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#DAE1EB), to(#DAE1EB));
background: -moz-linear-gradient(#DAE1EB, #DAE1EB);
background: linear-gradient(#DAE1EB, #DAE1EB);
-pie-background: linear-gradient(#DAE1EB, #DAE1EB);
I don't see why it shouldn't work.
Try this:
In the src of your CSS after is says .css try putting .css?2 (any number).
I've had some problems with FB caching and it's CDN, this usually solves it.
Let me know if this helps.