#-moz-document not working - html

In the end, I want firefox and chrome to display the same way. On chrome I've noticed that float: left breaks the site but works on FF. However, if I put float:none Chrome displays perfectly but then it is broken on FF.
I have tried #-moz-document url-prefix() {.attempt{float:left}} but that appears not to be working. I've tried #document url() {.attempt{float:left}} but that doesn't help either.
Any help would be greatly appreciated.
<style>
#-moz-document url-prefix() {
.attempt {
float:left
}
}
.attempt {
float:none
}
</style>
<div class="attempt">someText</div>
Also It has been asked before with no answer.

On the surface it would seem to be because your #-moz-document appears before the float:none rule — so it will always get overridden regardless. The presence of a conditional at-rule does not change how the cascade works; this is a common gotcha with #media rules and applies just as well to #-moz-document.
You want to move it to the bottom so it will override the previous rule properly in Firefox:
<style>
.attempt {
float:none
}
#-moz-document url-prefix() {
.attempt {
float:left
}
}
</style>
<div class="attempt">someText</div>

As of May 2018, the answer #BoltClock gave has been deprecated. The solution is a media query ( seen below ):
#media screen and (min--moz-device-pixel-ratio:0) {
#logo {
padding-top: 1.5rem;
}
}

Related

Printing a HTML page without page information

I am trying to print a webpage without page information.
With page information I mean: The of the page, URL of the page and the print pages and the date of the printing.
I am using the following code for it:
<style type="text/css" media="print">
#page
{
size: auto; /* auto is the initial value */
margin-bottom: 0mm; /* this affects the margin in the printer settings */
margin-top: 1mm; /* this affects the margin in the printer settings */
}
</style>
This code seems to be working on Google Chrome. But in Mozilla Firefox I still get the 'page information'.
So my question is, why is this code not working on other browsers (Mozilla Firefox) and how can I fix this so it will work on Mozilla Firefox and other browsers?
These are more browser settings than website settings. Yet you can use #page rule. Right now it will work only with Google Chrome (just like you wrote).
#media print {
#page { margin: 0; }
body { margin: 4mm; }
}
About the #page on W3.
For Mozilla Firefox you can try:
<html moznomarginboxes mozdisallowselectionprint>
See this.
Although in many cases this is determined by browser side settings, you might be able to have it behave more as you wish by using:
#media print {
#Header, #Footer { display: none !important; }
}
Source

Hidden div not being hidden on mobile

i'm using a bit of CSS to hide a div off-screen (and then jquery to animate it in) using this :
body {
overflow: hidden;
}
.hide {
position: absolute !important;
left:100vw !important;
}
On desktop, the div is being properly hidden, and no scrolbar appear, but on mobile, it is possible to scroll to the right and see this div.
Browsers not having the issue : Chrope/Edge/Firefox (All latest version as of today) on Win10
Browsers having the issue : Safari iOS (ios 9.x), Dolphin for android (latest) and firefox mobile (also latest)
See code here : https://jsfiddle.net/nfpwccvj/4/
Is there a way to solve this ?
Thanks.
You forgot to close the body }? Or it's just this example with this mistake?
First of all left:100vw is not Cross-Browser supported, best practice for full width is width:100%. If you want to hide something on mobile, you need to use media query.
.hide {
display:block;
}
#media (max-width:480px) {
.hide {
display:none;
}
}

How to remove the drop down arrow in mozilla firefox

How can I remove the drop down arrow normally displayed by FireFox? I have uploaded an image of what I am working with below:
I am using this css:
#-moz-document url-prefix(){
.class select { width: 110%; }
}
.class > select {
-moz-appearance: none !important;
text-indent: 0.01px !important;
text-overflow: "" !important;
}
Please help me to solve this issue.
It is not possible that way. Best way is to fake it and create your own customized <select>.
Have a look at this fiddle I created http://jsfiddle.net/JayKandari/FWLRw/5/
This trick stopped working as of Firefox 30 realeased in 2014-06-10.
You can upvote the bug on Bugzilla for a definitive fix.
Option 1:
Remove the custom styles on Firefox only through a url-prefix media query, like:
#-moz-document url-prefix() {
select {
background-image: none;
}
Option 2:
Here is a solution

#-moz-document url-prefix() not working

I have a webpage and a CSS file for it.My problem is in the CSS file when I am using
#-moz-document url-prefix()
On my computer the CSS rules apply but on anothe computer it does not work(tested with same version of Firefox) which is really odd.
Here is my exact CSS code if that helps in any way:
#-moz-document url-prefix()
{
.SelectStyle {
position:relative;
top:-17px;
}
}
.SelectStyle {
float:right;
}
Am I missing or doing something wrong here?
2018: Firefox support for #-moz-document url-prefix() is being removed
Just in case someone will watch this, firefoz remove the support for #-moz-document url-prefix() in 28 May 2018.
Instead you can use one of the following syntax:
#media screen and (min--moz-device-pixel-ratio:0) {
.selector {
property: value;
}
}
_:-moz-tree-row(hover), .selector{
property: value;
}

A:Hover problem in chrome

I seem to be having a problem with styling my links for chrome, yet it works in safari.
I have my normal styling like this:
a:link {
color:#000;
text-decoration:none;
}
a:hover {
color:#c40000;
} etc....
Now this works on some of the links but it doesn't work on them all, i can only get it to work on the other ones by drilling down in to the div.. example:
.col a:hover {
color:#c40000;
}
I have searched but haven't found any solutions apart from setting styles for every div that has a link in it... which seems stupid.
Thanks a lot.
UPDATE - Just checked on my laptop and this is an OSX issue, works fine on chrome on my vista laptop just not on my iMac ;/
Try using:
a:hover {
color:#c40000 !important;
}
The !important keyword will override any previous styles.