I've found a strange bug in Internet Explorer 8. Maybe someone can help me move around it.
When I try to grab the background position of an element, using background-position-x all versions of Internet Explorer work as excepted except for IE8 that crashes.
When I run el.getStyle('background-position') all browsers give me the correct values except from IE (6, 7 and 8) that return undefined.
I therefore use el.getStyle('background-position-x') for all IE versions.
IE8, however, crashes on the above code.
Anyone had similar problems?
Thanks for the help everyone. This really is a bug and works only on the following scenario.
css must be loaded on an external stylesheet
element has no inline styling
The way to fix it, even tough dirty, is to add inline styling to the element. Makes IE8 happy and all other browsers work.
I did not test but, according to this ticket, FF2 also suffers from the same behavior.
Side notes:
#marcgg - I was going to downvote your answer as it really is not helpful (and bound to start a flame war) but, all truth said, jQuery does not manifest this problem. Even though, as you probably already knew, it is NOT an option! ;)
#Fabien - IE does support background-position-x and lacks support for background-position the W3C approved construction.
Why not use jquery's css function that works fine crossbrowser ?
Try using:
el.getStyle('backgroundPositionX')
and
el.getStyle('backgroundPositionX')
yes, older thread, but figured I'd post another solution that I bumped into # mootools lighthouse....
if (Browser.Engine.trident){
var xy = el.getStyle('background-position-x')+" "+el.getStyle('background-position-y');
} else {
var xy = el.getStyle("backgroundPosition");
}
works well for me so far.
Related
Having a bit of an issue in IE (aren't we all).
I've tracked down an problem I'm having to a recursive script that updates a tweets timestamp.
The script works fine, discovering all the date/time stamps to be updated, converts them fine but when it comes to updating the 'time' div it fails. IE doesn't have an issue with $('#id').text('value') but I'm obviously doing somehthing wrong.
Any ideas?
function parseTwitterDate() {
var timeToAdjust
$('a[data-scribe="element:full_timestamp"]').each(function() {
timeToAdjust = $(this).find('time')
var b = timeToAdjust.attr('datetime').split(/[-t:+]/ig);
//funky stuff here to generate strTime
timeToAdjust.text(strTime)
});
}
This works fine in every other browser however in at least IE8 (and 6 but not worried about that) it gets to timeToAdjust.text(strTime) and fails.
Note, doesn't have an issue grabbing the 'datetime' attribute timeToAdjust.attr('datetime').
Have tried .html() and $(this).find('time').text(strTime)
Many thanks for taking a look hopfully someone can point me in the right direction.
Justin
IE8 and earlier require special steps to ensure that they properly understand that the new HTML5 element types are actually elements. There are tiny scripts out there (like this one) which do that work for you.
Without doing that work, lots of aspects of those elements won't work even as just normal elements in IE8 and earlier.
This JSBin of your code (jsFiddle doesn't work with IE8) fails, but this one with a shim works.
I'm having a problem where certain bit of code is working perfectly across all browsers until I come to Safari where it's giving me issues. I inherited this code, and I'm not a jQuery expert so needless to say I'm a bit baffled:
var xt_begin=$('#begin')[0];
xt_begin.currentTime = 0;
xt_begin.play();
"#begin" is an audio element that was set in the HTML that's using this code and the .play() function is in a jQuery plugin that's being used (Link to plugin).
In all browsers except for Safari, play is being defined as if xt_begin were an object of that timer class. In safari, however, it remains undefined and the code stops working. I have no idea how this happens or how to fix it. I can post more code if need be, any help would be appreciated.
**Update
Upon further investigation it turns out it is a DOM element, and I'm a bit thick. However, Safari seems to have a problem recognizing audio elements for some reason. It's identifying it as an "object HTMLelement" whereas Firefox shows it as "object HTMLAudioElement". I'm still stumped on this one.
**SOLVED
Apparently Safari needs quicktime installed on your desktop for it to use audio elements. That's gonna make this app I'm fixing completely useless, but at least I know now. Thanks for the help folks.
Really just a comment. The statement:
var xt_begin = $('#begin')[0];
is effectively the same as:
var xt_begin = document.getElementById('begin');
so xt_begin is either a DOM element or undefined (jQuery) or null (plain JS). Which is it?
In any case, you should probably follow with:
if (xt_begin) {
/* do stuff with xt_begin */
}
to avoid errors.
Try:
var xt_begin = document.getElementById('begin');
Instead of the jQuery line. That works across all browsers and will at least tell you if you have a jQuery problem or a Safari/web page problem.
I recently launched a website for a client http://www.bridgechurch.us/ only to recieve complaints of it not displaying correctly on ie8 or ie9. I have confirmed this to be true. IE is pointing to this line of Javascript:
jQuery(function () {
jQuery(".scrollable").scrollable({circular: true}).navigator().autoscroll({interval: 7000});
[...]
Can anyone help me figure out what is wrong with this line of code?
Thank you
UPDATE - FIXED
I figured out that there was a comment before the Doctype Declaration that forced IE into quirks mode.
You have a lot of 404's on that page, mainly related to ie-specific css and border images, which is probably why the page doesn't look like it should. Files like /images/internet_explorer/borderBottomRight.png and /wp-content/themes/Moses/styles/default.css aren't loading.
That being said, looking at the scrollable documentation, there is no .navigator() function off of the return value of scrollable(); and I'm getting the same error in Chrome.
Well, visually, the site doesn't appear to work well at all in IE9 (compared to Chrome). But just looking at the code that adds scrollable() to jQuery, you can see that that function doesn't always return the original element. In your code, if you split the call into two, you might be ok:
jQuery(".scrollable").scrollable({circular: true});
jQuery(".scrollable").navigator().autoscroll({interval: 7000});
I blame the plug-in on this one: functions that extend jQuery are supposed to always return the original elements found by the selector.
Why text-decoration: blink wont work in IE ?
What is the work around ?
Is there a non JS work around?
Do Microsoft have a plan to support this style?
IE doesn't support it. See Wikipedia: http://en.wikipedia.org/wiki/Blink_element
Also, don't. There's a reason it isn't implemented, and finding a workaround will do nothing but annoy your users.
Not sure whether Microsoft is planning to put that in but for the moment you are out of luck as far as IE (obviously) is concerned. No support for it.
so i've been working on a website now for like a couple months and i test it on chrome mainly. but before i release anything big i always check it on firefox 3.something and IE7. Now i've received some complaints that that it doesn't look very good in IE6 and when i do check it... well ya it doesn't look like its supposed to. Is there any quick fix that i can add to my HTML to make it look the same in IE6 as it does every where else?
At the risk of downvotes: have you tried adding IE6 to your test matrix? If you have a significant number of users complaining that it looks bad on IE6, you clearly have a significant number of users using IE6 to use it, so it seems like it would be worth your while to just add it to the set of browsers you check before release. Just sayin'.
A really good start is http://code.google.com/p/ie7-js/ Just place it in conditional comment tags in the head of your document and it will make ie6 'standards-compliant'. After that make sure you have seperate css documents for each version of IE, and make sure all of your code is valid with w3's validator. Also declaring a doctype can fix many issues, but it MUST be on the very first line that the browser sees.
Edit: also, for png transparency, I've found that this http://www.twinhelix.com/test/ (IE PNGFIX 2.0 Alpha) works best.
There is no quick trick to getting everything to work. Pretty much have to examine each element that looks different.
That said, you might try looking at a CSS reset file.
Yahoo has one.
And if you search google I'm sure you can find others.
Read this: Internet Exporer box model bug. Also try using YUI reset or Eric Meyer's resetReloaded to set a baseline for all your styles.
And stop developing in Chrome! Try Firefox with Firebug.
How badly does your website 'break' in IE6? If it's minor, then I wouldn't worry about it.
How critical is it that it works in IE6? It's share of the market is slowly but surely declining (Looking at my own logs from a Government website also shows that IE6 is definitely going away). Can you display a message on your website letting users know if they use IE6 and advising that they upgrade?
There are many reasons to upgrade, and educating your users as to why they should upgrade might also be worthwhile?
Uhm... if there is a simple solution I really want to know it. :)
But you can anyway use this good Microsoft tool to cross-test your pages.
It can be usefull for compare the final render of a website.
CSS resets will probably do nothing if it looks fine in IE7. Things like double margins when floating and overflow:auto bugs are things that need to be manually added for each occurance. I'd suggest adding the following line to your head tag:
<!--[if lt IE 7]><style type="text/css">#import "/stylesheets/ie6.css";</style><![endif]-->
and then writing an ie6.css file to fix all the bugs (yes, one at a time)
Probably not what you wanted to hear, but it is why everyone hates IE6 so much
you can check version of client browser and include css fixing for that browser. but most simple solution is to show an alert or notification to client that his browser is outdated and provide links to download latest browser
here are some way to show that notification
http://garmahis.com/tools/ie6-update-warning/
i like this solution
http://www.browser-update.org/