I have this div :
<div id="trees"></div>
Formatted with this css:
#trees {
width: 100%;
position: absolute;
top: 37%;
height: 40%;
background: url("/img/Tree.png") repeat-x;
background-size: auto 100%;
}
It works fine in all the browsers I tested, with this result:
Except in IE/Edge, where it looks like this:
Trees with color glitches:
The weirdest part is that this issue does not affect any other divs with similarly configured background images like the train tracks or the mountains... I have search a lot on this and couldn't seem to find an answer anywhere. I also tried to convert the image from png to gif and I got the same result. How would I fix this for IE/Edge compatibility?
Here is a codepen reproducing the problem in Edge: https://codepen.io/darthmooguy/pen/gmNWwg
I was having the same issue as you, and whilst this doesn't resolve the cause of the issue, I've found that adding transparent padding to the edges of your image and increasing the background size is a usable workaround in many cases.
https://codepen.io/anon/pen/BRwxbR
Adding the following scaled my background, so set it to an appropriate level.
background-size: auto 250%;
background-position: center center;
Please ignore the colour change - I was also wondering if a specific colour triggered it based on your initial problem, but it did not.
I might look at this further as my workaround here does not actually solve my issue. :)
here is the tree image (png) saved from Irfanview (save with transparency, no compression)...I'm not sure if Irfanview has stripped the Adobe meta data though.
as you can see... the colors and transparency color is completely different from the adobe authored source.
I have made a script that uses pure css to toggle image, image caption and text. When I run this in IE8 I can all of the elements at once. The scripting for this is quite extensive so out of convenience I have made this JSFiddle. I need to hide the cascade-overlay-content and have tried to use overflow:hidden; and adding it changed nothing as I am still able to see all elements after adding it everywhere.
Try to add { position: relative; } to the parent element. Sometimes it helps in old IE versions, especially IE7. Besides, make sure the parent has { overflow: hidden; }.
Certain pages display terribly in IE generally, what is the best approach to solving these issues?
You forgot to add a doctype, so your page is in Quirks Mode.
Add this (the HTML5 doctype) as the very first line:
<!DOCTYPE html>
and it should look better.
Although, changing the Document Mode manually (using Developer Tools; hit F12), it still doesn't look right. There are evidently other problems with the page.
The most pertinent problem (after escaping Quirks Mode) is this:
<body style="margin: 0; padding; 0;background-color: 4DA2CA;">
Internet Explorer is not showing any background colour because you forgot the # before the colour. (And you have padding; 0, with a ; instead of :)
This will work:
<body style="margin: 0; padding: 0; background-color: #4DA2CA">
But you shouldn't be using inline styles in the first place..
This would be better:
<body>
with CSS in your stylesheet:
body {
margin: 0;
padding: 0;
background-color: #4DA2CA
}
you mean that in IE the Div's are smaller.Thats because in IE css border,margin are included in the width declared.So, if you have given a div width of 100px and a margin of 10px both sides then in IE the actual visible width of this div will be 100-10-10=80px.To solve the problem you can use child css decleration.
Considering our example if you want to show this div 100px width in both the browsers do the following
.mydiv{ /*This deceleration will be understood by all the browsers*/
margin:10px;
width:120px;
}
html>body .mydiv{ /*This deceleration will not be understood by IE browsers so other will override the width*/
width:100px;
}
Using this you can uniform the width of your Divs across both IE and non-ie browsers
Instead of pointing out the reason for each element's different way of rendering in IE, I would strongly recommend not re-inventing the wheel each time you create a new page element.
Even in modern standards-complaint browsers, CSS can be very unpredictable, so it's better to use bullet-proof snippets of code from trusted sources such as
CSS the Missing Manual
CSS the Definitive Guide
CSS Cookbook
Start out with working blocks of HTML/CSS and modify them to your liking and test cross-browser from there. The whole process will be much less frustrating.
Hi guys I have a problem of images showing background-color on IE6 and its supposed to be a transparent background. on all the other browsers it is showing fine except for IE6.
can anyone please tell me what am i doing wrong. tried the opacity to 0 but its still showing the background-color.
The fix is quite simple. No need to include any JavaScript. Define your css like this and include your image name in filter.
.whatever {
background: none; /* Hide the current background image so you can replace it with the filter*/
width: 500px; /* Must specify width */
height: 176px; /* Must specify height */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='vehicles.png');
}
IE6 doesn't support semi-transparent PNGs. Try something like this for a work-around if you really need to:
http://css-tricks.com/snippets/css/png-hack-for-ie-6/
or http://www.jay-han.com/2008/10/15/unit-png-fix-best-ie-png-hack/
Or just drop IE6, it's way behind all other browsers, and fast losing market.
IE6 doesn't support transparent PNGs properly.
This page has a fix which involves a behaviour file. Alternatively you could use GIFs.
How can I hide the div without using display:none or JavaScript?
In my country, a lot of Blackberrys come with the CSS support disabled (the mobile companies here are not so good to developers). I have text that says
<div class="BBwarn">
please activate your css support and a link
</div>
I want to hide that once the user activates CSS support, but i can't use display:none; because it is only supported in BB firmware 4.6. It is a public site and I can't make all my visitors upgrade.
Does anybody knows a solution to this? I hope the question is easier to understand now.
Update:
Thank you all for the answers but I can't use
position:absolute
overflow
because they are available from Blackberry firmware 4.6 and up
things to try:
use the z-index to put it behind some other element
move it off the screen by absolute positioning
visbility: hidden
make the content "invisible" by setting background to foreground color (works only for text)
opacity: 0
but the real question is: why?
This is a common way:
margin-left: -9999;
How about:
visibility: hidden;
That should hide the DIV, (note how it will still be rendered but be invisible, that means it will take space in the document as if it was visible, but be invisible (unlike display:none; where the div will not be rendered)).
<div style="height:0;width:0;overflow:hidden;">
<!-- content here -->
</div>
Incidentally, this is what I do to preload images, which is nice because it doesn't use javascript.
Visibility:hidden won't do the same thing because some browsers are smart and won't make the request unless it thinks its actually visible.
Why not try the simple:
position: absolute;
left: -1000px;
I can't see why it wouldn't work.
I'm not sure of the percentages you're talking about that are using < 4.6, but if it's that important to you, then I can see a rationale for accepting that you can't please all the people all the time, and an acceptable cascading solution to this should be achievable. Probably with a link to explain the benefits of upgrading and enabling css.
height: 0;
overflow: hidden;
visibility: hidden;
color: #fff;
background: #fff;
BTW - you'd better make sure that you're css is good if you're telling someone to turn it on... :-)
What makes you think display: none is not supported before version 4.6? Did you test that, or are you going by their documentation?
I'm not a mobile developer either, so I'm just going by what I gleaned from the documentation.
The BlackBerry Browser 4.6 CSS Reference indeed mentions "Availability: BlackBerry® Device Software version 4.6 or later" for the display property, but their BlackBerry Browser 4.3 Content Developer Guide indicates that 4.3 already supported a very limited version of the display property, including display: none. Versions before 4.3 don't support the display property (again, going by the BlackBerry Browser developer documentation).
Can you assume your users do at least have firmware version 4.3, or is that just as unacceptable as assuming they have 4.6?
Have you tried simply setting the width and height to zero? I'm not familiar with the BlackBerry (Browser), but I'm sceptically assuming its CSS support is less than perfect, certainly on the older versions. I wouldn't be surprised if this worked:
.BBwarn {
display: none; /* for 4.6 and up */
width: 0px; /* for 4.3 */
height: 0px;
}
But then width and height are only supported on all elements starting from version 4.3. Before that they could only be applied to <button> and <img> tags and some <input> types (according to the documentation).
So perhaps the safest way to really make it work on all BlackBerry firmware versions is to use an image for the warning, and use CSS to set its width and height to zero.
If an image is not an option (due to lozalization issues or so, perhaps), an ugly hack might be to specify an empty/illegal image source and put the warning text in the alt attribute. I don't know if setting its width and height to zero would still hide that alt text then.
visibility: hidden; will work, but the space taken up by that particular div will still appear. If you are going to use the negative left-margin method, remember that you will need to set the object's position to absolute.
How about this:
clip: rect(0,0,0,0);
Note: Please note the clip property does not work if "overflow:visible" is used.
In your case:
<div class="BBwarn">
please activate your css support and a link
</div>
just add this css:
.BBwarn{
position: absolute;
clip: rect(0,0,0,0);
}
You could position it absolutely off the screen.
But I, also, am not a mobile developer.
I assume You don't want to use JavaScript because the Blackberrys don't support it.
What about if you did the opposite and displayed the block of code with JavaScript, rather than tried to hide it?
<script type="text/javascript"><!--
document.open();
document.writeln('<div class="BBwarn">');
document.writeln('please activate your css support and a link');
document.writeln('</div>');
document.close();
//--></script>
This is a bit of a hack, but would not display the text with disabled JavaScript...
You can do something like wise:
.class{
opacity:0; overflow:hidden; visibility: hidden; height:0;
}
for being more precise you can add :
color:transparent; background-color:transparent;
What exactly is wrong with (the earlier mentioned)
width: 0
height:0
visibility: hidden
width: 0 height:0 visibility: hidden
...Does not always work with firmware 2.2 and older. Sometimes you can get an element to be hidden, but it will reappear with certain keystrokes (like underscore, for instance).
Or you could use Please enable Javascript
And use an image that reads "Enable CSS" and style it using "display:none".
So that whenever the corresponding feature is enabled these warnings wont show.
Alternately, I presume you are using some server side code? You could try detecting for the most common known platforms that support specific versions of css/javascript and deliver content accordingly. You might not even have to write it all yourself.
I had a similar problem when I was trying to customize a select box using javascript in BlackBerry Curve 8530 (OS 5.0). But, the menu created couldn't be hidden because the css following properties still don't work:
display
overflow
position: absolute
visibility
z-index
And destroying and recreating the HTML elements didn't work either, so I got here and could solve my problem.
I know my answer isn't exactly about the question raised here, but once I got here when had problems, I think I'm not the only one with it happened and is going to.
Anyway, even if those css properties worked, what I needed was some code that could work on the most of the BB models.
My solution was made using all the answers found here. It was simple. I made two classes:
.element
{
width: 100px;
height: 100px;
font-size: 12px;
color: black;
background-color: transparent;
border: 1px solid black;
}
.element_hidden
{
width: 0px;
height: 0px;
font-size: 0px;
color: white;
background-color: white;
border: none;
}
Yes. I've made two of them for each kind of element I had in my page.
Initially, all classes are set to class="element_hidden", so when the mouse is over the select box menu, all the classes are changed to class="element" and they are shown and hidden as if they were made invisible/visible.
I hope this can be useful to someone! ;D
We can use the transform property to scale the element along the x and y axis.
. BBwarn{
transform : scale(0,0);
}
I used font size to obtain this without using display none
font-size: 0px;
As you said in question that you need solution for Blackberry version below 4.6 and there are very few CSS properties supported for Blackberry version below 4.6 so we can use some sort of hack for this purpose. Try and set the text color to whatever the background is or set font-size to 0. It's a hack, but it makes it invisible. Run the following snippet and let me know if its works for you.
.alert1 {
color: #fff; //3.8 or later
}
.alert2 {
font-size: 0; //3.8 or later
}
<b>Alert1</b>
<div class="alert1">
please activate your css support and a link
</div>
<b>Alert2</b>
<div class="alert2">
please activate your css support and a link
</div>