I'm able to force browsers to use inline css ex:style="...." by using styleWithCSS execcommand. That however doesn't work for IE. IE still uses HTML tags rather then inline css. Is there a way to force IE to use inline styling.
Not by using execCommand(), no. You'll need to style the selection contents manually to have that kind of control. My Rangy library's CSS class applier module may be able to help point you in the right direction.
Related
It is possible?
I mean this:
<div style="?css animation?"> Content </div>
It can be any tag, or maybe triggering the animation or transition from other tag.
This question is because I will like to use animations and transitions in a web app, but this app just let me use css included in the style tag attribute.
Pseudo clases I guess are out of the question so I can not trigger transitions, neither I can use javascript, so onmouseover or similar kind of stuff are out of the question.
Animations on the other hand needs their keyframes settings, and I can not set keyframes inside a style tag.. (or can I?). I read something similar here:
https://css-tricks.com/animate-to-an-inline-style/
But I guess it would not work for what I am asking.
Not sure if there is a hack to import a css from an attribute or just achieve animations in chrome browsers (another thing, I have not access to the head section of the html).
Yeah I know, it seems mission impossible, I was just wonder in case there is some kind of trick to achieve this even if the animation is very limited.
Thanks for your time.
No, afaik.
Atleast not for those animations that require :hover or keyframes as you mentioned. However, it is possible by including animations attached to <style> contained within the same html page. Or by injecting css code using js code on the same html page . This suits if you are okay with CSS resting in the same file.
The link you've mentioned is NOT using inline CSS for animation; it has a separate CSS file.
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
Is there any way to override !important properties defined in browser's CSS code other than using per-element style? It seems that the browsers load their precompiled CSS after page's CSS defined in style or link tag. I want to remove borders and colors from default checkboxes and radiobuttons (appearance is not important so it can be easily disabled), my CSS works in userstyles, but on real web pages it doesn't work.
Any page (author) style sheet overrides a browser’s default stylesheet. There is no !important in browser stylesheets. Specificity does not matter here, by the rules of the cascade. What matters is that some presentational features are not controllable in CSS in the first place. Demo:
<!doctype html>
<style>
* { border: none; }
</style>
<input value=foo><br>
<input type=checkbox checked>
This removes the default border of the text input box. On most browsers, it does not affect checkbox rendering, since what we might see as border there is really part of the checkbox widget. IE, as usual, has different behavior, but even on it, you cannot remove the “border,” and if you use your own border on the element, the border is drawn outside the box.
There might be browser-specific ways of affecting their behavior in ways other than standard CSS. You may need to elaborate on what works “in userstyles” and on which browser(s).
So you wanto to "remove" browser default CSS?
I think you can do that with reset CSS, it basicaly resets the browsers styling.
There's many examples out there
Heres one: CSS reset
Yes. Use Javascript to remove the styles from the elements after loading.
Or, design the stylesheet right at first.
What I know is : external css, internal css and inline css. And its overridden order is :
external < internal < inline.
i.e. external css is overridden by internal and, internal and external is overridden by inline.
Also, we can update it through javascript.
Declare your styles, using selectors that are at least as specific as the original selectors.
Mark your overriding styles with !important
Declare/include your stylesheet after the existing styles
Here's an example, where the last !important styles declared take priority over earlier styles.
http://jsfiddle.net/8QHQk/1/
i am having a server control (Asp:Label) and i want to apply the css class dynamically
but it is applying to the label in all browsers except in IE7
in all browsers the dynamic css classes are applying but in IE7 it is not applying
can u give any solution or any alternate solution
Thanks and Regards,
Vara Prasad.M
When the html is rendered in IE7, does it properly show
<span class="liforrent" id="lblPrice"></span>
or something similar?
If so, what does your css look like? Are you using something like css hacks which can get misinterpreted by IE7?
Edit: I suggest you download and install Internet Explorer Developer Toolbar to see what styles are put over the span tag in IE7 and resolve it that way.
I was thinking of using these styles for easier cell rollover effects in a datagrid, but I can't seem to get these styles working on anything other than the most basic of tag.
Is the <a> anchor tag the only element in HTML to support styles like hover, active, visited?
It should work on all elements, but IE6 only supports in on links. I used whatever:hover to work around that.
Modern browsers support the pseudo style properties for all elements, IE6 is the only current wide-spread browser that doesn't (and that's only for the :hover property).
It is unfortunate but until IE6 usage drops below minimal levels, you should avoid using the :hover property on non-anchor elements for better cross-browser support. Alternatively, you can provide IE6 support for it using javascript (with browser detection) or CSS expressions.
According to the CSS2 specification:
CSS doesn't define which elements may be in the above states [:hover, :active, and :focus], or how the states are entered and left.
In other words, don't depend on them working at all. I would use Javascript, along with CSS, to get a wider audience.
PPK has a great reference for browser compatibility here: http://www.quirksmode.org/css/contents.html#t16
It shows the browsers that correctly support the :hover pseudoclass (and lots of other css selectors).
Yes unfortunately anchor is the only tag that supports these styles.
I would recommend the following:
Before coding any of your own JS, try use the JQuery framework, it might save you loads of work.
Another crazy workaround would be to expand the size of the using style to 100% of the parent (cell), this way you would effectively be applying the style to the cell.