i have some images (in front of my bachground-image) with low opacity(png format)
and every thing was good in ie8 & firefox until i add pie.htc(or border-radious.htc from google code) for rounded corners & Shadow Box in ie8...
after adding pie.htc by :
behaviour : url(pie.htc);
and adding below codes :
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow: 5px 5px 20px red;
-moz-box-shadow: 5px 5px 20px red;
-webkit-box-shadow: 5px 5px 20px red;
the opacity of my images has gone...
i test it with a simple html project and figured out when we use shadow box in ie 8(just ie8 & ff is ok) the shadow fills our entire element , so the opacity is wanished.
how can i fix this shadow + opacity problem?
=====================================================
MY QUESTION IN ONOTHER WAY :
HOW CAN WE COMBINE THE BELOW CODES FOR IE8 (with keeping opacity):
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";//opacity
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);//opacity
-ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(attribute1=value1, attribute2=value2, etc)";//shadow
thanks in advance
icant is correct but has a small typo. It should be progid instead of profid. I tried editing but it wouldn't let me edit just one letter.
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25) progid:DXImageTransform.Microsoft.dropShadow(attribute1=value1, attribute2=value2, etc);
Thanks icant!
it seems it's not possible to use shadow with opacity In IE 8...
When You add shadow after opacity to an element (in firefox every thing is ok) in IE8 you can not feel Opacity exists , because of that shadow fills the entire element and do n't let the opacity show itself.
however i checked this issue by the simple html project and searched for solving this issue with no results / if you find a solution about this plz share it with us.
Just put the shadow after the opacity and add a space in-between. It's as simple as it could be.
filter: profid:DXImageTransform.Microsoft.Alpha(Opacity=25) progid:DXImageTransform.Microsoft.dropShadow(attribute1=value1, attribute2=value2, etc);
Related
I've been struggling with this one.
I'm creating a personal website, and I'm using an animated canvas element for the background (animated via jquery). The issue seems to be that the text and box shadows for my anchor tags on hover are causing my canvas element to show a vertical scroll bar, and it is only happening in Chrome.
If I remove the text & box shadows, or if I remove the canvas elements then the issue goes away. I've tried adding overflow:hidden to pretty much everything, but to no avail.
See my website here: http://www.trunker.me
#mainMenu a:hover , #mainMenu a:active {
color: rgba(255,0,0,1);
box-shadow: 0px 0px 5px 2px rgba(255,0,0,1);
border-radius: 20px;
text-shadow: 0px 0px 5px rgba(255,0,0,1);
}
Thanks in advance!
EDIT:
Using windows 7 ultimate with Chrome Version 36.0.1985.125 m. It creates a second vertical scroll bar next to the browser scroll bar. Screenshot here:screenshot http://www.trunker.me/images/Capture.PNG
Remove all those overflow:scroll from several elements in your code.
Try overriding them directly in the console.
I have some fairly complex stacking arrangements going on in a site I'm working on. With a background image on a div being a gradient that overlays an image within it with a lower zindex. Like this:
So, this works fine at larger widths. When the width is smaller the image appears over the gradient background, like this:
Something's happening and I can't figure out what. I'm using twitter Bootstrap 2.3.0 as a framework. Link: http://www.osullivans-pubs.com/draft
EDIT: I'm pretty sure the problem is something to do with having a negative z-index on the image (#back img). But having the z-index at zero means the image appears above the gradient...
UPDATE: I worked it out. It's not really possible to have an element with a background image overlap a child element. So I created an absolutely positioned element before (and seperate from) the container and applied the appropriate zindex to that. That fixed it.
you have to add a z-index in liquid-slider.css file below is the code...
.liquid-slider-wrapper {
margin: 0 auto;
clear: both;
overflow: auto;
position: relative;
width: 1110px !important;
z-index: 20;
}
I have a site running joomla 3.0, and I'm trying to customize the menu bar.
The template is protostar and Im using the nav-pills style to make the menu bar run horizontal on the top.
The problem that I have is that I cannot find where I need to change or include css to CHANGE the rollover BLUE color on the submenu.
Also I would like to know how to change the color on that white little arrow on the submenu.
Image of the menu I want to edit
The overall tip worked for me as well. Joomla 3.x must use the .navigation .nav-child:hover section as above.
I also had to change the gradient lines section as one of them was being invoked.
Just changing the background lines did not show up.
I though about deleting them but instead made the start/stop the same.
Guessing that what gets used is a browser based choice if an option fits.
Just went on the Bootstrap site and inspected the element and it appears to be on lines 2927 to 2934 of bootstrap.css:
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
color: #ffffff;
text-decoration: none;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
background-color: #0081c2; is for non CSS3 compatible browsers and everything below is for CSS3 compatible.
Do bare in mind that Joomla may have changed things around in the bootstrap.css file so it may be on a different line, however you can simply search for the following:
.dropdown-submenu:hover > a
Hope this helps
Thankx for the Help Lodder! Saddly it did not worked. I found that I had to change not the .dropdown-submenu:hover > a { but instead .navigation .nav-child:hover > a {
Still thankx for taking to time on trying to help me!
Had the same problem. You can use this selector:
.navigation .nav-child li a:hover{
The KEY THING though is to set
background-image:none;
as the default style uses a gradient, not just a background colour!
UPDATE This would appear to be a issue with background in IE8. CSS3 PIE appears to work correctly however when I have a background it doesn't show. If I remove the background css completely it shows again. IE:
html, body{
background: /*CSS */; /* Remove this property */
}
Now my question turns into how do I get CSS3 PIE to work properly in IE 8 with a background?
Here is a jsFiddle with the above code.
Original Question
I am attempting to replicate a look in IE 8 using CSS3 Pie JS Edition. Here is what I want it to look like:
Here is the way it looks in IE 8 with CSS3 PIE:
As you can see when I implement CSS3 PIE the box disappears! I have not used CSS3 PIE before and do not know what is wrong. Here is the code I am using:
NOTE: I am using the JS edition (I am using a hosted CMS and do not have server side access thus cannot use the .htc file.)
Here is my code to call CSS3 Pie:
<!--[if lt IE 10]>
<script type="text/javascript" src="/js/PIE.js"></script>
<script type="text/javascript">
$(function() {
if (window.PIE) {
$('.surround').each(function() {
PIE.attach(this);
});
}
});
</script>
<![endif]-->
Here is the HTML and CSS:
<div class="row surround">
<div class="twelvecol">
<p>Lorem Ipsum</p>
</div>
</div>
.surround
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
padding: 25px;
background:#f5f2f7;
border: 5px solid #b30005;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.4);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.4);
-o-box-shadow: 0 5px 10px rgba(0,0,0,0.4);
box-shadow: 0 5px 10px rgba(0,0,0,0.4);
-webkit-border-radius:25px;
-moz-border-radius: 25px;
-o-border-radius: 25px;
border-radius:25px;
border-top: solid #b30005 25px;
}
As #Spudley mentioned in a comment above the issue was a z-index issue as described on the CSS3 PIE Website:
Disappearing backgrounds/borders/shadows (z-index issues)
First, a little background on how PIE renders CSS3 decorations: a single element is created which holds all the VML objects. This container element is inserted as a previous sibling to the target element, and absolutely positioned at the same coordinates. If the target element is position:absolute or position:relative, then the css3-container element is given the same z-index as the target element, and since it is a previous sibling in the DOM tree it gets displayed behind, with no possibility of any other element sneaking in between.
However, this does not work so well when the target element is position:static, because static elements do not participate in z-index stacking. The only way to make our position:absolute css3 element go behind it is to give it z-index:-1. Unfortunately, this has a bad side-effect: not only will the css3 element go behind the target element, it will also go behind the background of any ancestor element(s) which are themselves position:static. This leads to situations in which PIE creates the VML rendering correctly but it disappears behind a parent element's background.
The only way I know of to work around this is to either:
make the target element position:relative, or
make the ancestor element position:relative and give it a z-index.
Both of these workarounds can have potential unwanted side-effects in terms of child element positioning and z-index stacking. PIE could easily force one or the other itself, but:
One or the other may be more appropriate depending on the particular situation, so the CSS author needs to be able to control which one gets chosen.
Forcing position:relative outside of the CSS would put IE out of sync with other browsers, leading to confusing inconsistencies.
PIE therefore does neither, and it is up to the author to implement either workaround where necessary. In most cases simply adding position:relative to the target element is fine.
The solution can cause other issues. I ended up asking myself is it worth the hassle to create rounded corners? For some sites, yes it would be, for others, well it is your choice.
Instead of behavior: url(PIE.htc);, you can set behavior: url(PIE.php);.
I need use a modal plugin and colorbox looks great.
How do I load it w/o the rounded borders?
Given my page size, the thick border taking too much space.
Anyway to hide it or make it thinner and hide the border if needed on some calls?
You can hide the borders in easy way:
$("#cboxTopLeft").hide();
$("#cboxTopRight").hide();
$("#cboxBottomLeft").hide();
$("#cboxBottomRight").hide();
$("#cboxMiddleLeft").hide();
$("#cboxMiddleRight").hide();
$("#cboxTopCenter").hide();
$("#cboxBottomCenter").hide();
and add class with border style if you want with this way :
.thin_border {
border: 10px solid blue;
border-radius: 10px;
margin: 10px;
box-shadow: 0 0 25px blue;
}
and then add it with jquery
$("#cboxContent").addClass("thin_border");
I think colorbox isn't actually using the property "border" to get that huge black border going around. It seems like its being incased in a 3 x 3 div which uses images to create that border. Im sure you could remove it but its going to require messing with the actual colorbox javascript. You could try messing with the CSS as well.
You consider looking into a diffrent plugin like lightbox2 or shadowbox? I personally use slimbox (nice little clone of lightbox). If you want to mess with the code go for it. Otherwise I would just pick a diffrent plugin.