RTL direction in firefox - css

I try to apply support for RTL interfaces(locales) in the options
window of an extension for firefox.
So far, i have tried the following, without success:
In my options.xul (simplified code):
<hbox>
<image id="myImage"/><!-- or image class="myImage" -->
</hbox>
In my css (simplified code):
#myImage:-moz-locale-dir(ltr) { /* or .myImage:-moz-locale-dir(ltr) */
list-style-image: url(chrome://path/image1.png);
}
#myImage:-moz-locale-dir(rtl) { /* or .myImage:-moz-locale-dir(rtl) */
list-style-image: url(chrome://path/image2.png);
}
My interface loads always the image1. For my tests on RTL
direction, i have installed some real RTL locales, like Hebrew
and the "Force RTL" extension. Any idea why the above does not work?
In RTL mode, if i remove the first css entry, the pseudoclass -moz-locale-dir(rtl) does not match, resulting in no image..

Related

Prevent browsers from customizing browse button

How can I prevent browsers from customizing buttons, such as Chrome, for example, does.
I would like to remove that "No f... sen". What is the best way to do that?
The only way you can remove the text part in non-IE10+ browsers to make it transparent:
input[type=file] { color: transparent; }
However, I’d not recommend that, as you will also not be able to see the text when a file has been selected either.
For IE10, you can style it with:
input[type=file]::-ms-value { /* styles here */ }
In WebKit you can style the button itself with:
input[type=file]::-webkit-file-upload-button { /* styles here */ }
While in IE10 you can do the same with:
input[type=file]::-ms-browse { /* styles here */ }
Try to google for "Css style file input" ;)
This will lead to: http://www.quirksmode.org/dom/inputfile.html
Styling of <input type="file" /> is really tricky.

How to style a button, in query mobile, by ID or Class

I have a Submit Button like this:
<input type="submit" data-corners="false" id="code_check_button" tabindex="5" data-rel="external" value="GO">
which - with a custom css theme - outputs this: http://sht.tl/59y3m
Now I would like to use the id (#code_check_button) to style the button with more specificity.
Unfortunately jquerymobile automagically transforms the input type submit in a snippet of code I cannot control: http://sht.tl/cQq
As you can note, the original button ID is useless...
Can you tell me how may I custom style that button (of course, without wrapping it in an extra tag...)?
Thank you!
Numerous ways this can be achieved..
Here are a few examples:
submit {
styles:styles;
}
Not the most compatible in older browsers:
input[type="submit"] {
styles:styles;
}
Then you can target the ID:
#code_check_button {
styles:styles;
}
In your stylesheet add the ID #code_check_button and provide the desired style you want.. see example below :-
#code_check_button {
your desired style properties here...
}
EDIT:
You can use the class of the generated div and style the button accordingly. In this generated snippet you have two elements to style. please find below :-
.ui-btn {
style properties here...
}
.ui-btn .ui-btn-text {
style properties here...
}
CSS
#code_check_button {
color:#000 !important;
width:200px !important;
}
You can see I have added !important tag in all the css properties. This is because of overwritten the jQ mobile default styles.
If something keeps changing your intended css into useless code, this may be a situation where you would resort to simple text (eg. nano for mac or notepad for windows) Web design programs are double edged swords, most of the time the bells and whistles on these programs help make things easier, but sometimes they can make things more complicated. To custom style a button all you have to do is put your id or class selector name in the input tag and then enter the css for it. For example
CSS
#code_check_button { background-image: url(/*desired image url*/);
background-color: /*desired background color*/;
color: /*desired font color*/; }
HTML
<input id="code_check_button" type="submit" name="submit">
Just try it in notepad this time.

jQuery UI Button ignores styles in Firefox

