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
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.
I am using a div tag and I am applying css to it.
Please find below the div tag
<div class="testcss">
</div>
My css class is as follows
.testcss
{
background-image: url('images/imag2.gif');
background-repeat: repeat-y;
background-position: bottom-left;
padding-left: 10px;
padding-right: 10px;
}
The div is showing background image and displaying properly in Mozilla other browsers but it is not working in IE8 and IE9.
Even it is working fine in IE10.
There is some issue with background-repeat: repeat-y not working properly in IE8 and IE9.
Is there some way that we can fix this in IE8 and IE9.
Any help would be greatly appreciated.
Thanks in Advance.
Regards,
Rahul Rathi
I believe your syntax is wrong, and no.. it should work in IE8 and IE9 ... try:
.testcss {
background: url('images/imag2.gif') bottom left repeat-y;
padding-left: 10px;
padding-right: 10px;
}
http://jsfiddle.net/feitla/85XFu/
PS - tested in IE9... background repeated just fine. Make sure your div actually has a set height/width if it is empty.
I agree with #feitla on the fact that your syntax is wrong. You can't use bottom-left as it doesn't exist in the background property for CSS.
I also agree that you should simply use background: url('images/imag2.gif') left repeat-y as the bottom is not needed because it's already repeating in the Y axis and spanning all the height of the container.
Last but not least, you do have to set a width and a height to your element if it's empty (as in with no other markup) because otherwise you would only be able to see 20 pixels in width because of your padding left and right.
I think that the lesson to take from this is that it's safer to use shorthand styles as it makes your code cleaner and easier to read.
You would end up with:
HTML
<div class="testcss"></div>
CSS
.testcss {
background: url('images/imag2.gif') repeat-y left;
padding: 0 10px;
}
Read more about how to use shorthand code as it makes writing CSS a lot cleaner and more fun... and it's not as hard as it may seem, here's a link to this specific issue and shorthand css for background.
I have a container div with more divs inside for a slideshow effect. "The container" div is over body's the background image.
CSS for the body:
body { background: #333 url(images/bg.jpg) repeat-x top; }
Problem is in IE7 the container div has a background color #333. Firefox shows up properly as clear.
Here is the CSS for the container div:
.cntdiv {
width:100%;
display:block;
margin:0 auto;
margin-top:15px;
overflow:hidden;
}
Any idea why it's picking up the body color and not the image? Again, it works right in Firefox.
IE7 does indeed support URLs for backgrounds. You are correct in saying that it does not support Data URLs, but this is not a Data URL. A Data URL is CSS looks similar to:
url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7) .
Note the use of the keyword "data:". The key here is that the data IS the String... not a file.
There are some little catches, however. First, the URL must be in quotes, as in:
body { background: #333 url("images/bg.jpg") repeat-x top; }
IE does, however, interpret the background short syntax differently, so I have found that expanding the syntax helps immensely with IE pre 8 bugs.
body { background-color: #333; background-image:url("images/bg.jpg");
background:repeat-x; background-position:top;
}
Finally, your container div must be explicitly defined with a background color:
.cntdiv {
width:100%;
display:block;
margin:0 auto;
margin-top:15px;
overflow:hidden;
/* This is the line that will do it */
background:transparent;
/* OR EVEN */
background-color:transparent;
}
This code is tested and runs correctly in IE7 and has the same behavior in the others as well. Judicious use of "transparent" is awesome.
It also must be understood that the issue you are facing is not a bug, but a user agent CSS style. This is according to the W3C standards unlike the other div bugs that IE has (such as poor :hover support). Because you didn't define a background for your div, the User Agent (IE7) is allowed to do whatever it likes. This is true of all HTML Elements and all browsers. It is why buttons look a certain way unless you change it with the CSS. Explicit definition of every aspect is the best way to overcome little snafus such as these.
Hope this helps,
FuzzicalLogic
The reason it doesn't work in IE7 is because you are using a data URL, and IE7 does not support them. Evidenced by:
http://www.caniuse.com/#search=Data%20url
For IE7 you'll have to use conditional comments and adjust the way you reference the background image. Here's a quick and simple intro to conditional comments if you don't know about them yet:
http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/
Ok, I found the problem. I was using the jquery.cycle plugin to rotate the divs into view. Somehow IE7 didn't like it. I tried a different jquery plugin and it works perfectly.
Thanks for your suggestions.
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.
I'm attempting to use a CSS gradient in a div containing some text. With Gecko and Webkit, the text displays fine. In IE7 & IE8 the text appears aliased (jaggy).
I came across this blog stating: "we decided to disable ClearType on elements that use any DXTransform".
IE Blog:
http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx
That was back in 2006; 3.5 years later, I assume this bug would be fixed, but it's not. Is there a way to do this in IE8 without resorting to stuffing a repeating background image in the div?
Here's an example of what I mean.
<style>
div
{ height: 50px;
background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd);
}
</style>
<div>Hello World</div>
<p>Normal text</p>
In IE, the text in the div is aliased (jaggy), and the text in the paragraph is not.
Any solution that doesn't involve images would be greatly appreciated.
There's no good solution to this problem.
Worse yet: progid:DXImageTransform.Microsoft.gradient is horribly buggy so mouse events (hover, click, etc.) pass right trough it - a click on such an element also triggers a seperate click on whichever element that happens to be positions behind it. Beware!
Regardless, you better start considering which fallbacks/workarounds/NastyHacks feel acceptable to you.
Here are a few ideas off the top of my mind - in order of my personal preference:
Just fall-back to a plain solid background-color in IE and move on with your life. (Be sure to place that background rule first for it to be safely overridden/ignored by FF and Webkit.)
Use a background-image in IE. (Again place that CSS rule at first)
Keep using the gradient hack and simply 'suck it up' and accept the jaggy text for IE.
use Javascript (or IE's proprietary CSS expression() syntax) to inject an empty element, apply the gradient to it and place it behind the text.
div {
background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
behaviour: expression( jQuery(this).wrapInner('<div class="ie-wrap"/>').prepend('<div class="ie-gradient"/>'); this.runtimeStyle.behaviour='none'); /* disable repeat runs */
position: relative;
}
div div.ie-wrap {
position: relative;
}
div div.ie-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: expression( this.runtimeStyle.height=this.parentNode.clientHeight+"px" );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd);
}
(Warning: above code is untested pile of crap. and will probably not work as is.)
Keep using the gradient hack and use Cufon to replace the jaggy text with VML rendered text. (Rests on the assumption that your site is using a typeface that allows font-embedding.)
You could try using an IE css 3 html component, like PIE (http://css3pie.com,) which does a fairly decent job of rendering gradients. (Though this is essentially using javascript)
Wrap the content with a DIV then add this to the DIV's css style...
position: relative;
http://cookbooks.adobe.com/post_IE8_clearType_fix_when_using_filters-16676.html
I had a situation where I wanted backgrounds of text areas to be certain colours fading horizontally to white and defined by hexadecimal in the CSS. I wanted to avoid making colour background images in case a non-developer member of my company wanted to add a new colour with hexadecimal only.
The solution I found was to make a 24-bit PNG of white gradienting into transparent set to the width of the area I was making.
I then used this IE-only hack to get the CSS to render a background colour of my choice that fades to white:
background /*\**/: #CCCED4 url('/white_to_transparent.png') repeat-y top left\9;
(the hack could be improved, but it works for me, including IE9)
I found another inexpensive (bit opaque) solution. The text becomes anti-alised back again, when wrapping the text node and setting each element to relative position. Do not ask why...
Lets assume:
<html>
<head>
<title>IE8 filter problem causing jagged fonts</title>
<style>
html, body, div, span, b, i, ul, li, h1, h2, h3 ... to be continued {
position: relative;
}
.gradient {
filter:
progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#e6e6e6');
}
</style>
</head>
<body>
<div class="gradient">
<div>I am wrapped, therefore not jagged</div>
</div>
</body>
</html>
Hope that helps anyone out there. In this case it's not necessary to use background images or derivates.
Working example in jsfiddle: http://jsfiddle.net/SLZpE/2/
This may not count as elegant (or working) solution, but how about using Cufón for IE?
Yes, that's a problem with IEx.
Try using a solid background color:
/*replace #ccc with the color you want*/
background: url(images/gradient-image.png) top repeat-x #ccc
Now, no need to use the expression "...stuffing a repeating background image", since there's nothing wrong with using a background image and repeat it, we should be thankful that we can not only do that, but we can repeat it in X and Y.
Of course, you want to make your repeating background image as efficient as possible, so make it small/thin (depending on your design) and use it, rest assured, you are not doing anything wrong or against any standards or best practices.