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.
Related
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.
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'm creating a draggable/resizable menu with all the neccesary links to control the website, a CMS-bar kind of. I'm using some png's to create the background, set with some transparency.
It works great in FF, but in IE my png's get transformed after I drag my menu around:
Screenshots:
http://img.photobucket.com/albums/v739/Alienna/falcon/drag.png
Also, that big empty space? That's a log-out button(div with background-image and a-element), of wich only the :hover status seems to work, and only before dragging ...
Any fixes for this? I thought IE's png problems were gone after IE6(tested this ie IE7/8) ...
I'm not 100% sure, but I assume this is the old "PNGs with alpha transparency in DIVs with alpha transparency" bug that is present in all IEs including 8. See here for more info.
In short, IE has difficulties with alpha transparencies in PNGs when those are in containers that themselves have an opacity different from 1. When you drag the element, its opacity changes, and the bug comes into play.
Convert your draggable image to 8 bit, It works for me..
One of my css styles has a black background color and a filter with an opacity. This is supposed to be translucent and almost always is.
There is one exception to this.
IE8 doesn't play nice with a lot of Microsoft's other products, and update panels in .NET seem to be one of them. If I have an updatepanel that sends a javascript alert on callback, IE8 won't bother rendering the filter of the style. The screen will just be black until the user moves the alert box or clicks O.K.
I tried to force a redraw by changing dom elements and all that, and it seems that IE8 is just lazy and doesn't care about the filter when the alert box is up.
I need to maintain the opacity without using a filter or opacity tag, as these don't render in the correct order with update panels and alert boxes in IE8.
Is there a viable alternative?
One alternative is to have a semi-transparent PNG and set it as the background. This removes the need to set a transparent filter on the element as the transparency of the PNG is applied. This works in IE8, Firefox, Safari and Chrome (but probably not in older versions of IE).
Is there any way, how to make rounded HTML <select>, without using any javascript?
I have this insane design and I have absolutely no idea how to do it only with CSS.
The same problem is with checkbox and radiobutton. Does anybody know how to make them rounded?
I need solution that works for IE6+, Firefox 2+, Opera 9+ ...
alt text http://uploader.chytry.cz/select-checkbox.png
No. Form styling is very problematic, there are no guarantees that any styling will work. Simple borders and background colours/images generally work OK in most browsers. I believe Safari will let you style very little. Check this page for more detailed info.
Honestly, the best solution is to use javascript. jQuery click menu is a great solution I used recently to mimic a select box (used JS to set a value on a hidden field when an element in the menu was selected).
I'm sure there are other solutions around too if you search.
No.
Now the long answer: Internet Explorer does not lend itself well to being styled. You will be able to set a background image for the left-hand side (the text content) that has rounded corners, but the drop-down arrow will be fixed as the default browser. You'll also find that the mousedown and mouseover states for the control will be fixed as the default style.
I think that in many cases, the ideal preferred design needs to be a little pragmatic about limitations in browser standards support. Specifically, the problem that IE6 doesn't support a fair number and IE7 is only slightly more compliant.
Sorry for the bad news.
no
please see this site for radiobutton and checkbox
http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/
No, Whit out javascript or jQuery you can not do this. But if you need with jQuery try this link. It contains the HTML select box with rounded corners by jQuery.
http://webworld-develop.blogspot.com/2011/11/cool-html-5-select-with-jquery-and-css.html