I have a jQuery UI Button that I am trying to style using CSS. Basically all I want is a dark-green background, and a light-green hover color. I noticed that for whatever reason, specifying the desired styles in my CSS file didn't work, so I added some code to apply them programmatically when the button is created:
//initialize the jQuery button with the correct styles
$( "button", ".buttonContainer" ).button();
//add a class that we can apply our styles to (jQuery likes to override styles applied to .ui-button)
$(".buttonContainer .ui-button").addClass("greenButton");
//override button styles (doesn't work when done through stylesheet)
$(".greenButton").css("background", "none !important");
$(".greenButton").css("background-color", "#006600 !important");
$(".greenButton").css("border", "1px solid darkGray !important");
//mouseover handler to change the background color (same reason as above)
$(".greenButton").hover(function() {
//mouse-over handler
$(this).css("background-color", "green !important");
}, function() {
//mouse-out handler
$(this).css("background-color", "#006600 !important");
});
This works fine in Chrome, IE, and Safari, but for some reason Firefox continues showing the default gray button styles (no scripting errors are reported). Interestingly, if I open the web-developer CSS editor, the button gets the correct styles instantly. I have the following in my CSS from back before I realized that the styles would only take if applied programmatically:
.greenButton {
background-color: #006600 ! important;
}
.greenButton:hover {
background-color: green ! important;
}
Anyways, what I see in Firefox by default looks like this:
...when it should look like this (as seen in any other browser):
Any ideas?
In your CSS you are only setting the background-color attribute, while jQuery UI buttons are built with background image, which covers the color. You were correct to set 'background:none' via JS, but adding it to the element's style multiple times via css() messes things up a bit - just inspect the style attribute of your button when active in, e.g. FireBug. It might well be that you hit a minor bug in FireFox. It works for me. In any case, here is working jsFiddle
CSS:
.greenButton {
background: #006600 none ! important;
}
.greenButtonHover {
background: #009900 none ! important;
}
HTML:
<button>Should be green on hover</button>
JS:
$("button").button();
$("button").addClass("greenButton");
$(".greenButton").hover(function() {
$(this).addClass('greenButtonHover');
}, function() {
$(this).removeClass('greenButtonHover');
});

Image not scaling correctly in Firefox

I have a 2550px x 3300px image of a document. I scale it to 901px to 1166px using css. Also used image width/height attributes without css. It looks great in chrome and IE but the image contents look jagged in FF (3.6). Resizing the image itself is not an option (for good quality printing).
Any suggestions?
You could try adding the CSS tag image-rendering: optimizeQuality; although this should be the default. Perhaps you have another tag somewhere which is overriding the default?
From http://articles.tutorboy.com/css/resize-images-in-same-quality.html
If the intention is to get a better quality when the user prints the page you could use separate style sheets for print and screen.
<style>
#media screen
{
#origImage { display:none; }
}
#media print
{
#screenImage { display:none; }
}
</style>
...
<img id="origImage" src="original.jpg" />
<img id="screenImage" src="resized.jpg" />

xml counting elements in a list does not work in firefox

I am writing some CSS to customise the display of an XML document. Basically I want to customise the display of child elements, and render them similar to HTML OL/UL/LI elements.
My XML is structured like this:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<transcription>
<turn>
<speaker>Speaker Name</speaker>
<clause>
text here
</clause>
<clause>
one or more clauses
</clause>
</turn>
</transcription>
My CSS looks like this:
turn {
counter-reset: item;
}
turn clause {
display:list-item;
}
clause {
content: counter(item);
counter-increment: item;
}
I am using this site: http://www.xml.com/lpt/a/401 and basically have a similar document http://www.xml.com/2000/03/29/tutorial/examples/display1.xml, the problem is that the display1.xml does not work in firefox. I do get it working in IE, Safari, Chrome etc.
Can any provide a link, or sultion that would work in firefox, as well as the other browsers?
It looks like there is some bug in the way that firefox implements the display: list-item property, specifically the passing of the counter value. I believe this gives rise to the zeros which show in firefox, but not in chrome.
My workaround is to forget about using 'display: list-item' and instead style the items directly so they appear as a list:
transcription {
counter-reset: item;
}
clause {
display:block;
margin-left:40px;
}
clause:before {
counter-increment: item;
content: counter(item) ". ";
}
this works with the following XML:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="style2.css"?>
<transcription>
<turn>
<speaker>Speaker Name</speaker>
<clause>
text here
</clause>
<clause>
text here
</clause>
<clause>
text here
</clause>
</turn>
let me know how you get on...
AL

Resources