I have a problem with this website: http://paulverhaeghe.psychoanalysis.be
In every browser the menu displays as expected, but the menu is not visible in ie8 on WindowsXP. I have already changed z-index but no difference.
I've looked a thousand times, but can't find anything. Maybe you have a more clear vision.
Every help is welcome!
Thanks in advance.
Greetings,
Tim
Ok, I solved it. Really stupid. One of my divs was placed in an other style-sheet (skin.css used for a javascript carousel) (dreamweaver sometimes uses an other style-sheet when working in designmodus). Probably ie8 didn't pick this line of code up: "display: block; position: absolute;". Another example of the importance of "clean coding" :).
Douglas, thanks for your help!
I think I may have an idea after viewing in a few different browsers.
I noticed in your css that you used 'opacity'. This is not a cross browser solution.
IE compatibility note
If you want opacity to work in all IE versions, the order should be:
.opaque {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first!
filter: alpha(opacity=50); // second!
}
From: http://www.quirksmode.org/css/opacity.html
some other things to try also:
.opaque1 { // for all other browsers
opacity: .5;
}
.opaque2 { // for IE5-7
filter: alpha(opacity=50);
}
.opaque3 { // for IE8
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
Related
I'm currently redesigning one of my sites. I using the CSS blur filter:
.blur {
blur(5px);
-webkit-filter: blur(5px);
}
and some CSS animation
.animate-blur {
transition: 0.45s all ease-out;
}
to animate the turn on and off these blur styles.
The turning is done by this script:
jQuery(function(){
jQuery("article").hover(function(){
jQuery("article").not(this).addClass("blur");
},function(){
jQuery("article").removeClass("blur");
})
jQuery(".sitename").hover(function(){
jQuery("article").addClass("blur");
jQuery("#background-top,#background-bottom").removeClass("blur");
},function(){
jQuery("article").removeClass("blur");
jQuery("#background-top,#background-bottom").addClass("blur");
})
});
That worked all well until I upgraded to Mavericks and the new Safari. Now sometimes the articles completely disappear or there is a strange shadow behind the text.
So my question is. (Can you reproduce this? And...) Does anybody know if I can fix this?
As StopLogic mentioned, the will-change CSS property fixes this bug. Use will-change: filter on the blurred element.
In addition to the solutions proposed by the author, the css property "will-change" can help you. It allows you to attract additional system resources to play the animation.
I resolved my problem, although I'm not quite sure how I did. I made some changes to the mark up (I'm not sure which of these solved the problem):
no longer using the bootstrap grid, now no position style is applied to the parent div
added overflow: hidden; to the parent div
removed a clearfix out of the affected divs
floating the sidebar (even I don't think this is relevant)
...in the hope this will probably help somebody.
I'm trying to have our Wordpress blog display a little better in IE8 and below (it works great in IE9, Firefox & Chrome). A big issue seems to be IE8's lack of support for negative margins, so the gap which we have between the posts column and the side widgets is non-existent in IE8.
URL: http://trekcore.com/blog
The CSS controlling that separation is here:
#secondary {
float:right;
width:300px;
margin-right:-320px;
}
Any help on suggestions for conditional CSS to fix this in IE8 and under would be most appreciated!
you should validate your html markups, 35 Errors and 11 warnings wont help.
in the meanwhile, try this fix :
.negative-margin-element {
zoom: 1; /* ie hax*/
position: relative; /* ie forced behavious*/
}
You are using HTML5 elements and IE8 does not understand them and will ignore them and you can't apply CSS to them because IE8 won't know they exist. To fix IE, you need to add the html5shiv. This will add those elements to IE8's DOM tree and set them to block level.
You can write your own code and CSS to do the same thing but the shiv is convenient.
Related to this question, I have set up some jquery to pop-up a new div over an existing div. Whilst this works brilliantly in every other browser, the IE family refuse to behave nicely. With the following filters removed it works quickly (incorrectly, but quickly), whereas with the filters it takes a long time for the new div to appear / disappear. If left for long enough IE (6-8) will run through the jquery in order (i.e. it appears to be caching the creation/destruction of the new divs then replays them).
What do I need to do to get IE to act correctly and quickly?
The filters I am trying to use:
.newDiv
{
opacity: 0; /*Every other browser*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /*IE8*/
filter: alpha(opacity=0); /*IE5-7*/
}
.newDiv:hover
{
opacity: 1; /*Every other browser*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*IE8*/
filter: alpha(opacity=100); /*IE5-7*/
}
I would just jquery to set the opacity, you might have better luck and its one line compared to 3:
$('.newDiv').css('opacity','0');
In the end I used
.newDiv
{
visibility:hidden;
}
.newDiv:hover
{
visibility:visible;
}
This worked across all browsers except IE<=6 (cannot use :hover on anything but an anchor).
The title sums it up. I'll get this out of the way and say I am aware that css hacks are dirty ugly horrible things. Sometimes dirty problems call for dirty solutions though :)
So does anyone know of a css selector hack that works for recent safari versions but is not a general webkit hack ? My site behaves properly in chrome but has a bug in safari. So if anyone knows how i can select an element to only have a certain style in safari let me know!
What I'd do, is sniff the user agent of the browser with javascript, and add a class to the <body> element, based on that. That way you don't have to rely on any kind of hack, you just write your selectors based on the class:
.safari .misbehaving-div {
}
I believe there is already a JS framework that does exactly this, but I don't remember the name.
Ended up using this:
http://rafael.adm.br/css_browser_selector/
This works perfectly
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.myClass{
background: red;
}
/* Safari only override */
::i-block-chrome,.myClass{
background: green;
}
}
background-color:transparent doesnt work on SELECTs in browsers other than FireFox.
So how I specify background-color:transparent for FF alone and background-color:#something for others ?
Did you try to apply the cross-browser setting first and the firefox specific setting afterwards?
select {
background-color: #fff;
background-color: transparent;
}
Find a simple example that is also working fine in Internet Explorer 8 and in Chrome 4 here: http://jsfiddle.net/b6hWu/
Check out this page:
CSS Browser selector.
I use it and works wonders for selecting browsers right in the Stylesheet.
Hope it helps :)