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.
Related
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 created an image with some links on top of it here. It works as it should in Google Chrome and Firefox but not in Internet Explorer 8. Does anybody know how/whether I could fix that?
For some obscure reason, IE sometimes "doesn't like" completely transparent areas of absolutely positioned links. Setting any explicit background to them other than default transparent none (background: url(about:blank) "hack" usually does the trick) seems to make IE treat them correctly. In IE9+, background:rgba(0,0,0,0) also seems to do the trick (although it should be just the same as transparent per CSS spec).
You might need to specify the z-index of the image to ensure it appears behind the links in IE8.
i dont have your code but i think this may help you. try this class:
.dict {
position: relative;
margin-top: -138px;
float: left;
display: block;
height: 116px;
On the links there should be a z-index value for start, in IE(6-7-8), z-index is only working when the parent element also has a z-index value:
.dict {
display: block;
height: 116px;
position: absolute;
top: 79px;
z-index: 2;
}
<div style="position:relative;width:860px;height:200px;z-index:1;">
I still don't know why it's not working. But the problem is solved (even for ie8) by removing the img from the html and using it as a background with CSS.
My site design requires a background image running across the top of the page. You can see what it is supposed to look like in this screenshot. Link to my site.
Unfortunately, I used Firefox to check my work while putting this together. I used FireFox, because it has Firebug. The site looks right in Firefox, but wrong in Safari, Chrome, and IE. In Safari, Chrome, and IE, the background body wrapper background image is below the menu. Example screenshot where background at top is wrong.
Is there an easy fix to the background image, so it will work in all browsers, or do I have to take a few steps backward to fix some basic problems in my markup?
The margin on #nav is collapsing (https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing) because its parent (#wrapper) has no top margin, padding, or border to contain it. A quick-and-dirty fix for your problem would be to add padding-top: 1px; to your #wrapper CSS.
Change the margin property of #nav and add padding to #wrapper equal to the height of your background image.
#nav {
margin: 0 auto;
}
#wrapper {
padding-top: 85px;
}
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 just starting to build a website, and am just fleshing out the css.
Two problems:
I'm using rgba to get a transparent background, and using a transparent png to emulate this in older browsers. I'm using a cascade like this:
rule {
background: url(/media/img/white_0.9_pixel.png);
background: rgba(255, 255, 255, 0.9);
}
In IE these backgrounds don't cover the whole of the sections they are applied to... Any ideas why?
The drop down menu is incorrectly placed in IE. I'm positioning it absolutely, but adding a margin to shove it into the right place in Webkit - guessing that's the wrong way to align a drop down, and it's not working across browsers. Any suggestions there?
Thanks a lot - just writing questions on here helps me to think!
A link to the site : http://bit.ly/11GGCx
Which IE versions exhibit the problems?
As with many IE bugs, try giving layout to the elements with improperly rendered backgrounds.
When you don't specify the "left" property of an absolutely positioned element, IE rarely generates the value you want. According to the CSS 2.1 spec, "left" should be set to the static position, but the browser can guess this position so it's best to be explicit. The standard method is to give the menu items relative positioning to create a containing block for each submenu and set "top" and "left" for the submenus.
.nav li {
position: relative;
/* note: don't set a box offset (e.g. "left") here */
}
.nav ul {
position: absolute;
top: 1em;
left: 0;
}
Did you specify background-repeat?
Have you tried with css opacity concept?
Try the below code.
rule {
background: #fff;
opacity: .5;
-moz-opacity: 0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* for IE8 *//* Comes First to apply optacity in all ie versions*/
filter: alpha(opacity=50); /* for IE5-7 *//* Comes second to apply opacity in all ie versions*/
}
Note: Don't change the order of above lines. Also i recommend not to use rgba background.
Try this. Hope this helps