Some people want to make the -ms-clear pseudo element disappear: Remove IE10's "clear field" X button on certain inputs?
My need is the opposite: I need to have it on FireFox and Chrome too. My client noticed it in Internet Explorer and founded it very useful. I use jquery-inputmask plugin BTW in my app.
https://github.com/RobinHerbots/jquery.inputmask/issues/1172
Addition to the answer:
I just double checked how DataTables's column filters handle this, because I remembered that it provides clear icon on FF and Chrome. I tried it out now in IE, and the IE's pseudo element puts an extra X there! The pseudo element is the bigger one, and the smaller one which is there in FF and Chrome also is a background image justified to the right with a right margin of 5px.
That is a native feature that is shipped with IE10. In order to have something like that in other browsers you will need to create it yourself. Or find a library that has a feature like that.
Related
I am trying to simply style my select box so the text is centre aligned. It works in Firefox but not in Safari or Chrome. When inspecting the element in Chrome it says the text is centred, however this is not the case. Can anybody see why it is not centred in Chrome and Safari?
http://georgewoolfe.com/yogurtline1.html
It will not work. Your best best is to use a plugin. E.g select menu :http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
That actually replaces the select with a span but retains select functionality.
Well, styling tag is really hard. You have to test different browsers and OS, and hardly you will reach an uniform result.
http://bavotasan.com/2011/style-select-box-using-only-css/
I suggest you to use some alternative component or js replacement that emulate selects behaviour, if you want to style it in an easier way.
http://cssglobe.com/custom-styling-of-the-select-elements/
There's no totally cross browser way of centering the test of a <select> element using just css. Some browsers allow you to do it and some don't.
If you really have to have it centered then I would suggest that you look into using an alternative component like Select2 or Chosen.
I'm using css gradients and padding to simulate buttons around an anchor tag. The problem I am running into is that firefox seems to make the button 3 pixels larger. 1 pixel on top and 2 on bottom. This seems to happen with not only the example i posted but everywhere on the page where i use the padding. I put up and example at http://wemw.net/example.php. In firefox the button top and bottom line up perfectly with the search box, but in chrome as i said its off by 1 pixel on top and 2 on bottom. I am using the w3 transitional(tried strict as well) doctype and a css reset. In the reset all anchor tags are set to padding: 0, so I'm confused as to why this extra padding is being added. Is there a workaround to this or is it just something you have to deal with when working with gecko and webkit browsers?
EDIT: So I logged over to windows and it is appearing the same in both browsers now. I'm assuming it is OS specific problems? Since no where near as many people use linux I'm going to change the padding to make it work, but in the interest of consistency can anyone offer a solution for cross-os cross-browser solutions? I do not own a mac and cannot easily test it there, but if windows/linux can have problems with the same versions of the same browsers is it safe to assume mac could also have issues i am unaware of?
It's not the padding on the anchor tag, it's the size of the text box that is inconsistent. <input> elements always caused such problems for me too, and I always found it extremely tedious to align them together nicely (you haven't yet seen it in IE8, have you?). I think that the easiest cross-browser solution here would be to remove the border from the text box and use a background image instead (or better yet, a background image on the element containing the text box) properly aligned with the button.
I've been searching for answers, but unfortunately still havn't found one the right one..
I'm creating buttons using images and the button itself looks good in ALL browsers..
The thing is though that the text is placed differently (vertically) depending on which browser you are viewing it from. I've tried applying both line-height, padding/margin, top/bottom and several other attributes, but without success..
Isn't there a way (with CSS) to place the text correctly in all browsers? (Opera, Firefox, Chrome, Safari)... Don't worry about Internet Explorer - I'll apply some speciel CSS for this!
I've put up an example here to play around with: http://jsfiddle.net/GydjP/1/
button::-moz-focus-inner {border:0;padding:0;margin:0;}
and adding Line-height to the buttons is apparently the best solution I can find for my buttons so far.. It doesnt work in very old versions of Firefox + Chrome though
This is going to be a vague and obscure question, which is probably due to the fact that even using IE Web Developer, I have no idea what is going on.
I have a utility which I am working on. It's mostly JavaScript, and it has a small floating DIV user interface that shows up on a page. So far, standard stuff. The problem is the background color of some DIVs in the UI. The colors are assigned by CSS, and (tired refrain:) it looks fine in Firefox, Chrome, and Opera, but of course IE is being difficult.
The background does not show up in IE in quirks mode or IE7 mode, but it does in IE8 mode. For the life of me, I can't seem to figure out why IE7 isn't showing the background.
The page you can see the offending code is here: Log Hound Demo. Floating DIV is in the upper-right-hand corner - click the "V" to open it up.
Looking at that page in IE and then in [any other browser on the planet] will show you the missing background colors easily enough. I swear, even Lynx renders it better... ahem. The offending DIV IDs are lhPlateHead, lhPlateCtrlPanel,lhPlateTagPanel - easy to find with Firebug at least. They should be heeding the .lhPlateColor class with a background color of #DFEAF8, but that color is never applied.
With IE web developer up, I tried removing the CSS classes and re-adding them. I tried every combination of browser and document mode - again, only IE8 browser mode in IE8 document mode had the background colors working.
If anyone is bored enough to take a look and figure something out, I'd be much obliged.
Well - I finally figured it out, and as far as I'm concerned, this is another reason IE will always suck.
The circumstances of the problem are:
You are creating an element programatically:
myelmt = document.createElement('DIV')
You are setting the styles of that element programatically:
myelmt.setAttribute('class', 'myclass');
You are then adding that element programatically to the DOM:
body.appendChild(myelmt);
You are using IE.
IE hates you.
In cases such as this, IE8 will honour the "myclass" css and style the element properly when it is added to the DOM. IE7 and I'm guessing below will blow off the CSS styling and leave you thinking that employment at McDonald's is probably a whole lot less stressful.
To recap for the impatient:
Works in IE8 and EVERY OTHER BROWSER ON THE PLANET
var myelmt= document.createElement('DIV');
myelmt.setAttribute('class', 'myclass');
body.appendChild(myelmt);
Works in IE7 and below:
var myelmt= document.createElement('DIV');
var attr = document.createAttribute('class');
attr.value = 'myclass';
myelmt.setAttributeNode(attr);
body.appendChild(myelmt);
If someone can expound on exactly why this is a problem for IE7, feel free as I revel in the minutiae. Otherwise, just remember that it's all fun and games until someone loses an object reference.
Try adding zoom:1 to whatever element the background color doesn't work on.
I believe the issue has to do with how IE paints table cells. Try putting in a IE only CSS rule that applies the background color explicitly to TD's. Like this:
.lhWarnMsg .logMsg td
{
* background-color: #fbffbf;
}
Hopefully that will work for you.
Is there a way to hide the border of a drop down menu in IE (to make it look flat, blend into the background)? In Firefox it's simple enough to just set the border to 0px, but IE still renders a border even if you set the border to 0px.
This isn't possible in IE. They don't allow styling of the drop-down component of a list, except for the text inside it (ie. red text).
IE actually uses a Windows-level control, not a browser-based one, so it is rather limited.
Edit: When this post was originally made, a stable version of IE8 wasn't released yet. According to comments, IE8 supports border styling. However, even ~2 years after IE8's release, you still shouldn't count on all of your users having IE8+.
I recently saw some tool kits fly the actual dropdown out 5000 pixels, replace it with a custom control, and use javascript to connect the 2 controls.
IE8 supports changing a drop down`s border, but IE6 doesn't.