i m using one disabled textbox in my page .it is looking disabled in mozilla firefox but looking like a simple textbox in IE.what to do to give it a disabled look in IE also.
Depending on the version of IE you are testing with, you can change the background colour of the textbox yourself using CSS:
background-color: #999999
Other than that, there isn't a whole lot you can do. Older versions of IE are a pain to work with, and form elements are notorious for lacking styling support.
Usually disable behavior is the other way around; you can't override all the styling IE places on disabled HTML controls. But you can in FireFox and other browsers. If you need to give an appearance of not being disabled when actually being disabled, you should look at using a Label server control to display what you need.
Related
I'm using an Ajax Listsearchextender on one of my asp:DropDownList and it does not seems to behave correctly in Internet Explorer and Chrome.
In both browers, I can type my search words and hit Enter and the correct element WILL be selected, although none of the browser highlight the "suggested" option while typing. Chrome does not event change the promptText of the searchExtender while typing and in IE the opened DropDownList often covers the whole searchExtender so it is impossible to know if it's even there. Even though the searchExtender is technically working (selecting on enter), it lacks basic feedback in a way that makes it unusable in IE and Chrome.
On the other hand, in Firefox everything is working like a charm..
I'll put my code here for good measures, but since it's working in Firefox I am not sure if the problem resides there.
<ajaxToolkit:ListSearchExtender ID="lse_ddl" runat="server"
TargetControlID="ddl" PromptCssClass="PanelSearch" PromptText="Search.."/>
<asp:DropDownList ID="ddl" style="width:350px;" runat="server"/>
The only styling that I do to the searchExtender is adding a border so it can be more visible..
I was wondering if those where known issues and, if so, is there a way I can fix this? I also would like to know if there is a «more recommended» way to achieve dropbox auto-suggestion than using Ajax's Listsearchextender since it does not seems to be well supported.
Thanks!
For anyone who comes across this in the future - I had a similar issue except that Chrome worked fine for me while IE only displayed the last letter of the search prompt or anything typed into the box. I found some information here that indicated you need your target control to have an appropriate width. This works for Chrome but is not sufficient for IE. What I found to work is to update your PromptCssClass to include both a width and a border, like this:
.lse
{
width: 250px;
border:1px solid black;
border-style:ridge;
}
There are probably some other variations on this that would work, pending experimentation. YMMV.
Is there a way to style a range control such that it degrades gracefully in IE8?
I've seen a way to style it for other HTML5 compatible browsers here:
Is there a way to style HTML5's range control?
But with the help on that page, the control does not show at all in IE8. Instead it only shows a textbox with the range value.
First of all. Most browsers, which support this type of control also do support styling it. Only Opera below version 12 doesn't support styling it. Other browsers, like IE8 do not even support this control, so you will need a polyfill for it.
If you want you can try webshims. Here is an example, which uses different pseudo-element selectors to style native and polyfilled input[type="range"].
But to be honest, it is quite heavy to a) do fancy styling consitent x-browser and b) not all styles do work well with iOS.
Recently published project in beta stage. Was testing it with new browsers for a while.
I fixed all bugs including background-size, some main css3 properties on IE8.
The only issue on IE8 is following:
To quickly recreate the situation please enter to the website http://goo.gl/rlmelu and click on, for example, birthday. Then enter number of participiants, for example 30 and select some date. Then click "next".
That's how Firefox 26.0, Chrome shows result:
http://joxi.ru/3w7gUv3JTJDfEIXmJqM
And thats how IE8:
http://joxi.ru/Eg_gUv3JTJB-EJupfnA
Please don't tell me to not to use IE8.
What am I doing wrong? How to fix it?
First Problem : The Choose Button
The Problem is CSS PIE. Two possibilities:
Disable PIE
In iefixes.css, disable PIE for .btn
Set to important
Set the Background to important (But think about: Is !important bad for performance?):
.btn-warning{
background-color: #f0ad4e !important;
}
I have put together this simple code for showing/hiding some content on click using CSS only. It works as I want it to in FF but wont work in Chrome or Safari (untested as yet in IE)
http://jsfiddle.net/fW3yW/
Can someone please tell me why it wont work in these browsers and suggest an alternative (using CSS only if possible)?
Here is the site where the code is being used - http://www.themontessoripeople.co.uk/montesori/?page_id=20#policies-list
Added tabindex, works in Chrome: http://jsfiddle.net/fW3yW/1/
From here: css focus not working in safari and chrome
jQuery method: http://jsfiddle.net/fW3yW/12/
You're abusing CSS. The :focus psuedo-class is meant for styling form elements that have focus, rather than for <a> links, where browsers might implement :focus differently, and then there's also the similar :active psuedo-class.
I suggest you do not hide anything by default with CSS, but use jQuery to hide the elements on-load, then use jQuery to create show/hide animations (easily done with a single line of code) when a link is clicked. It's a lot more elegant and works on more browsers.
You're using a CSS3 selector, with an XHTML doctype. I don't know that all browsers will handle CSS3 with an XHTML doctype tag - though the two specs aren't necessarily tied together.
Have you tried changing the doctype to indicate HTML5? (Then, of course, that brings up all kinds of HTML5shim questions...)
Use jQuery instead...way more reliable and elegant.
http://www.w3schools.com/jquery/jquery_hide_show.asp
I am getting a styling problem with options. I need some options to appear in bold style, but Internet Explorer doesn't want to render it.
I'm setting it using CSS using font-weight: bold;, which is not working.
An example can be seen in this page: Example, which shows bold fonts in Firefox but not in Internet Explorer.
I have tried in Internet Explorer 7 and 8.
Has anyone has an alternative?
A sample:
HTML:
<select>
<option class="special">Special</option>
</select>
CSS:
.special {
font-weight: bold;
}
IE doesn't allow styling of <option> elements independently. This is because IE uses a Windows form control to render the select box, which doesn't support this feature.
(as an aside, this is the same reason that IE's select boxes can have issues with layering when you put them behind other objects; the form control is being rendered by the Windows OS, not by the browser, so the browser has less control over it than most other elements on the page)
Other modern browsers do allow you to do it, as they render their own select boxes rather than deferring to the OS.
in IE, you can't style an option. I had the same issue...you can give it color but not much else.
You could write a jquery plugin or find an existing one to "convert" your select to a styled list/dropdown.
Also see: Create a styled Dropdown like on jquery UI
You need to apply the font-weight:bold to the paragraph of text, not to an outer div or something else.
Also, make sure nothing else is overriding this declaration. If the above doesn't work, change it to font-weight:bold!important and see if that fixes the problem.