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.
Related
I have a CSS file where I put all my styles inside and whenever I define any code such as:
MYtitle{
color: brown;
font-size:19px;
font-family:"Comic Sans MS", Times, serif;
}
Then I call it in my html file using:
<MYtitle> This is my defined Heading </MYtitle>
It will work in Firefox and other browsers but not in Internet explorer, it will not sense my styles at all.
Is there another way to define the above to also work with Internet Explorer? I'm trying to build a website that works in all browsers
Any tips or help is greatly appreciated.
Thanks.
Internet Explorer will only style valid HTML elements, and that's why there's the HTML5 shiv for IE8 and earlier. You can work around this by calling document.createElement with the element name in JavaScript:
document.createElement('MYtitle');
Here's a demo.
More likely than not, however, you shouldn't be using your own tag type. This renders your markup invalid and can cause compatibility problems, akin to those you've just experienced. A possible alternative is CSS classes instead, though they might not fit the bill entirely. It depends on what you're trying to do.
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.
Is there a firefox addon or is there a way to use firebug such that you can select some text on the website and it will tell you what styles are being used for that bit of text?
At the moment if I select a bit of text that is styled using css imported from elsewhere I would have to go digging manually to find out what style is being used. Is there an easier way?
Both FireBug and Web Developer addons can be used for this.
Just right click it in Firebug, choose HTML, and in the right pane, select Style>Show User Agent CSS. This will show a list of CSS rules that are being applied on the selected element.
body
{
font-family: 'Lucida Sans Unicode';
font-size: xx-small;
color: #008080;
}
on the top of my style sheet, and non of those specs are taking affect on my page, nothing, i tried doing it on td, table, tr, span, div just in case i needed to be more specific, but nothing is working, i want to make global changes without having to change things one by one and i can't seem to find a solution, any ideas?
thanks - your input is appreciated
ps: more info for those interested:
i have a standard mster page, and content pages, listview control that populated data from a database, but all the elements in my controls of concern is html elements (im sure some would be runat="server") the style is linked correctly as well, as other styles on the style sheet work...
here is the code where the text is not changing..
HTML TAGS ARENT DISPLAYING IN MY COMMENTS FOR SOME REASON...???
Clear your temporary files and try restarting the browser - chances are that its using a chached copy of the page.
There is nothing syntactically wrong with that code. The issue must have something to do with how it is being applied to the HTML (and thus with some code or HTTP response header that you haven't shared with us).
Hard to say without seeing the html and style sheet, but perhaps later declared styles are "overwriting" your body style?
If you can't see these changes they are being overridden by other styling applied somewhere else.
The easiest way to debug what css rules are being applied to elements on your page is by using a tool like the firebug extension available for firefox (available from http://getfirebug.com/)
Once you have this you can select an element and see what has been applied by what rule - and then you can override that rule!
There is also an IE dev toolbar, and developer extensions for chrome and firefox that do the same thing.
Hope that helps.
How does one style a form input field of type file for Safari, Chrome, and other WebKit-based browsers?
Right now, all I get is the Choose File button displayed on top of the usual text input box.
I've looked around a bit on Google, but haven't really seen anything helpful.
All rendering engines automatically generate a button when an is created. Historically, that button has been completely un-styleable. However, recently Trident and WebKit have added hooks through pseudo-elements.
Trident
As of IE10 the file input button can be styled using the ::-ms-browse pseudo-element. Basically any CSS rules that you apply a regular button can be applied to the pseudo-element. For example:
<input type="file">
::-ms-browse {
background: black;
color: red;
padding: 1em;
}
This displays as follows in IE10 on Windows 8:
WebKit
WebKit provides a hook for its file input button with the ::-webkit-file-upload-button pseudo-element. Again pretty much any CSS rule can be applied, therefore the Trident example will work here as well:
<input type="file">
::-webkit-file-upload-button {
background: black;
color: red;
padding: 1em;
}
This displays as follows in Chrome 26 on OS X:
Few days ago I had task to stylize an input="file" with CSS (mostly CSS3 with extra effects) and it is possible to do that.
I've written (or made small rewrites to filestyle plugin) a jQuery plugin. Its core behaviour is the same with images but I've totally replaced images with spans and divs. The plugin hides input="file" then builds a wrapper with CSS and finally triggers click actions on hidden input.
I hope it will be helpful for everyone.
Here's an example of how to style input="file" with only CSS.
I don't believe that you can. Apple only recently decided to enable styling of their form controls. They believe that it's harder to find buttons and inputs when they don't look like buttons an inputs - so they might not let you style their file upload inputs yet.
I'm around 90% sure you can't do it.
Firefox 4 will let you style input elements (in a round about way): link
Hopefully the other browsers will catch on to what an enormous pain point this removes.
If your only interested in webkit browsers, you can use their built in pseudo selectors to target different parts of the file input element. input::-webkit-file-upload-button {...}, for example.
Having a Flash uploader can give even more pain:
It is only working in IE in the same session as your browser and in all other browers it makes a new session, so you will kicked out of your back end secure app.
The only solution to that is sending your session data to the Flash as well... there you go!
I landed on this page looking or ways to style the file input item for Safari... I have lots of them in a table cell of only 150px wide but these inputs are forcing it bigger.
I have found just one solution until now, and that is to let them float above the rest using style="position:absolute;z-index:2" while my TD has position:relative styling.
It's a bad bad solution, I know!