I have an annoying issue with a select html element that cuts off the text in the dropdown when it is longer then the set width of the select html element.
The select elements need to be a set width to stop the page misalinging, Every browser seems to work except for IE8 running on XP. why? so random and bad compatibility.
please let me know if you need more infomation.
Thanks!
It's a how IE interprets it should render the drop downs ... Unfortunately,there's no easy fix, what you can do is create a replacement for drop downs that handles this in a different way, that can work consistently across browsers ...
Here's a solution I came up with
http://weblogs.asp.net/jaimedelpalacio/archive/2008/11/22/custom-html-dropdown-control-part-1.aspx
i'm not sure of the differences between OS, but just use conditional comments to style the select in IE. style the as well.
Related
If you drag-and-drop around an image in Firefox in a contenteditable area, sometimes the images will end up being selected like this:
Fiddle here: http://jsfiddle.net/zupa/qg5Qh/
You may need to drag-drop it a few times, I have this bug in like 20+% of the time.
I am using Firefox 13.0.1 on Windows 7
How to remove that selection? Any help is appreciated.
Ps:
It is not available as a range via document.getselection().getRangeAt(..)
Firefox does NOT add any HTML attributes, still if I hit save (custom CMS), and reload the page in contenteditable mode, the selection comes back. Seems to be an annoying bug.
It does it reliably when the image is within a word that is marked by Firefox as a spelling error. For example, here's your jsFiddle with the image moved into the middle of the word "Lorem": http://jsfiddle.net/timdown/qg5Qh/1/
It seems to be something to do with the styling applied to misspelled words. Add the word "Lorem" to the browser's dictionary and the image styling goes away.
You could switch spellchecking off using the spellcheck attribute. From what I can gather, you have to do this at the <body> level in Firefox because it doesn't seem to work on single contenteditable elements as it does for textareas.
Demo: http://jsfiddle.net/timdown/qg5Qh/2/
I have created a little tooltip framework, which works fine in all modern browsers. There's one thing that really bugs me: in Firefox this seems to disable displaying a regular title (from the title attribute).
I can't find a cause for this. It's not the mouseover handler that I assign for certain elements, because on regular (non handled) elements, titles are not displayed either. Furthermore, I experimented with this (see this JSFiddle, and it was not replicable).
Can this be some known Firefox bug (I searched the Internet for that, but I didn't find anything relevant) or am I doing something wrong in my scripting, HTML, or CSS?
I've put the whole thing in this JSFiddle.
[edit april 2022] This is a very old question. Do disregard it.
title is displayed in my Firefox, and Firefox doesn’t have any bug regarding the same. Try updating your Firefox, or maybe some plugin in your browser may be causing the tooltip to hide.
I am trying to rearrange the table rows in the preformatted HTML table.The HTML table is being displayed as in the below fiddle.. My total HTML is given in this fiddle.
Initial Look of the table
I am trying to rearrange the <td> with texts containing texts "One" and "Two".I am identifying those "One" and "Two" rows using "rowspan" attribute. If you see the below fiddle in non IE browser you can have a clear picture on what i am trying to do..
After rearranging
But the problem is, This Code is working fine in browsers other than IE(I have tested in Chrome and Firefox). I am unable to find where the problem is...
Please help me to correct my code to have cross browser compatibility.
Thanks for your answers, I found the problem.. IE is assigning the index from 1 to the elements. So giving
find('td.mrGridCategoryText:eq(0)')
is giving undesired results, If i change it to 1 then i am getting correct result in IE but not in others.Check this fiddle http://jsfiddle.net/J7WPb/23/
So
i need to give eq(0) if other browsers and eq(1) if IE :-(
Thanks again.
If you can, use IE9 (Windows 7+ only) and press "F12" for the console and debugging abilities.
You can then even use the javascript debugger to refresh the page and have it break on javascript errors
Personally, I don't support IE, not till they start supporting the "internet" the way every other "way better browser" does
UPDATE
I found a problem! When IE8 loads the page there is an error on line 195 of file LayoutCM.js
In other words, I don't think the error is in your code as much as it is a jFiddle issue!
Suffice it to say, IE8 doesn't support "getStyle" on the object it's being called upon (variable "win" expected as "window").
This is just another shining example of IE not supporting the "internet" as I put it earlier.
Hope this information helps!
(Yes, I know there is a similar question on SO, but it's 8 months old -- since then IE8 RTM has come out -- and not very illuminating)
Is it possible to disable IE8's 'Accelerators' on my site? When highlighting text, I have a small popup box that appears beside the cursor (similar to Office 2007) which is being obstructed by them.
I understand there's a method of disabling highlighting on specific elements of the site using jQuery, but this isn't ideal as I need to preserve the highlighting.
Note: I am not asking how to disable IE8 accelerators on my local copy of Internet Explorer. Instead, I would like accelerators to not appear when anyone visits my site using IE8.
Sorry, this is deliberately not supported.
Please see http://blogs.msdn.com/ieinternals/archive/2009/06/03/slowing-down-disabling-accelerators.aspx for discussion on this topic.
You can mark the parent element as either contentEditable (http://msdn.microsoft.com/en-us/library/ms537837(VS.85).aspx) or as unselectable (http://msdn.microsoft.com/en-us/library/ms537840(VS.85).aspx)
Either one should prevent the accelerator button from appearing.
You could prevent highlighting on the section. Then wrap the selection that would have been highlighted in a span that has some CSS applied to it, mimicking the highlight. It might take a bit of work, but it would achieve your goals.
As someone says, wrap around selection with some span (ex. span class='selected' - to retrive it latter), and delete the selection with:
if (document.selection)//ie -> prevent showing the accelerator menu
{
document.selection.empty();
}
Uhm I'm not sure if anyone has encountered this problem
a brief description is on IE6 any <select> objects get displayed over any other item, even div's... meaning if you have a fancy javascript effect that displays a div that's supposed to be on top of everything (e.g: lightbox, multibox etc..) onclick of a certain element and that div overlaps a <select> your div get's to be displayed as if it's under the <select> [on this case a max and minimum z-index doesn't work ]
I've tried googling and found the iframe shim solution
but I wanted some pretty clean alternatives
or better yet has anyone found a better solution?
since the method using iframes uses around 130mb of ram might slow down poor people's machines
You don't have to hide every select using a loop. All you need is a CSS rule like:
* html .hideSelects select { visibility: hidden; }
And the following JavaScript:
//hide:
document.body.className +=' hideSelects'
//show:
document.body.className = document.body.className.replace(' hideSelects', '');
(Or, you can use your favourite addClass / removeClass implementation).
There is a plugin for jquery called bgiframe that makes the iframe method quite easy to implement.
Personally, as a web developer, I'm to the point where I no longer care about the user experience in IE6. I'll make it render as close to "correct" as possible, and make sure it's functional, but as far as speed goes, too bad. They can upgrade. IE7 (though still quite slow, compared to every other browser) has been out for 2 years (almost to the day!). IE8 is going to be out shortly. Firefox is available for every platform. Safari is also an option (and super fast). Opera is available for most/every platform.
IE6 was released in over 7 years ago. IMHO, there is no reason to still be using it, other than lazy users and incompetent IT departments (or if you're a web developer).
in case anyone is interested, here's some IE shimming code.
* html .shimmed {
_azimuth: expression(
this.shimmed = this.shimmed || 'shimmed:'+this.insertAdjacentHTML('beforeBegin','<iframe style="filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);position:absolute;top:0px;left:0px;width:100%;height:100%" frameBorder=0 scrolling=no src="javascript:false;document.write('+"''"+');"></iframe>'),
'inherit');
}
ref: this gist by subtleGradient and this post by Zach Leatherman
Prior to IE7 the drop down list was a "windowed" control meaning that it was rendered as a control directly by Windows rather than the browser synthesizing it. As such, it wasn't possible for it to support z-indexing against other synthesized controls.
In order to appear over a DDL, you must use another windowed control, like IFRAME. You can also use a little known IE-only feature called window.createPopup() which essentially makes a chromeless popup. It has limitations, like unstoppable click-out, but they are actually kinda helpful if you are building a hover menu system.
The simplest and most elegant solution to that annoying IE bug is found at: http://docs.jquery.com/Plugins/bgiframe using jQuery.
I reached that conclusion after trying for 2 days to make it work with WebSphere Portal / Portal Applications where everything is dynamic, including the fly-over menu.
There's also the activex method, which I'm starting to explore. It requires creating conditional code to use an activex control instead of a select box for ie6. There's a demo script showing the technique, which is discussed in more detail here.
Update: it appears that MS Office is required for the active-x control to be on the user's machine. In theory, it might be possible to include that somewhere, somehow, but that's getting a lot messier.
I know many people suggested their own tips, but in my case, I just simply hide select using jquery like the below.
$(':date').dateinput({
format: 'dd/mm/yyyy',
onBeforeShow: function(event) {
$('select').hide();
},
onHide: function(event) {
$('select').show();
}
});