the spans .cursor and .cursorinner aren't displayed in opera, is there an opera specific css property I could set? is my css invalid or is this an opera bug?
i just tested this with different browsers, works in
ie 7-9
chrome
safari
firefox
doesn't work in opera tho
fiddle is here : http://jsfiddle.net/etj6z/1/
This isn't working because you're depending on 2 inline elements to have defined block dimensions. Adding display: inline-block; (or display: block;) to the cursor spans make the element display in Opera. There is an additional issue with the blinking, which is due to the same issue. You'd probably be better off using show() and hide() but otherwise you should be using display: [inline-]block; in the js also.
Related
As I want to use flex-box I need a fallback and I like to make fallbacks as simple as possible.
I just use 2 displayproperies as described here: http://maddesigns.de/flexbox-fallbacks-2670.html
.the-flextable {
display: table; /* Fallback IE<9 */
display: flex;
width: 100%;
}
To test it I have only an IE11 and use the Emulation to set it back to IE9.
With this test scenario this simple fallback does not work. the emulated IE9 still takes the display: flex property, but then does not display anything.
In a real IE9 the fallback does work!
Now I wonder why it takes the display: flex. Is it bacause it is still an IE11 that would take that property, but the IE9 emulation cant rendet it then?
Choosing Document Mode: IE9 should be enough. Even though the DOM Explorer shows IE as trying to do display: flex, it won't render that properly and the fallback rule should take effect.
I discovered a strange issue today which seems to be a bug in Firefox 35.0. When specifying a text-indent property for a select element, Firefox seems to double the pixel value. Other browsers are correctly displaying the indent.
Is there a workaround to avoid this? I'm forced to use text-indent rather than padding to work around various other browser inconsistencies (specifically webkit on a Mac). I need to use text-indent but I'm unable to stop the value from doubling in Firefox.
Here's an example showing the issue: http://jsfiddle.net/k92dvxte/1/
Thanks for the help.
Explaining what #sydonia said:
You'll just have to put this code after the select rule in your CSS:
#-moz-document url-prefix() {
select {
text-indent: 50px;
}
}
I'm trying to have our Wordpress blog display a little better in IE8 and below (it works great in IE9, Firefox & Chrome). A big issue seems to be IE8's lack of support for negative margins, so the gap which we have between the posts column and the side widgets is non-existent in IE8.
URL: http://trekcore.com/blog
The CSS controlling that separation is here:
#secondary {
float:right;
width:300px;
margin-right:-320px;
}
Any help on suggestions for conditional CSS to fix this in IE8 and under would be most appreciated!
you should validate your html markups, 35 Errors and 11 warnings wont help.
in the meanwhile, try this fix :
.negative-margin-element {
zoom: 1; /* ie hax*/
position: relative; /* ie forced behavious*/
}
You are using HTML5 elements and IE8 does not understand them and will ignore them and you can't apply CSS to them because IE8 won't know they exist. To fix IE, you need to add the html5shiv. This will add those elements to IE8's DOM tree and set them to block level.
You can write your own code and CSS to do the same thing but the shiv is convenient.
I'm stumped here. I've got maybe 2-3 pixel difference with my header text (img) when displayed in FF vs an webkit browser. Not a whole lot going on in this page. Both the CSS and HTML validates. Doesn't appear to be and text zoom related. What am I missing?
www.caribouhouse.com
There's a hack for overwriting a css rule in firefox 3 , you can use this :
.foo{}/* other browsers */
.foo, x:-moz-any-link { } /* FireFox 2 */
html>/**/body .foo, x:-moz-any-link, x:default { } /* Only FireFox 3 */
FF and WebKit use different methods/algorithms to render text. Even WebKit by itself uses more than one method to render text, depending. Because of kerning etc it's normal to see different implementations have a difference of a few pixels when rendering text, even when the text is the same font in both cases.
I have a ul/li based side menu, styled with two CSS rules, the following of them is ignored by IE8 Quirks mode, and I assume IE6:
ul { padding-left: 15px; }
I can reproduce the problem in FF by removing this rule completely. I have also tried using jQuery to apply the rule, with no change in IE8:
$("ul.menu-class").find("ul").css("padding-left", 15);
Is this a box model issue, and, how can I reduce the UL 'padding' in IE Quirks Mode?
Try margin-left for IE - browsers have a unique look on that matter.