Is it possible to have only one CSS property different in Chrome in comparison to Firefox?
A certain element has absolute positioning and is displaying correctly in Firefox but in Chrome it appears 2 pixels lower.
To target just Firefox use this:
<style type="text/css">
#-moz-document url-prefix() {
h1 {
color: red;
}
}
</style>
<h1>This should be red in FF</h1>
I got this answer from another stack overflow question:
Targeting only Firefox with CSS
You can test this by opening the following jsFiddle in both browsers: jsFiddle
Related
This answer says we can target Firefox using the following CSS:
#-moz-document url-prefix() {
h1 {
color: red;
}
}
<h1>This should be red in FF</h1>
I want to apply a CSS rule to all browsers except gecko/Firefox, as the CSS rule doesn't display properly in Firefox.
How do I use CSS to target everything except Firefox?
Thanks.
I don't want to recreate a file just for that specific line of code, I simply want to ignore that css line if I am in Internet Explorer.
I would also like to avoid putting inline css.
Is it possible?
.container {
height: 100px; // to apply only in Chrome, Firefox, Safari, etc.
}
Yes, you can use a conditional comment.
<!--[if !IE]>-->
<style>
.container {
height: 100px; /* only in Chrome, Firefox, Safari, etc */
}
</style>
<!--<![endif]-->
Notice the "not" operator ! so it will apply to browsers that are not IE. See this link for more.
The height of the blue bar in Safari and Chrome matches but in Firefox it is smaller. I would like to make them equal.
You could use a css hack for firefox:
#-moz-document url-prefix() {
header {
height:50px; /* or whatever fits best there */
}
}
This should only be interpreted by Firefox, while Opera, Chrome and Safari will use the default header {...} definition
Here is a simple code sample from a language switch in HTML. The CSS should separate the span elements and display a dot in between:
<html>
<head>
<style type="text/css">
.languageSwitch span:before {
content: "•";
padding: 0 4px;
font-weight: normal;
}
.languageSwitch span:first-child:before {
content: "";
padding: 0;
}
.languageSwitch .current {
font-weight: bold;
}
</style>
</head>
<body>
<div class="languageSwitch">
<span>Deutsch</span>
<span class="current">English</span>
<span>français</span>
</div>
</body>
</html>
This works fine in Firefox, but Internet Explorer 9¹ simply ignores the :before directive. In the “developers tools” CSS dialog the “content” property does not show up either. I have searched all over the web: There are pseudo-element issues IE 8, but IE 9 should know them, and this is “old” CSS 2.
Does someone have a clue why this fails (bug in IE 9?) or how the syntax must look like?
1) To be clear: Version 9.0.8112.16421 / “Updateversion” 9.0.6 (KB2675157)
Check the doctype. On jsfiddle, this works fine in IE9: http://jsfiddle.net/4nGW9/. IE8 should handle this as well.
I can see the dots fine in IE 9. Exact version as yours. Only difference in my code is a valid HTML5 doctype at the top.
Without a valid doctype IE could be switching its rendering for your page to quirks mode, or a rendering mode for IE8/IE7 which would not handle the pseudo selectors like first-child or generated content.
See your page here in browserling.
Is there a bug for IE7 (and below) with the H1,H2,H3 tags not taking CSS styles?
My styling works for IE8, FF, Chrome. Somehow IE7 is not taking the style into account.
This is my H1 style:
H1 {
font-weight:normal;
display:inline;
font-size:inherit;
}
All other browser works fine other than IE7 (and below).
Please help anyone?
W3Schools has the answer on its CSS font-size property page:
The font-size property is supported in all major browsers.
The value "inherit" is not supported in IE7 and earlier
Here's the computed h1 style in IE7. Notice that it's missing its font-size attribute.
You end up with:
a font size of 36px, inherited from div button.
a font weight:inherit, which means nothing, as this is also not supported by IE7.
display inline from your page's inline h1 declaration
This works for me in IE7.
http://jsfiddle.net/yV5uV/