-moz-column-span: all; – completely ignored? - firefox

Testing in various versions of Firefox new and old it seems that column-span in CSS3 is ignored completely?
Even the simple demo on quirksmode fails in firefox:
http://www.quirksmode.org/css/multicolumn.html
Has this ever worked? I'm having trouble finding anything related online. Surely it should work if there is a prefix for the rule (-moz-column-span)
Am I missing something?

As of today, -moz-column-span and column-span are still not supported by Firefox.

No, -moz-column-span and column-span are ignored by Firefox. Here is the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=616436

CSS column-span is shipped in Firefox 71.
https://hacks.mozilla.org/2019/12/firefox-71-a-year-end-arrival/

Here is your reference from the W3C: column-span
-moz is only the Firefox prefix. So you will need use the WebKit and regular declaration as well.
It should look something like this:
.pullquote {
-moz-column-span: 2;
-webkit-column-span: 2;
column-span: 2;
}
Single Column is not the worst thing as a fallback, but IE users might not be super into this. See more info at the Can I Use website.

Related

How can I make Bourbon behave nicely for Firefox with regards to box-sizing

In my scss file I have
* {
#include box-sizing(border-box);
}
according to the Bourbon documentation here
This produces the desired result in Chrome, but not in firefox. If I apply the box-sizing manually it works as desired.
What am I missing?
It turns out the Bourbon documentation covers more details on box-sizing prefix settings
I had a $prefix-for-mozilla: false hiding somewhere.
Problem solved.
Hope this might help another hapless soul in the future.

firefox font-face issue

So have a very strange issue in firefox with font-face. I've included all the different font version types (.ttf, .woff, etc.) but don't see it loading in the browser (works fine in chrome). However, when I inspect it with firebug and hover over the font name in the inspector, it previews it correctly. So it is loading the font somewhat, but not in the main browser window. Anyone seen this before?
It ended up being that if font-family has spaces in it you need to surround it with double quotes not single :P
Wild guess: do you use NoScript? It blocks downloaded fonts by default. (Rationale is that font engines weren't necessarily designed for arbitrary input and may be just as vulnerable to attack as anything else.)

Disqus makes IE8 go into Compatibility Mode "Hard Assert". Any fix?

After testing I have found Disqus makes IE8 go into Compatibility Mode "Hard Assert". When I remove it it stops the behavior and stays in Standard Mode. Due to the fact that IE8 is tide to Windows XP IE8 will be around awhile. Worth fixing. Anybody know a fix for this? I already contacted Disqus support. I am not hopeful of a quick response.
If you dont want to use CC's to target IE8 Disqus just say...
#disqus_thread {
display:none; /* IE8 */
}
:root #disqus_thread {
display:block;
}
That is not the case. Remove the css remove the issue.

-moz-border-radius removed from firefox 13

Yesterday I updated to firefox 13 and I notice that this property is not any more supported by firefox 13, jquery.ui.css make use of this, and now I have all jquery ui elements with no round corners. Any solution before replacing all manually in css file with border-radius?
https://developer.mozilla.org/en/CSS/border-radius
says it was removed in 13, theres no other option than to change it to border-radius. I wouldn't call it manual, open them in a text editor and do a search and replace
border-radius is the standard, so it should have always been included in your css as a fallback as browsers adopted the standard.
Previously I used:
-moz-border-radius:10px;
-webkit-border-radius:10px;
but they stopped working in v13. I switched to:
border-radius:10px;
and it is working again!
Normally, you just should have to do nothing, because the jQuery-UI css files declare the border-radii the correct way.
<prefixed>-border-radius:xxx
border-radius:xxx
This way you shouldn't even notice the change. So I can't believe that you will miss the round corners without having altered the original stylesheet. Perhaps your problem lies somewhere else?
Find and Replace in complete Project...

Jammit, mhtml and the Vista IE7 bug

So I'm going to start using data-uri's and mhtml to embed images in my stylesheets and i'm thinking of using Jammit to help me out there because it claims that it can generate data-uri and mhtml code for you
I know about the IE7 Vista||Win7 bug and that the fix is to close off the buondaries with a two dashes
If you look at the example mhtml file provided in the jammit docs you might notice that they do not use the fix detailed above for the IE7 bug.
Does Jammit handle the IE7 bug for you? I have no way of testing IE7 so I'd just like to be sure of this before I got off and spend hours trying to get it to work
I don't think it's an IE7 bug. the Multipart MIME RFC (1341 and its successors) clearly calls for the extra "--" at the end of the last boundary. I would consider it a Jammit bug.
Update: I checked the source, and it looks like they've fixed that bug. The example was generated before the fix.

Resources