I'm attempting to fix my CSS to allow older IE's to view my web site as best as possible.
I'm using 'border-radius' to style form fields giving them rounded corners. For the older IE's I'm using the background image below--
http://studio.allanbendy.com/sites/all/themes/studio_allanbendy_7/i/form-textfield-bg.gif
.form-textfield {
background: url("/i/form-textfield-bg.gif") no-repeat bottom right;
background-attachment: fixed;
height: 15px;
width: 362px;
}
Unfortunately the CSS above does not seem to style the text field on IE 7 and 8. It works just fine on IE 6.
Any suggestions?
Remove the background-attachment: fixed;. Because IE6 ignores this for non scrollable elements it's displayed there. But at all the attachment definition makes no sense, if you want to style a single element.
Instead of an IE-specific graphic, I'd recommend using CSS3Pie to do rounded corners in IE.
It's a great solution to get IE to support standard CSS border-radius style.
Related
I'm currently testing out css for img tag. On chrome it look good but when I viewed it in firefox, the last image is stretched out. I'm not sure what's wrong. Below is my jsfiddle in which you can see the difference when you view it in Chrome and Firefox.
.thumbContainer img{
margin: 0 auto;
max-width:100%;
max-height:100%;
object-position: 50% 50%;
object-fit: fill !important;
}
This happens, because you are using browser-specific CSS properties like -moz-box or -webkit-box, which are not officially supported. This can cause different behavior in different browsers, becauseit's up to the browser to decide how to display such elements, and for Firefox, the "correct" behavior is, to strech it, while for chrome its correct to fit in its parent. My general advice is: Avoid styling with prefixed CSS properties, unless it is absolutely necessary to enable standard CSS functionality in older browsers. Maybe there is another approach for your problem with flexbox.
So this morning I got an automatic update to IE 11, after checking my eyes it appears that some of my background images are blurry.
I had to check that it was not my image causing the problem, so after firing up Chrome, they were nice and crisp again...
I am completely baffled.
I've now uninstalled the IE11 update and they are once again nice and crisp in IE10... Has anyone else encountered this?
I've included a screen shot showing the images in the different browsers.
Here is a link to a jsfiddle, I don't have IE11 any longer to test but its the same markup and CSS that I am using: http://jsfiddle.net/3g52E/
Well i can see what is causing this problem. It's the border-radius of your ._ui.
Now i can't tell you why this happens. However if you want to fix this you can or don't use border-radius or, which is a better solution i my opinion, use the <img> tag to generate the background.
Use image element
<img src="http://i.imgur.com/DauuVHW.png" />
Now to cut-off your image you can just use position: relative;, position: absolute; and a overflow: hidden;:
.block1 > div
{
position: relative;
overflow: hidden;
}
This will add the properties on ._ui _bre and ._ui _com.
Where the basic image properties are:
img
{
position: absolute;
left: 2px;
}
Now you can just use the top and bottom offset for the the image positioning. Where as you used background-position before:
._bre._ui img
{
top: -68px;
}
._com._ui img
{
top: -24px;
}
This way your image is not a part of the element which has border-radius anymore, which caused this problem. They have a more clear seperation now; 2 different elements.
jsFiddle
There is probably more elegant way to fix blurry images in IE 11.
In our app we have icons on buttons with round corners. Removing round corners or using <img> for icons were not options.
However, what worked for us was "classic" images optimization for retina displays, i.e. saving button background images with twice larger resolution and then specifying original size in background-size.
Looks great in IE 11 and on retina displays.
According to this:How to write a CSS hack for IE 11?
I added this code to my CSS:
#media all and (-ms-high-contrast:none){
*::-ms-backdrop, .my_elements_with_border_radius { border-radius: 0 }
}
With this browser hack the borders are not round anymore in IE11 but at least the background images are not blurry anymore. In any other browsers they are still round.
I think most of us know about this annoying bug in IE7 where the background image of a text input will scroll if the text entered is longer than the width of the text input.
Numerous questions have been asked and blogged.
Those questions and post all require one to wrap a div around the text input. This is something that I cannot do as I am working with markup generated by a CMS.
However, I would like to gracefully degrade the experience. For IE7 and below, I am happy with not displaying the background image and just displaying a color.
This is the css being used:
form input[type="text"], form input[type="password"]{
background-image: url('bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
padding-left: 4px;
padding-right: 4px;
width: 100%;
height: 30px;
border: #008296 1px solid;
}
I have tried adding background-attachment: fixed but the background-image ceases to be shown in all versions of IE, firefox and chrome! Since I only want this behaviour for IE7 and below, how can I go about doing this besides creating an IE7 only stylesheet?
You could always use an IE7 specific CSS selector filter to override your desired styles for IE7.
To make a class that applies only to IE7, simply put *:first-child+html in front of your classname.
Another option is to declare CSS rules that are specific to IE (aka IE CSS hacks). This would involve putting an asterisk (*) before the attribute that is only to apply for IE7 and below. This isn't as highly regarded though since it is not valid CSS syntax.
You may find this site interesting for dealing with IE and CSS hacks: http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml
I'm using SVG images as background images. My CSS looks like this:
background:url('image.svg');
The problem is that they don't appear on IE8 or earlier.
Is there any way to make this work? Or perhaps specify a fallback only for IE? (I don't want to replace them with gifs for other browsers.)
Live example: HERE
I had the same problem and used this solution. For this to work you need to have a svg and png copy of image. Than write css like this:
.twitter-logo {
width: 200px;
height: 200px;
background: url(http://cl.ly/D4xT/twitter_newbird_blue.png) no-repeat center center;
background: rgba(0,0,0,0) url(http://cl.ly/D4o5/twitter_newbird_blue.svg) no-repeat center center;
}
The trick is that IE8 doesn't support rgba, and because of that IE8 ignores second background definition.
According to svg support in other browsers, you will still have issue with Android Browser 2.3- and Firefox 3.6 because they support rgba and don't support svg.
Here is jsfiddle example as well.
There's no way I know of to make IE8 use SVG as a background image. You have two real options if IE8 support is important to you:
Provide a PNG fallback for IE8 and other browsers which don't support SVG in a background
Place the SVG in your page instead of the background, position it behind everything else with CSS, then use something like SVG Web to provide support in IE8
I have a problem with the IE (what else?):
I generate content with CSS which has also a background-image.
I looks like that:
#nav ul li:after {
content: "--";
position: relative;
z-index: 99;
background: transparent url(image.png);
color: transparent;
}
The text color is in non-IE-browsers transparent, but in all IE browsers (IE6-IE8) it's black and you could see it.
How could I make the text transparent/unvisible?
I tried already: visibility - opacity - filter - text-indent ...
But none did his job right, either it disappears (with it background which I need) or the attribute doesn't apply.
if what you're trying to do is show the image as background and not showing the text use
font-size:0px
it works!
what about using line-height
line-height:0;
it worked in my case.
I get it: With the correct padding and a zero font-size! Set the padding-left value to be one pixel beyond the image width.
If this doesn't work in Internet Explorer 8
font-size: 0;
make sure you're using a valid doctype:
<!DOCTYPE html>
This should work. If it doesn't add display: block or inline-block
.transparent {
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
}
I think no versions of IE support color: transparent
Perhaps you could try to do it with jQuery or something like that.
I assume you already fixed this, but lately i've used a very large line-height, when text-indent is giving me layout problems, combined with overflow: hidden to hide the text.
IE doesn't support li:after consistently. Which IE are you talking about? IE6? IE7? Both?
For me color:transparent was not working in IE8, and it was showing text with default color. I used visibility:hidden; for IE8 only as the text was not required to display.
Hope this help in case, if the element is not required to display.
I see you're using a PNG as your background image. Normally, if you're using IE 6, there is a fix for PNG transparency (http://www.twinhelix.com/css/iepngfix/). Even so, this will not work with background-images. So if you're using IE 6, there really isn't a fix.