I cannot figure out, in a single page, why CSS3PIE works on the outside page shadow but not work on the shadow of the photos in IE8. Everything work fine in other browsers.
I am using #page for the outside page div and
#facilities_maintable tr>td.column2 img for the photos in the page content.
#page
{
position:relative;
width: 1024px;
margin-left: auto;
margin-right: auto;
margin-top:0px;
background-image: url('../../content/img/bg4.jpg');
background-repeat: no-repeat;
background-color: #efebe0;
-webkit-box-shadow: #222 0px 0px 8px;
-moz-box-shadow: #222 0px 0px 8px;
box-shadow: #222 0px 0px 8px;
behavior: url('../../Content/PIE.htc');
}
#facilities_maintable tr>td.column2 img
{
margin:5px 15px 5px 15px;
border:1px solid #666;
-webkit-box-shadow: #777 3px 3px 5px;
-moz-box-shadow: #777 3px 3px 5px;
box-shadow: #777 3px 3px 5px;
behavior: url('../../Content/PIE.htc');
}
just set td {border-collapse: separate;}
i know, looks strange, but works
Safari to version 5.1, Chrome to version 10.0 and iOS support a property-webkit-box-shadow.
Firefox to version 4.0 supports property-moz-box-shadow.
Internet Explorer up to version 9.0 does not support the property box-shadow.But you can use non-standard property of the filter:
filter: progid: DXImageTransform.Microsoft.dropshadow (offX = 5, offY = 5, color = # 000000);
Related
Ok, so I wish to create something like http://i.imgur.com/jox0ENW.jpg. But be of a modular type, where I might have a button class that'll make it look like that, and a class I can use to apply to sections.
Right now I have:
.double-drop {
position: relative;
padding: map-get($padding, xl);
margin-top: (-1 * 280px);
border: 3px solid $black;
background-color: $white;
&:before {
content: '';
position: absolute;
z-index: -1;
top: (-1 * map-get($padding, m));
right: (-1 * map-get($padding, m));
width: 100%;
height: 100%;
border: 3px solid $black;
background-color: $lighter-grey;
}
}
Which works, and creates that effect on sections. But not if the section is inside a parent which is absolutely positioned. (the drop shadow goes behind..)
I would like to imitate that effect in the image, for all my buttons, and obviously transition its translate so it moves or what not.
Would it be possible first of all?
Multiple Borders on CSS Only Button
Perhaps using multiple shadows as borders would be a simple solution? It degrades gracefully in browsers that don't support it, and it's easy to work with.
JSFiddle Example
.shadow-button {
padding:10px;
border:solid 3px #000000;
display:inline-block; /* used only to shrink wrap the div around the contents, has a default margin */
-webkit-box-shadow:8px -8px 0px -2px #cccccc, 8px -8px 0px 1px #000000;
-moz-box-shadow:8px -8px 0px -2px #cccccc, 8px -8px 0px 1px #000000;
box-shadow:8px -8px 0px -2px #cccccc, 8px -8px 0px 1px #000000;
font-family:Verdana, Tahoma, Arial, sans-serif;
font-weight:bold;
}
p {padding:10px;}
<div class="shadow-button">PLAY MUSIC VIDEO</div>
Browser Support: http://caniuse.com/#search=box
i'm just trying styling the select box both for webkit and moz browsers , on webkit it looks great but in Firefox it looks so bad, the default option is not vertical aligned with the select box.
Can you help me out finding whats wrong with this code please:
CSS:
select{
min-width: 100%;
width:inherit;
background: #fff;
height: 33px;
border-radius:5px;
font-size: 15px;
border:none;
box-shadow: 0px 0px 30px 20px rgba(255,255,255,0.5) inset,0px 0px 0px 1px #ccc;
}select option,select option:hover{
padding:5px;
}
HTML
<select>
<option>hey</option>
<option>hey2</option>
<option>hey3</option>
</select>
Here a fiddle so you can see how it looks on Firefox and then in Chrome :/ unbelievable!!
http://jsfiddle.net/wL8Rs/
I'm using Chrome latest 34.0 version and Firefox latest 29.0 version
Add padding to select
select{
min-width: 100%;
width:inherit;
background: #fff;
height: 33px;
border-radius:5px;
font-size: 15px;
padding:5px;
border:none;
box-shadow: 0px 0px 30px 20px rgba(255,255,255,0.5) inset,0px 0px 0px 1px #ccc;
}
http://jsfiddle.net/wL8Rs/3/
i have the following code that customizes a webkit scroll bar....
/*webkit scroll bar*/
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0);
}
what i would like to do is customize the scrollbar of a page loaded in firefox the same way... for which i tried the following code..
/*mozilla scroll bar*/
::-moz-scrollbar {
width: 6px;
}
::-moz-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-moz-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-moz-scrollbar-thumb:window-inactive {
background: rgba(255,0,0);
}
but it does not work..... how can i customize the scrollbar in the same way i did for webkit... any help would be appreciated... thanks in advance... :)
You can't because of bug #77790 (Link#1).
Bug 77790 - (scrollbar-colors) Style the scrollbar (binding ::-moz-horizontal-scrollbar to XBL)\
The only way is to use jQuery. I don't know how to code it, so don't ask me. I prepared the following links for jQuery scrollbars. Click here!(Link#2)
Links:
https://bugzilla.mozilla.org/show_bug.cgi?id=77790
http://plugins.jquery.com/custom-scrollbar/
FireFox support these two:
scrollbar-width : auto|thin|none...
scrollbar-color
for firefox now you can use this
.element{
scrollbar-width: thin;
scrollbar-color: blue transparent;
}
where blue is for the thumb and transparent for the track
I am having problems getting box-shadow to work in IE10 I have tried to add
#media screen and (min-width:0\0)
rule but with no success.
The codes works well in firefox and chrome.
code
.glossy-curved-black .slide-wrapper {
background-color: #FFF;
border: 10px solid #FFF;
box-shadow: 40px 40px 40px #000;
-webkit-box-shadow: 40px 40px 40px #000;
-moz-box-shadow: 40px 40px 40px #000;
}
#media screen and (min-width:0\0) {
/* IE9 and IE10 rule sets go here */
.glossy-curved-black .slide-wrapper {
box-shadow: 0px 0px 80px #000;
}
}
my website here
The problem is in your head element:
<!-- Mimic Internet Explorer 7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
You're forcing the page into IE7 mode, if you want IE to act like a modern browser use IE=EDGE instead. I tested forcing the latest rendering mode and the shadow shows up.
Update
Per recommendation by Microsoft, just use an HTML5 doctype and avoid sending a document compatibility mode. Browser detection is deprecated and should be avoided in general. Use feature detection instead. The default mode is an in standards mode always has been EDGE*.
<!doctype html>
*Except in the web-browser control, in which case the document mode must be set explicitly to EDGE either via the X-UA-Compatible header or via the registry.
The main CSS declaration without the vendor prefix should always be last. Try this instead:
.glossy-curved-black .slide-wrapper {
background-color: #FFF;
border: 10px solid #FFF;
-webkit-box-shadow: 40px 40px 40px #000;
-moz-box-shadow: 40px 40px 40px #000;
-ms-box-shadow: 40px 40px 40px #000;
box-shadow: 40px 40px 40px #000;
}
#media screen and (min-width: 500px) {
/* IE9 and IE10 rule sets go here */
.glossy-curved-black .slide-wrapper {
-webkit-box-shadow: 0px 0px 80px #000;
-moz-box-shadow: 0px 0px 80px #000;
-ms-box-shadow: 0px 0px 80px #000;
box-shadow: 0px 0px 80px #000;
}
}
I also noticed you had a weird min-width value in your media query. I have set this to 500px as an example for you.
I'm having some problems to add opacity to IE 8 (I would also like this to work in IE7 and IE9 but I've just tested it on IE8).
I have my css as this:
label{
color: #333;
text-decoration: none;
border: solid 1px #bebebe;
width: 138px;
padding: 5px;
text-align: center;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px #333;
box-shadow: 0 8px 6px -6px #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #f2f2f2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#bdbdbd');
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#bdbdbd));
background: -moz-linear-gradient(top, #f2f2f2, #bdbdbd);
display: inline-block;
margin-bottom: 10px;
position: relative;
outline: none;
}
So all my labels must be the same in all explorers (This is working with no problem) but I wan to add a opacity to some of these labels. I was using:
.aclass{
opacity:0.4;
filter:alpha(opacity=40);
}
But it is not working on IE. I read some articles here, for example:
Opacity CSS not working in IE8 , opacity in IE8 not working
and others but I haven't found the solution for this. I tried adding this:
.aclass{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
opacity:0.4;
}
Also adding "zoom:1;" to the previous block or " display: block;" but still not working. I haven't found the solution to this, so if anyone could help me I would really appreciate it.
Thanks in advance!
In your gradient filter, you can define #AARRGGBB whereas the AA == alpha values.
From MSDN. You might have better luck doing this than adding unique filters for gradient and alpha.