I have a few buttons on my page that are styles using sprites, in ie6 however with the 'UNIT Png fix' http://labs.unitinteractive.com/unitpngfix.php my sprites no longer work and there stretched to fit the container, Doesn anybody know if there's a png fix out there to work with sprites? Thanks
you can fall back to a gif sprite background for IE6.
.myClass {
background-image: url(img.png);
}
.ie6 .myClass {
background-image: url(img.gif);
}
you can get the .ie6 class on your <body> by following the html5boilerplate approach.
http://html5boilerplate.com/
EDIT
or add the IE6 override to a conditional css file:
<!--[if lte IE 6]><link rel="stylesheet" href="ie6.css" /><![endif]-->
credit to #lucideer, see comment below
In short, no there isn't. I ran into the same issue recently and I just created a GIF from the standard PNG and used an IE6 stylesheet to use the GIF. That way sprite positioning is still supported. This solution's viability depends on your design and how much transparency is needed. In some cases you can put the background in the gif where necessary, but I personally wouldn't worry too much about IE6
Related
I'm working on optimizing my site, so transforming the pictures to Webp. Problem is, Safari browsers don't support Webp, so I have to set a fallback image for them. In HTML it's easy enough, just using the <picture> element, but in CSS there's no equivalent. Right now I have just set two backgrounds, so if one doesn't work, the other one will show, like this:
.header {background-image: url(images/main.webp), url(images/main.jpg); }
Problem with that is that it will make the browser load both of the images all the time, which defeats the point of optimization. Can I make the 2nd image to load only if the first one fails? Thanks.
I think there is one solution for now which is making two classes with a different image URL to fix the unsupporting browsers for webp format something like this
.no-webp .elementWithBackgroundImage {
background-image: url("image.jpg");
}
.webp .elementWithBackgroundImage{
background-image: url("image.webp");
}
i just disappoint with IE. how ever for image quality and better image view. Is there some thing css tricks for especially with IE that can show better Image appearance.
here is Image appearance of my screen in chrome :
here is Image appearance of my screen in IE :
i just want to know is that IE problem or there is my image problem or there is any way to fix this issue with css tricks.
please help me...
this is known IE issue you may try with
img.imageclassname {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
}
possible duplicate of IE shows black border around PNG when faded in
try with this one!
Just by what i have seen in the screenshots, I think the IE version is old or the browser is new but is rendering in an older standard (IE7 standards mode). Using F12 find out what mode IE is opening it. If it is opening it in an older mode, force browser to open in the latest mode by using the meta tag..
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
hopefully this helps.
I'm using a drupal 7 module to load in a background image but IE8 doesn't support css3 resizing.
background-image: url('image.jpg');
background-size: cover;
I can't easily load in the image using the usual methods such as putting it in a DIV or using the ms-filter alphaimageloader to load it.
A javascript solution is fine if this can't be done with just CSS that ie8 supports. (Something that also works for ie7 would be fantastic too, but ie8 is the priority).
Add Full Size Background Image to Internet Explorer 8, and IE7
Since you can't easily place the background in your site using the usual methods, can you place an image within your code? If so, this solution might work. I used it to simulate a full-screen background for IE8 and IE7, and it works well.
Place the image right after the body tag in the html code. (You can probably place it elsewhere depending on your site structure, but you may have to add a z-index.) Next, the background in this example is wrapped in an IE Conditional Comment so only IE8 and below will see it. (Note: It's buggy in IE6, but you might be able to get it to work? If not, just adjust the Conditional Comment to include IE7 and IE8 only).
HTML Code
<!DOCTYPE html>
<head></head>
<body>
<!--[if lte IE 8]><img src="../path-to-your-image/your-photo.jpg" class="ie87-bg"><![endif]-->
CSS
.ie87-bg {
display:block;
position:fixed;
top:0;
left:0;
min-height:100%;
min-width:1024px;
width:100%;
height:auto;
margin:0;
padding:0;
}
You probably already know this, but here are 3 ways to target older versions of IE:
JavaScript browser feature detection - mattstow.com/layout-engine.html
Css Hacks - BrowserHacks.com
IE Condtional Comments http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx
Helpful Tips: background-image:none; overwrites background-size: cover. The _ hack is one way to turn off the custom IE background in IE6 .ie87-bg {_display: none;}.
position:fixed; is buggy in mobile/touch screens. The default position:scroll; works well on touch. The background idea is from this tutorial - http://css-tricks.com/perfect-full-page-background-image/
This works for me to stretch image on full window in IE8
http://css-tricks.com/perfect-full-page-background-image/
I want my main logo to change when mousing over.
I understand there are several ways to achieve this, and was wondering what's the best way for stability, browser compatibility, efficiency - and ease to setup.
Some ways I've found are:
Javascript (jQuery) replacement of the "src" attribute.
CSS using backgrounds and "hover"
Any more?
What's best?
Bottom line
For content-ful images, you want to have the src in the HTML markup. You want to use the Javascript solution and put the rollover image in an attribute.
For content-less images UI elements, especially ones that are common across the site or duplicated, a straight CSS solution would be the best (so you don't have to re-declare the image locations at each invocation). Among the CSS solutions, sprites are the best since they don't require preloading overhead.
The Javascript solution
HTML:
<img src="/img/one.jpg" data-rollover="/img/two.jpg" />
In jQuery:
$(function(){
$('img.rollover').hover(function(){
var e = $(this);
e.data('originalSrc', e.attr('src'));
e.attr('src', e.attr('data-rollover'));
}, function(){
var e = $(this);
e.attr('src', e.data('originalSrc'));
}); /* a preloader could easily go here too */
});
Sample implementation: http://jsfiddle.net/dtPRM/1/
Benefits: It's easy; it makes sense; it works with minimal additional markup once you have your library set up.
Downsides: Requires Javascript and overhead of loading the jQuery library.
Probably the best option. If your user is using a browser where rollovers are relevant (probably the case), they have the Javascript capabilities to run this option. The folks who have intentionally turned Javascript off for some reason will clue in if you leave a little <noscript> note saying that they may not get the full featureset.
The CSS solution: Best
HTML:
<div id="img1" />
CSS:
div#img1 {
height: 400px;
width: 300px;
background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
background-position: top right;}
Sample implementation: http://jsfiddle.net/dtPRM/5/
Personally, I think that for content-ful images, this is an even worse option than the CSS + two background images solution. You're separating the HTML markup from the semantic value of the display.
If you're using content-less images like UI elements, though, this is the best solution in my opinion.
The CSS solution: Also okay
Another CSS option is available that doesn't involve background images (preferred among the CSS solutions if you want to have the image tags in the HTML, like for semantically meaningful images).
<div class="rollover">
<img class="rollover" src="http://dummyimage.com/600x400/000/fff" />
<img class="" src="http://dummyimage.com/600x400/fff/000" />
</div>
CSS (I use the :not pseudo-selector here, but it's pretty easy to avoid using it; I also think I got the classnames semantically backwards):
div.rollover img:not(.rollover) {display: none;}
div.rollover:hover img:not(.rollover) {display: inline;}
div.rollover:hover img.rollover {display: none;}
Sample implementation: http://jsfiddle.net/dtPRM/2/
Benefits: Semantically sensible compared to the previous CSS solution of putting all the information the stylesheet.
Downsides: Extraneous markup needed.
Comment: This one may automatically pre-load depending on whether the browser calls for it.
Bottom line: A decent fallback if option (1) is unavailable because you absolutely need IE2 compatibility or non-JS support.
The CSS unsolution: Stay away
I mention this only because you mentioned it in the question. I wouldn't use it.
HTML:
<div id="img1" />
CSS:
div#img1 {
height: 400px;
width: 600px;
background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
background-image: url('http://dummyimage.com/600x400/fff/000');}
Sample implementation: http://jsfiddle.net/dtPRM/4/
Benefits: Widely compatible; all you really need to support is background images and hover.
Downsides: Semantically weird to put images in CSS and to centralize it there. Makes future modifications more difficult. That being said, if you have a scenario that warrants a rollover image, there's a good chance it may be a non-content image (e.g., a UI element), in which case CSS would be semantically (perhaps) even more suitable than a regular image. See the note on sprites below.
Other downsides: You'd have to be careful to declare image height and width (a good practice anyway, but it may get cumbersome when you just want to get things done). Users viewing on mobile browsers that may treat CSS background images unusually.
Even more downsides: If you want to layer a preloader on top of it, you're going to be using Javascript and somehow selecting the rollover-able elements, and at that rate, you may as well use Javascript for everything.
Bottom line: Don't use this for content-ful images. If you must stay away from Javascript, use sprites for UI elements and the alternate solution for semantically meaningful images.
#btn{
width:100px; height:100px;/*the dimensions of your image*/
background:url(bird.png) left top no-repeat;
}
#btn:hover{
background-position:left bottom;/* pixel references can be used if prefered */
}
Using an image like this:
Note: Avoid JS image replacements as you will incur a short image load time if images are not cached before.
Hope this helps bro!
W.
CSS using backgrounds and "hover"
Use CSS sprites, in other words combine both images into one and then use css :hover to shift the image.
One advantage of using CSS is that it'll work even if JavaScript is turned off.
One advantage of using a single image is it'll avoid the extra HTTP request.
See: http://css-tricks.com/css-sprites/
Tools to help generate image and CSS:
http://csssprites.com/
http://css-sprit.es/
You should use a :hover CSS rule.
CSS by far. Though you may want to precache your image with javascript.
Image rollovers using 'sprites' List a part - sprites CSS
Use CSS sprites and the :hover psuedo-class in CSS. Here's why:
Switching image source either through JS or through the CSS will cause a "blink" on the first mouse-over while the new image is downloaded by the browser. If you use the sprite, it's just one image that changes position, so no blink.
A single image reduces HTTP requests, making the site load faster in general.
It works if the user has JavaScript disabled.
It's supported by all browser types (desktop, anyways, phone browsers without a :hover state don't count for this anyways).
More information: http://css-tricks.com/css-sprites/
$('#div1').hover(function(){
this.style.color='white';
},function(){
this.style.color='black;
});
or
$('#div1').onmouseover()...
$('#div1').onmouseout()...
Ok, this is pretty weird...
Here's the page in question: http://s289116086.onlinehome.us/lawjournaltv/index.php
The main blue callout background was originally a PNG, but when I applied some jQuery trickery to it (click the numbers in the top right to see what I mean), an ugly white border appeared where the transparency should be. See this screenshot from IE8: http://skitch.com/darkdriving/n62bu/windows-xp-professional
I figured I could sacrifice the quality/flexibility of a PNG and just resaved each of the backgrounds as GIFs and set the matte color to white (for now). Well, I was proven wrong because IE is treating the GIF transparency the same as the original PNGs.
I've read here that the issue with PNGs, Javascript, and IE has something to do with multiple filters can't be applied to one image, but shouldn't GIFs be exempt from this because they lack the Alpha Channel? Is there any way to make this page look similar in IE to Firefox or Webkit browsers?
Thanks in advance!
This is a bug in IE.
No current version of IE supports the opacity CSS proeprty, so jQuery uses the Alpha filter instead. However, filters force the element to be fully opaque, so they don't work orrectly with transparent PNGs.
To use transparent PNGs in semi-transparent elements, the PNGs need to be applied using the AlphaImageLoader filter (even in IE8). For example:
if ($.browser.msie)
$(something).css({
background: 'none',
filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/Folder/Image.png", sizingMethod="scale"),alpha(opacity=100)'
});
(This code works; I'm using it right now)
I basically solved this by loading a different set of images (using PHP) on each page refresh. It's not as dynamic, but my attempts at using the ugly, proprietary CSS filters or other javascript-based plugins were all fruitless. In my eyes, this is clearly one of the biggest bugs I've come across in my time spent hacking away at IE. In fact, I'm suprised it took this long for me to encounter it.
Word to the wise in this case: try to back transparent imagery on a solid color or suffer the consequences in IE.