Trying to implement this gallery on my website.
http://coffeescripter.com/code/ad-gallery/
It is noted in the css file that the next and previous buttons won't show up in IE6 unless a nonexistent background image is applied to .ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next. The code they used is invalid, but it works. I have also tried using a color instead and it does work, but not what I wanted.
I don't want to point to a nonexistent image file or a blank.gif if possible. Does anyone know what causes this problem in IE6 and if there is a pure css workaround? zoom: 1 does not work in this case.
I presume your IE6 requirement is referring to the following snippet from the jQuery AD Gallery plugin's stylesheet, jquery.ad-gallery.css:
.ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next {
/* Or else IE will hide it */
background: url(non-existing.jpg)\9;
}
The \9 at the end of the background shorthand rule is actually a CSS Hack targeting IE6, IE7 and IE8 — not just IE6.
Note: Paul Irish wrote a Comprehensive List
of Browser-Specific CSS Hacks back
in 2009 which highlighted this
attribute parsing bug in IE/Win:
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
If you don't want to use a 1 pixel transparent spacer.gif or non-existent file for IE (which would throw a 404 error), just modify the CSS to re-use one of the existing images in the gallery but specify the background-position's X and Y property to be off the screen:
.ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next {
/* Or else IE will hide it */
background: url(ad_next.png) no-repeat -9999px -9999px\9;
}
This creative work-a-round will allow IE 6-8 to display the previous and next links, but won't actually show the specified background image file, since the X and Y values position the background completely off the screen.
Don't support Internet Explorer 6. It's over 10 years old. Recommend your users upgrade Internet Explorer or switch to a different browser. Problem solved!
Related
A couple of previous post seems to indicate that -moz-background-clip: text is not available in Mozilla.
-moz-background-clip: *text* in Mozilla
Is it possible to hide what appears to be a proprietary WebKit only CSS feature from Firefox and other browsers? I would like to hide the pseudo "after" rule which adds text content to the page to achieve the desired effect from Firefox and IE, etc.
Here is my site, the text clearly renders badly in Firefox but fine in Chrome
http://sandpit.jonathanbeech.co.uk/
Yes, while background-clip is a valid CSS3 property, the text value in non-standard. As such no other browser supports it, and you do not need the other prefixes.
The problem you are seeing is that this feature does not fallback gracefully. Browsers that do not support it will show the background for the entire element.
To avoid this you need to hide the background from other browsers. The best way to do this is to use a webkit prefix. WebKit does not support this for the background property, but it does for CSS gradients. Thus you can specify a transparent gradient, and then specify your background image, by taking advantage of multiple background images:
background: -webkit-linear-gradient(transparent, transparent), url("http://sandpit.jonathanbeech.co.uk/wp-content/themes/jontheme/images/crosshatch.png") transparent;
The main problem here is that Opera supports this -webkit- prefix for compatibility reasons. So you just need to specify a -o- gradient afterwards to cancel that out:
background-image: -o-linear-gradient(transparent, transparent);
You then need to make the text transparent, so that other browsers do not see it:
color: transparent;
See this fiddle to see it in action:
http://jsfiddle.net/dstorey/2dhNM/
As an aside, you can remove the z-index, as this only works on positioned (or not fully opaque) elements. As you've not set opacity or a position other than static on the ::after, this will not apply.
The solutions here have some different methods, which you could use to hide specific CSS properties from FF and other browsers. A bit messy/hacky though.
You could keep the CSS the same and just add
#-moz-document url-prefix() {
.css:after, .hoo:after, .prof:after{ display: none; }
}
to remove the background pattern.
Using SVGs as recommended by the original post answers, would be a more elegant way to illustrate the text background cross-browser.
The CSS-Tricks article "Show Image Under Text (with Acceptable Fallback)" presents a nice solution. With it, -webkit-background-clip:text styled elements look ok-ish in other browsers (solid text on solid background).
Essentially, they use Modernizr to detect if the browser supports -webkit-background-clip:text, and only apply it if yes. Modernizr has to be extended with a custom test to make this possible:
<script src="modernizr-1.6.min.js"></script>
<script>
Modernizr.addTest('backgroundclip',function() {
var div = document.createElement('div');
if ('backgroundClip' in div.style)
return true;
'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g,function(val) {
if (val+'BackgroundClip' in div.style) return true;
});
});
</script>
I'm trying to have our Wordpress blog display a little better in IE8 and below (it works great in IE9, Firefox & Chrome). A big issue seems to be IE8's lack of support for negative margins, so the gap which we have between the posts column and the side widgets is non-existent in IE8.
URL: http://trekcore.com/blog
The CSS controlling that separation is here:
#secondary {
float:right;
width:300px;
margin-right:-320px;
}
Any help on suggestions for conditional CSS to fix this in IE8 and under would be most appreciated!
you should validate your html markups, 35 Errors and 11 warnings wont help.
in the meanwhile, try this fix :
.negative-margin-element {
zoom: 1; /* ie hax*/
position: relative; /* ie forced behavious*/
}
You are using HTML5 elements and IE8 does not understand them and will ignore them and you can't apply CSS to them because IE8 won't know they exist. To fix IE, you need to add the html5shiv. This will add those elements to IE8's DOM tree and set them to block level.
You can write your own code and CSS to do the same thing but the shiv is convenient.
In one of my project, a bootstrap powered dark theme, drop-down menu in subnav isn't rendering properly in IE9. It works fine in firefox, chrome, opera and safari. I tried to debug it but wasn't able to find the problem. What may be the problem? Here are two screenshots depicting the problem -
1) In Firefox it works fine.
2) But in IE9 it appears as transparent, i.e., it is not rendering background color.
I have uploaded it on my server. You can check it live here - http://anujkumar.com/templates/dsadmin/
A place to begin your investigation of the problem may be the Microsoft Gradient Filter in your subnav.css file.
When you remove the following MS Filter property, the drop-down displays in IE 9:
.subnav {
...
progid: DXImageTransform.Microsoft.gradient(startColorstr='#1f1f1f', endColorstr='#1f1f1f', GradientType=0);
}
Also Bootstrap has an .reset-filter() less mixin for it:
// Reset filters for IE
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}
It fixed exactly the same problem for me (Bootstrap ver.2.0.4)
I used "320andup" in order to make my first real responsive website. I managed to have a perfect adaptive environment except only one thing. The background image in Chrome and Safari is pushed down 18px. I can't explain why. Only thing I know is that when i add in the body tag "background-attachment: fixed;" the problem is solved but when I scroll I get an ugly experience that I don't want to have. I also tried this
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
background-image: url(../img/chrome-safari-img.gif);
}
}
with IE to completely break.
Firefox, Opera and IE8 are ok. Only problem is Chrome and Safari.
You can see exactly whats the problem and investigate the code in my localhost website -> http://www.demo.lollypop.gr/ffloor
I would like to avoid detecting chrome with PHP.
Just add position:absolute; in your body tag.
I am reverse engineering a previous employee's work and noticed a number of css classes look like this...
.img-shadow {
float:left;
background: url(../images/shadowAlpha.png) no-repeat bottom right !important;
background: url(../images/shadow.gif) no-repeat bottom right;
}
Can anybody think of a reason for a css class to declare background twice like this (specifically with the !important)?
According to wikipedia, the second background rule is for IE6.
Internet Explorer 6 and below also
have a problem with !important
declarations when the same property of
the same element has another value
specified within the same code block,
without another !important
declaration. This should result in the
second value being overridden by the
first, but IE6 and lower do not honor
this.
It's a cheap PNG fix for IE6. Since IE6 won't recognize the !important tag, it will use the GIF background, while all other browsers will use the PNG.
Older versions of IE will use the last one.
These versions had problems with png transparency.
looks like he's attempting to support browsers that don't handle alpha .png's properly (cough IE6 cough)