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
Related
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.
Can any CSS3 experts tell me the best strategy for handling the before and after pseudo elements with IE6 and IE7?
If you use jQuery it is a simple one-liner. Just use prepend() and inject a span with a class .before (for the simplicity of changing the CSS). I've made a fiddle for you.
I write a small script for old IE to add special elements in DOM. (Via IE conditional comments.) The rest of common browsers get this by pure CSS. The downside is I have to write the code twice. The upside, I have IE only code in one place.
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.
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.