i have a bug i'm trying to narrow down and it's proving to be a doozie. i'm making a modal overlay and in IE8 for some reason i am able to click "through", focus inputs and select text underneath it.
in IE9, FF, Chrome everything works as expected. unfortunately a reduced testcase i slapped together (shown below) works just fine in IE8. has anyone run into this bug before? hoping to save some time. thanks!
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: pink;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
</style>
</head>
<body>
<input type="text" />
<div></div>
</body>
</html>
The problem is indeed that IE allows clicks to bleed through when the background of a div is transparent. For me, this works everywhere:
Just use a base64 encode of a 1x1 pixel transparent GIF as background, this stops all the clicks / taps (also tested on IE9 and IE8). Plus, this is pure CSS, no extra images needed.
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
The root cause of this issue is that IE does not consider semi-opaque backgrounds to be valid click targets, and so clicks are passed through to the element underneath.
For IE, you must have a solid color background or a background image to have an element capture clicks. As you've discovered, filters will not work.
The common thing to do is to use a 1x1 transparent GIF as the background-image for IE. The element will then capture clicks appropriately.
figured it out, i was using rgba() rather than opacity because i needed only the background to have transparency.
for IE it generated gradient filter using -ms-filter which was causing the issue. ended up just using
background: url(/images/EBEBEBB3.png);
background: rgba(255,255,255,.7);
Related
I am using this animated banner in my website.
Now I've copied the exact code from the tutorial but for some reason in my version the images seemed to be placed at the bottom of the table and cut off instead of as in the example. I've tried a number of possible solutions but either I've done them in the wrong place or they just don't work.
Normally I would add in the code but in this case (as you'll see from view page source) it's too long to post.
Any help will be appreciated
Well, I just opened Chrome Inspector changed few css properties and it worked. Here they are...
.photobanner
{
height: 232px;
width: 984px;
}
#container2
{
width: 748px;
overflow: hidden;
margin: 50px auto;
background: white;
}
I guess this would work.Tested in chrome..try your self with other browser and you should reduce margin of <h1> tag
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'm using the FB like box widget on my website. I noticed that bigger images published on FB are appearing distorted in the box.
I'm seeing that the css responsible for this is:
.uiScaledImageContainer img {
height: 100%;
min-height: 100%;
}
Is there a way I can force height: auto in my css?
Apparently anything I declare for this element in my sytlesheet is ignored, even using !important.
You can't edit the CSS in Facebook's iFrame.
I'm having the same issue but there is another bit of code that is overiding the "height:100%" with "height: auto" and i'm getting the same outcome. If I change the min-height to "auto" it seems to fix it.
The original code is:
.fan_box .uiStreamStory .uiStreamAttachments .photoRedesignAspect .img, .fan_box .uiStreamStory .uiStreamAttachments .photoRedesignCover .img, .fan_box .photoRedesign .img, .uiStreamStory .videoRedesign .uiVideoThumb img {
height: auto;
left: 0 !important;
width: 100%;
And
.uiScaledImageContainer img {
height: 100%; <!-- this is being overwritten -->
min-height: 100%;
position: relative;
Now we just need someone to update facebook's likebox.php.
Surprisingly, IE is the only browser that this isn't a problem. And for some reason firefox doesn't load the app altogether...
since nothing has changed until now here are some more details I found out to this problem:
It only appears to me on images that are in an album, not single
images that were uploaded in a post.
It appears to me in chrome browser and on iphone and android devices, not on firefox and
internet explorer.
Maybe that helps.
I did give a search before I started to ask this question as it is a very simple question. I have an image and I would like to have it as the only element on our webpage. There is no other content as this image conveys what we want to convey. Now we would also like to resize itself depending upon the device it is being displayed. I hope this is achievable through HTML though I would like to know if there is any other options.
Thank you,
Karsnen
What you're looking for is the background-size property. By applying background-size:cover to your <body>, the image will resize itself accordingly regardless of viewport dimensions.
Note: Your image may clip with the use of cover.
An alternative value for background-size can also be contain. If you apply background-size:contain instead, it'll still resize the image accordingly just as the former would.
Note: While this approach promises to never clip the image, it'll also show negative/dead space as well (which sometimes isn't ideal).
Your CSS should reflect the following:
body {
background-image: url('bg.jpg');
background-position: center center;
background-size: cover; /* or background-size: contain */
}
You can use an image as a web resource (“page”). You could simply link to it using something like href="test.jpg", or you could announce its URL directly. Browsers will display it somehow, possibly scaling it to fit browser window width.
The next simpler, and better, approach is to use a page with just an img element as its content. It can be made to scale to browser window width by setting its width to 100% (in HTML or in CSS). This way, it will keep its width:height proportion when scaled. The quality of scaling in browsers varies but is generally good, unless you scale upwards a lot. In this approach, the inherent width of the image should be sufficiently large (say 2,000 pixels) to avoid considerable upwards scaling.
To remove default spacing around the image (default page margins), it’s simplest to use CSS.
Example (with “...” to be replaced by useful information):
<!doctype html>
<meta charset=utf-8>
<title>...</title>
<style>
html, body { margin: 0; padding: 0; }
</style>
<img src="demo.jpg" alt="..." width="100%">
Set it as a background-image and use the appropriate background-size (e.g. contain):
html {
height: 100%;
}
body {
background: url('to/your/image.png') no-repeat;
background-size: contain;
}
Here's a demo.
I use this:
css
#body{
background:url(../img/bg.jpg);
margin: 0;
}
javascript
$("#body").css('width',window.innerWidth)
$("#body").css('height',window.innerHeight)
On Firefox, A blank space appears above embedded HTML5 audio element's chrome. This appears whenever media starts playing. I tried to figure out where this comes from but couldn't. Is this something that's inherent to Firefox handling html5 audio?
For example I clicked on the example (at the bottom of the post) on http://www.html5rocks.com/en/tutorials/audio/quick/ , and it looks like below image. (On Firefox).
However, this doesn't happen on Google Chrome and Safari.
This seems to be a problem with Firefox's implementation of the HTML5 audio element. You can work around it with a little extra markup and css.
CSS:
<style>
.wrapper {
height: 30px;
position: relative;
}
audio {
bottom: 0;
position: absolute;
}
</style>
HTML:
<div class="wrapper">
<audio src="your/path/file.mp3" controls></audio>
</div>