I used some CSS hacks in my code and I changed it but now it does not work anymore.
Here is the example
#-moz-document url-prefix() {
h1:before {
top: 102px;
}}
before I used this code (that worked):
#-moz-document url-prefix() {
div#hr-title {
top: 102px;
}}
I dont understand. why does it not work anymore? Thanks in advance
It appears you're trying to use a Gecko-specific (as in Mozilla Firefox) CSS property. There's no reason it shouldn't work in Firefox, and without any further context or example we can only take wild guesses as to why it doesn't work in your setup. Are you trying to use it in a non-Firefox browser?
You may also want to re-evaluate this hack and try to write your CSS such that you don't need to target specific browsers with disparate styles.
Related
I have used this hack to make css changes needed for firefox. It has worked, but when I validated the code I have the below error. Can I use the code below, or is there a better way?
751 Sorry, the at-rule #-moz-document is not implemented.
798 Parse Error }
/*********************************
FIRE FOX HACK TO FIX ERRORS
***********************************/
#-moz-document url-prefix() {
#rectangle {
width: 1030px;
right: -100px;
}
}
Any CSS at-rule that starts with #-moz- is a Gecko-engine-specific rule i.e. it is a Mozilla-specific extension, not a standard rule.
The url-prefix rule here applies the contained style rules to any page whose URL starts with it. When used with no URL argument like #-moz-document url-prefix() it applies to ALL pages. That's effectively a CSS hack used to only target Gecko (Mozilla Firefox). All other browsers will ignore the styles.
Hence, you can perfectly use #-moz- styles to target only the Firefox browser.
See here for a list of other Mozilla-specific extensions.
See here for valid #moz document rules.
In my site I need to give support for IE7. Now everybody knows that styling things in IE7 is not an easy task. People uses conditional statement in HTML to load specific stylesheet for specific version of IE. But in my case I cannot use such conditional statement, since I am in WebCenter Portal application. Here I need to use skin. It is also a CSS file.
So I want to know is there any formula exists by which I can specify a particular css attribute's value for IE7.
Say I have a class:
.filterbox{
padding:12px 0;
margin:12px 0
}
Now this margin is okay for every browser except IE7 (I didn't test it in IE<7). In IE7 if I use margin:0; then the style would be perfect, but it then breaks in other browser.
How can I specify this margin in a same css class for both in IE7 and non-IE7?
Regards.
Only use this hack if you really can't use conditional comments! They are the best solution for solving IE problems. Hacks like this will quickly mess up your CSS and also make it invalid.
So, here is a hack that targets IE7 (of course this comes after your normal definition):
html>body #filterbox {
*margin: 0;
}
from CSS hacks – Targetting IE7 on Thought-After
you can solve it if you seperate the style sheets for IE7 and other browser:
/* other browsers */
.filterbox{
padding:12px 0;
margin:12px 0
}
/* IE 7 */
*:first-child+html .filterbox
{
padding:12px 0;
margin:0;
}
Attention! You have to define the styles for Ie 7 at last, because the browser will overwrite the first definitions. The others will ignore the last ones.
for instance:
I have a min-height on an element:
#myElement
{
min-height: 800px;
min-height: 799px;
}
and in IE I want it to only interpret the min-height:799px;
The best way is to use Conditional Statements and create a stylesheet just for IE. A Google Search will bring back many results but I find this to be very useful:
http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/
If you look at the bottom of that article, it is possible to use hacks (although I don't recommend them) to target specific IE version within the SAME stylesheet.
With FireFox you can use the moz prefix like so:
#-moz-document url-prefix() {
#myElement {
min-height: 800px;
}
}
I'm sure there would be ones for Opera, Safari etc too - just search for browser specific conditional statements in Google :)
The title sums it up. I'll get this out of the way and say I am aware that css hacks are dirty ugly horrible things. Sometimes dirty problems call for dirty solutions though :)
So does anyone know of a css selector hack that works for recent safari versions but is not a general webkit hack ? My site behaves properly in chrome but has a bug in safari. So if anyone knows how i can select an element to only have a certain style in safari let me know!
What I'd do, is sniff the user agent of the browser with javascript, and add a class to the <body> element, based on that. That way you don't have to rely on any kind of hack, you just write your selectors based on the class:
.safari .misbehaving-div {
}
I believe there is already a JS framework that does exactly this, but I don't remember the name.
Ended up using this:
http://rafael.adm.br/css_browser_selector/
This works perfectly
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.myClass{
background: red;
}
/* Safari only override */
::i-block-chrome,.myClass{
background: green;
}
}
Firefox 3.5 now supports the nth-* pseudoclass, which was what I was using to target my css for Safari and Chrome. Now Firefox reads those too, causing minor layout issues. Does anyone know a way to specifically target FF 3.5+?
BODY:nth-of-type(1) #topsearch input[type=submit] /* Safari 3.1+ and Chrome */ {
height:19px
}
How about this, I tested it in Safari 4 and the height is 19px, in Firefox 3.5 the height displays as 39px.
<style>
BODY:nth-of-type(1) #topsearch input[type=submit] /* Safari 3.1+ and Chrome */ { height:19px }
BODY:nth-of-type(1) #topsearch input[type=submit], x:-moz-any-link, x:default { height: 39px; }
</style>
CSS Browser selector lets you write CSS that targets specific browsers, without worrying about hacks. I cannot recommend it highly enough.
On a "religious" note, we shouldn't be using CSS to target any browser. Unfortunately due to IE being waaaay behind on supporting CSS features (and all the bugs) hacks have been applied to target CSS for a given browser.
The Conditional Comments that IE uses... although ugly... do provide a handy mechanism for targeting a browser (and version)... I almost wish other browsers supported this.
I've seen a few sites do this... which is an interesting approach to handling targeting of various browsers.
<head>
<style>
body.safari form input{
/*special styles for Safari*/
}
body.firefox form input{
/*special styles for Firefox*/
}
body.firefox.v3-5 form input{
/*special styles for Firefox 3.5*/
}
</style>
</head>
<body>
<script>
//run code here, that sets the class and or id attribute on the body tag...
</script>
In the long run, they are all hacks... it just depends what kind of hacks you're willing to live with ;-)
Incidentally the "BODY:nth-of-type(1) ..." syntax breaks YUI compressor's ability to minify CSS. Instead I use "body:first-of-type ...".
My approach using a PHP class to detect os, browser and browser version. You can target any version of almost any browser on any operating system.
using http://rafael.adm.br/css_browser_selector/
just substitute this part:
is('firefox/2')?g+'
ff2':is('firefox/3')?g+' ff3'
for this part:
is('firefox/2')?g+'
ff2':is('firefox/3.5')?g+'
ff3_5':is('firefox/3')?g+' ff3'
that should do the trick
PS: if you want to also catch other 3.x versions you might want to add:
is('firefox/2')?g+'
ff2':is('firefox/3.5')?g+'
ff3_5':is('firefox/3.6')?g+'
ff3_5':is('firefox/3.8')?g+'
ff3_5':is('firefox/3')?g+' ff3'
This works:
#media screen and (-webkit-min-device-pixel-ratio:0){
#topsearch input[type=submit] { height:19px; }
}}
That targets newer WebKit browsers, and not Gecko or Trident.
A lot has changed in the last few years. For a Firefox 3.5+ hack, here is one I created for that purpose:
/* Firefox 3.5 and newer */
_:-moz-handler-blocked, :root .selector { property:value; }
To test it you can see these live along with many others for different versions of browser at my live CSS hacks test site here: http://browserstrangeness.bitbucket.org/css_hacks.html#firefox
Enjoy!