I have built a module for galleries, here you have 2 examples, at the bottom of the page:
http://www.we-do.com/referenzen/watch-your-web/
As you see, in modern borwsers, clicking anywhere in the box will open the lightbox, but in IE 7 and 8 has completely different behaviours. How could I normalize it?
Here is the dirty hack for IE7 and IE8,
CSS
/* IE Fixes */
html.ie7 .gallery-links, html.ie8 .gallery-links {
background: url("http://triggertek.com/r/transparent_png/pixel.png") repeat;
} // i used 1px transparent png to solve it.
Related
Is ::moz-selection still required to change the text selection colour for Firefox? I've read a few articles who give the code below in order to change the text selection colour in my wordpress website.
/* MP highlight text red */
/* For FireFox */
**::-moz-selection** {
background-color: #50BAEE;
color: #fff;
}
/* For everyone else */
::selection {
background-color: #E53333;
color: #fff;
}
I simulated the code above on browserling.com for Firefox. The colour selection was RED (not blue) in the browser.
FIREFOX TEST RESULTS: https://browserling.com/b/941baebc
Do I still need to use ::moz-selection ?
::selection and ::-moz-selection are CSS psuedo-elements, which means their behavior depends on the browsers themselves independently of Wordpress, (unless Wordpress is somehow mangling your input files, but I have never heard of them doing such a thing.)
You can read more about them on this page, which contains the following information in the Syntax section:
/* Legacy Firefox syntax (version 61 and below) */
::-moz-selection
::selection
So whether you need ::-moz-selection depends on how much you care about what users of Firefox version 61 and below see. You can see more information about browser support and usage numbers here as well.
I am working on a web design that uses Bootstrap and so I'm customizing the Bootstrap framework.
I have designed an element that because of lack of support for transitions in IE9, lack of support for some features like opacity and some others in IE8 and lack of support for box-sizing, correct position:absolute positioning and other problem, I need a way to differentiate between IE versions right from CSS style sheets, because I'm customizing the Bootstrap framework, I prefer a single complete .css framework file so, here is the question:
How do I differentiate between IE versions 6 to 10 using IE CSS Hacks on a single CSS role?
I hI was dealing with IE and needed to target every particular version separately and after some testing came up with this css:
body {
background-color:#0099CC; /* For Other standard browsers */
background-color: #FFFF00\9; /* For IE9 (Note: There is "NO" space before \9) */
background-color: #00E300 \9; /* For IE8 (Note: There is "ONE" space before \9) */
*background-color: #FF9900; /* For IE7 */
_background-color: #FF0000; /* For IE6 */
}
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
body{
background-color:#FF99CC; /* For IE10 */
}
}
These codes make IE 6 to 10 show different colors for body background.
I used IE 10.0.9200.16384's "Browser Modes" for testing the IE 7 to 10 and "IETester" program for IE 6 testing and they worked like a charm.
Shared my experience here for your use and if you tested them and had successful or unsuccessful results please submit your experience here to share with others.
Thanks.
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)
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!
Using CSS for creating gradients instead of images, does it have any negativity?
For example the following code:
#gradient {
color: #fff;
height: 100px;
padding: 10px;
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #00f, #fff);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";
}
Thanks.
Gradients are not standardized yet and many browsers do not suport it, in your exemple -moz-linear-gradient works in firefox 3.6 but on older version doesn't. If your site is for public purposes, many people won't see you gradients, so you could check what version of browser they use, and use gradients or images based on that. I use gradients on an intranet site (where I can force users to use a specific browser), If the browser if not Firefox 3.6 or greater, the site will show just a message that tells the user to upgrade, but this is not a good way if you go public.
So i choose negative for public sites. :)
As you've illustrated in your example, there's no one way to do it that works in all commonly used browsers at the moment. I would consider that a "negative" for maintenance and code readability purposes.
A bit of constructive criticism: the word you're looking for is "instead", not "instant".
CSS gradients are used on many large websites using the fallbacks you are using. I would add PIE.htc as well. If you do use PIE remember that it needs to be absolutely or relatively positioned to show up.
If you have to support really old browsers the best way is to give them a fallback solid background-color.
To be it it silly to expect old browsers to display gradients at all. If you absolutely have to you can set up a conditionally loaded stylesheet:
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="http://mysite/css/ie7_hacks.css" /><![endif]-->
In there you can declare a repeating image-based gradient. Just like how it used to be done before CSS3.
By doing it this way you are making your site a little faster for modern web browsers.