Chrome on Left, Firefox on Right
We're using jqmath and would like to use the line-through text-decoration, as described here: How does one indicate strikethrough in jqmath?
This works in Chrome, but is not working in Firefox.
.deletedText {
color: red;
text-decoration: line-through;
}
...Neither of these will produce a line-through in FireFox (but both work in Chrome)
<li>$ \cl "deletedText"{ax^2+bx+c=0}$</li>
<li class="deletedText">$ax^2+bx+c=0$</li>
Any assistance is appreciated.
This is an issue with native MathML in Firefox. Firefox and Safari actually implement (large parts of) MathML, but the implementations don't always respect all CSS properties. This example works in Safari 10, for example, but I don't know if it will continue to work in Safari in the future. You could file a bug at mozilla. One problem is that MathML is not being actively worked on by the browser vendors (I am hoping this will change as schools get more computers, but I've been hoping for years/decades, sigh), and another problem is that the MathML spec was developed for non-CSS and pre-CSS (!) environments, and some might argue the spec doesn't explicitly state that all CSS properties must be implemented/respected.
If strikethrough is a requirement for you, then in the short-term you can turn off native (browser) MathML in javascript:
M.MathML=false;
Do this in a <script> that's after the <script src="..."> tag that you use to load jqmath.
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.
Is it a bug that Firefox doesn't seem to support background-image swapping in pseudo-classes or is it that the other browsers are doing more than they should be?
I'm trying to figure out if I'm doing something wrong... this works in Opera and Chrome (haven't tested in IE yet)...
.myClass{
background-image:url('off.jpg');
}
.myClass:hover{
background-image:url('on.jpg');
}
However firefox just ignores this. I was hoping to avoid writing a javascript roll-over... this seemed like such an elegant solution, but I'm starting to suspect that I'm hosed.
Your page is in quirks mode, presumably, and :hover has some weird behavior in terms of when it applies or not in quirks mode. I suggest putting your web page in standards mode if you want browsers to actually behave compatibly on it, instead of explicitly asking them for buggy backwards-compatible behavior.
What version of FF are you using? A quick search revealed this possible issue similar to yours: http://support.mozilla.com/en-US/questions/746770
Try this to see if it works:
.myClass{
background-image:url('off.jpg');
}
.myClass:hover{
background-image:url('on.jpg');
}
[class="myClass"]:hover{ /* firefox fix */
background-image:url('on.jpg');
}
I'm currently trying to style a <meter> tag in all major browsers: IE7-9, FF, Chrome, Safari and even Opera. I've managed to remove the default <meter> styling by using the following CSS code:
meter::-webkit-meter-bar, meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value {
background: 0;
}
This technique works fine in all mentioned browsers, except Opera! It keeps showing the default green meter. Any idea on how to "destyle" the <meter> tag in Opera?
There is no way yet to style such elements in Opera. There is a proposal called Component Object Model which will obliquely allow us to do such styling when it is in a Working Draft, but we are not close to one.
Webkit has implemented a method that is not in any standard and just a suggestion, and I wouldn't assume this is how it would in the future. Most likely these pseudo-element names would change.
Before I start: shouldn't it be background: transparent; or background: inherit;? See the background property in HTML Dog.
I think you're misunderstanding. The meter::-webkit-meter-bar selector should have no effect at all on IE, FF and Opera since the -webkit part is a selector for Webkit. Chrome and Safari use Webkit as a render engine, but FF uses Gecko, Opera uses Presto, etc.
For FF you would probably need something like -moz-meter-bar...
For Opera I do not know. This Opera community page seems to imply that the prefix would be -o rather than -webkit or -moz.
Good luck.
It's also a good practice to include the "normal" selector when adding such rules.
(And if you're lucky, this might just make it work in Opera.)
meter::-webkit-meter-bar,
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value,
meter::meter-bar,
meter::meter-optimum-value,
meter::meter-suboptimum-value,
meter::meter-even-less-good-value {
background: transparent;
}
Say I need to develop a web site for multiple browsers. major ones - Firefox, Safari, IE, Opera, Chrome
How do you debug display issues? In Firefox there's Firebug, which is great. There also is a Firebug Lite for other browsers, but it's not full featured - it does not refresh in real-time. For example, if I suspect that jQuery is slowing it down (adding classes, etc), how would I find out?
Firefox has Firebug
Opera has Dragonfly
IE8 has developer tools
Webkit browsers (Chrome/Safari) have web inspector
Aside from these, you may want to look up the outline property which adds a border to elements, but without disrupting the page flow. This is useful for side-by-side comparisons.
If you have some classes being applied with jQuery, simply use the outline property on them and it should appear when the class is added.
.class1 {
outline: 1px solid blue;
}
.class2 {
outline: 1px solid red;
}
IE8 includes great developper tools
You can validate CSS using W3C CSS Validation Service
About About the CSS Validator
Developer Tools
IE Developers Tools
Opera Dragonfly
Safari Web Inspector
For cross-browser debugging, you can use Firebug Lite. It's like Firebug itself, but as an external JavaScript library and tested in FF, Opera Safari and even the good ol' IE (as the webpage states).
Check out my new tool to view the layout of any element on your page by mousing over it - CROSS BROWSER!
HTML Box Visualizer - GitHub
I'm wondering if there's any way to write CSS specifically for Safari using only CSS. I know there has to be something out there, but I haven't found it yet.
I think the question is valid. I agree with the other responses, but it doesn't mean it's a terrible question. I've only ever had to use a Safari CSS hack once as a temporary solution and later got rid of it. I agree that you shouldn't have to target just Safari, but no harm in knowing how to do it.
FYI, this hack only targets Safari 3, and also targets Opera 9.
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Opera 9 rules here */
}
There are some hacks you can use in the CSS to target only Safari, such as putting a hash/pound (#) after the semi-colon, which causes Safari to ignore it. For example
.blah { color: #fff; }
.blah { color: #000;# }
In Safari the colour will be white, in everything else it will be black.
However, you shouldn't use hacks, as it could cause problems with browsers in the future, and it may have undesired effects in older browsers. The safest way is to either use a server side language (such as PHP) which detects the browser and then serves up a different CSS file depending upon the browser the user is using, or you can use JavaScript to do the same, and switch to a different CSS file.
The server-side language is the better option here, as not everyone has JavaScript enabled in their browser, which means they wouldn't see the correct style. Also JavaScript adds an overhead to the amount of information which needs to load before the page is properly displayed.
Safari uses WebKit, which is very good with rendering CSS. I've never come across anything which doesn't work in Safari, but does in other modern browsers (not counting IE, which has it's own issues all together). I would suggest making sure your CSS is standards compliant, as the issue may lie in the CSS, and not in Safari.
So wait, you want to write CSS for Safari using only CSS? I think you answered your own question. Webkit has really good CSS support. If you are looking for webkit only styles, try here.
You'd have to use JavaScript or your server to do user-agent sniffing in order to send CSS specifically to Safari/WebKit.
#media screen and (-webkit-min-device-pixel-ratio:0) {}
This seems to target webkit(including Chrome)... or is this truly Safari-only?
This really depends on what you are trying to do. Are you trying to do something special just in safari using some of the CSS3 features included or are you trying to make a site cross browser compliant?
If you are trying to make a site cross browser compliant I'd recommend writing the site to look good in safari/firefox/opera using correct CSS and then making changes for IE using conditional CSS includes in IE. This should (hopefully) give you compatibility for the future of browsers, which are getting better at following the CSS rules, and provide cross browser compatibility. This is an example.
By using conditional stylesheets you can avoid hacks all together and target browsers.
If you are looking to do something special in safari check out this.