I'm working on styling an e-commerce Gekosale. Unfortunately I cannot alter the existing css files (they are overwritten when user saves some settings in the admin area). Those existing css files contain IE specific styles ie.
progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
I don't know how to alter them from my own file. I know how to alter every "normal" style
.class123
{
color: red;
}
can be easily altered with:
.class123
{
color: blue !important;
}
Can anyone tell me how to turn off IE gradients and others alike from CSS?
progid:DXImageTransform.Microsoft.gradient(enabled = false) !important;
should do the trick. You can also try :
filter: none;
write this in your CSS -
*{ filter: none !important; }
You can do something like that in your head tag:
<!--[if lt IE 9]>
<style type="text/css">
.your-class {
filter: none;
}
</style>
Related
I have the following:
<!--[if IE]>
<style>
iframe {
margin-top: 0 !important;
display: none;
}
.c-position {
margin-top: 20px !important;
}
br {
display: none;
}
</style>
<![endif]-->
But when I see my site in IE10 The CSS within the IE conditional statements are not being applied (e.g. the iframe should disappear).
I even tied this:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
So IE10 recognizes the conditional statements.
Why am I doing wrong?
Perhaps you can try some jQuery for ie10 like this:
if ($.browser.msie && $.browser.version == 10) {
$("html").addClass("ie10");
}
But surely it is not replacement for conditional comments!
IE10 does not support conditional comments.
Source quote:
Support for conditional comments has been removed in Internet Explorer
10 standards and quirks modes for improved interoperability and
compliance with HTML5. This means that Conditional Comments are now
treated as regular comments, just like in other browsers.
I'm trying to remove the 8px margin from the body tag.
I've tried (not all at once)
* { padding:0; margin:0; }
and
html, body { padding:0; margin:0 !important; }
and
body { margin:-8px; }
and even
<body style="margin:0">
The last one works, but only if I add the style attrib using Firebug; if it's in the original HTML, it gets ignored.
I'm at my wit's end.
Edit: facepalm I figured it out; I'd changed it to a cfm so I could easily call browser-specific styles. Thank you all for your help.
Include a reset stylesheet instead, this way you will reset all of the default values equally in all browsers.
http://meyerweb.com/eric/tools/css/reset/
All you need is:
body { margin: 0; padding: 0; }
The padding is not needed for Firefox, but for Opera, which uses padding instead of margin for the default.
Demo: http://jsfiddle.net/k3j8Y/
body{ margin: 0;}
works ok for me :P
Include your stylesheet correctly
As your style is not appearing in FireBug's CSS rule stack, your CSS is probably not linked correctly. Ensure the stylesheet is in your head tag like so:
<head>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
I'm using Compass to create webpage CSS styles. I wanna use CSS3 features like border-radius and linear-gradient but Internet Explorer refuses to cooperate.
I coded it this way:
$pie-behavior: url("../stylesheets/PIE.htc");
// I've tried 'stylesheets/PIE.htc' and '/pink/stylesheets/PIE.htc' (all webpage is in folder 'pink').
$pie-base-class: pie-base;
.pie-base {
#include pie-element(relative);
}
body {
#include pie;
#include background(
image-url('header_background.png') no-repeat top center,
linear-gradient(top center,
$bg-gradient-start, $bg-gradient-stop
) no-repeat,
image-url('wavy-white.jpg')
);
}
What's wrong with it?
My test methodology would be:
1/ Is PIE.htc found by IE? PIE documentation states that:
Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.
In order to verify if the directory indicated in your Compass file is OK, you can add an image in the same directory and try to display it as an HTML image, something like:
<body><div>
<img src="stylesheets/yourtestimage.png" alt="If you can read this, it failed" width="400" height="400">
</div></body>
It should then be clear if this directory is the good one or not :)
2/ Then try some simple CSS rule with no Compass code, in order to avoid problems that could be caused by Compass and not involving PIE. Example :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>PIE and border-radius</title>
<style type="text/css">
p {
width: 400px;
height: 100px;
line-height: 100px;
vertical-align: middle;
text-align: center;
color: yellow;
background-color: darkgreen;
border-radius: 5px 6px 7px 8px;
pie-border-radius: 30px; /* shouldn't be necessary but just in case ... Please test with and without this prefixed property */
behavior: url(***/PIE.htc);
</style>
</head>
<body>
<p>this paragraph should be rounded in lesser IE</p>
</body>
</html>
3/ Add other CSS3 instructions one by one, still in CSS with no Compass code. background won't be parsed by PIE, you must use -pie-background (not sure if your Compass generates that?).
First a simple linear gradient with no multiple background:
p {
/* (...) */
-pie-background: linear-gradient(#F44, #400); /*PIE*/
/* (...) */
}
Then multiple background:
p {
/* (...) */
-pie-background: url(***/small_or_transparent_image1.png) left top no-repeat,
url(***/repeating_image2.png) left top repeat,
darkgreen;
/* (...) */
}
and finally a mix:
p {
/* (...) */
-pie-background: url(***/small_or_transparent_image1.png) left top no-repeat,
linear-gradient(#F44, #400),
darkgreen;
/* (...) */
}
BTW, is your multibackground successfully displayed on Firefox and webkit browsers with -moz-linear-gradient and so on? The generator from Colorzilla can help you with all this prefixes (and for the next step with Compass, it happens to support its format via "switch to scss", in case you didn't already know).
4/ Then add variables and scss code in your Compass file. I can't help you there, I use LESS or plain CSS. You should check the generated CSS against your Compass code: does the latter generate the CSS you intended it to generate?
I have found that cssPIE is tricky to work with. When I set it up, I used the js implementation instead of the htc implementation:
<!--[if lte IE 8 ]>
<script src="/js/libs/PIE.js" type="text/javascript"></script>
<![endif]-->
Here is my real world example: http://www2.highpoint.edu/
Have you tried adding a proper MIME type in your .htaccess ?
Like so :
AddType text/x-component htc
I've found that cssPIE don't understand rgba values so my idea of making gradient from colour to transparent shouldn't work :/ Also IE don't understand inline SVG in CSS styles so even that feature isn't working. So only way is to make another style for IE and delete gradients from all gradiented elements :/
I have a background that I would like to change depending on which browser the user if using. If the user is using IE7 or IE8 I would like to change the background to a totally different image.
Can this be achieved by editing the CSS below as it seems pointless to create a new stylesheet for one item.
Thanks in advance for any help.
.navigation{
background: url("images/navigation.png") no-repeat;
}
Pretty sure there's no way to do it without extra markup.
You could just do this in the HTML:
<!--[if gte IE7]>
<style type="text/css">
.navigation{
background: url("images/navigation.png") no-repeat;
}
</style>
<![endif]-->
Isn't exactly the sexiest bit of code I've ever written, but it does the job without adding a whole separate stylesheet file. Though you might as well give in and make an iehacks.css file.
This code should only select the background if you're using IE 7 or greater. Other ways of using conditional HTML can be found at http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/.
<!--[if gte IE 7]>
<style type="text/css">
.navigation{
background: url("images/navigation.png") no-repeat;
}
</style>
<![endif]-->
<body onload="setBG()">
<h1>Welcome to my page</h1>
<script>
function setBG(){
document.body.style.backgroundImage=((!!document.all || window.opera) ? 'w3bg.jpg : 'iebg.jpg') // delete the second ! and switch the jpgs
return
}
</script>
This means if the browser does not support document.all (which is supported only in IE4+) or is Opera then display the background iamge w3bg.jpg. If the browser does support document.all then display the background image iebg.jpg.
There is but keep in mind this is not valid CSS. Your best bet is to create the second stylesheet with a conditional statement.
IE7 will interpret this
*+html .navigation { background: url("images/navigation.png") no-repeat; }
IE8 will interpret this
#media \0screen {
.navigation { background: url("images/navigation2.png") no-repeat; }
}
.navigation{
background: url("images/navigation.png") no-repeat;
/*all browsers*/
}
*+html .navigation {
background: url("images/navigation_onlyIE7.png") no-repeat;
/*only IE7 valid css*/
}
#media \0screen { .navigation
background: url("images/navigation_onlyIE8.png") no-repeat;
/*only IE8 NOT valid css*/
}
I would probably use IE CSS hacks that target the element: http://paulirish.com/2009/browser-specific-css-hacks/. It eliminates the need to create a new style sheet.
This question already has answers here:
Detecting IE version using CSS Capability/Feature Detection
(18 answers)
Closed 5 months ago.
Friends, please help me in defining specific css rule for IE9?
For example like this
/* IE 6 fix */
* html .twit-post .delete_note a { background-position-y: 2px; }
* html .twit-post .delete_note a:hover { background-position-y: -14px; }
You can prepend the CSS style with
:root
to make it IE9-specific, like this:
:root #element { color:pink \0/IE9; } /* IE9 */
Use IE conditional comments:
<!--[if ie 9]>
your stuff here
<![endif]-->
\9 is a "CSS hack" specific to Internet Explorer.
This simply means that the one specific line of CSS ending with a \9;
In your example,
If your CSS looked like this...
html .twit-post .delete_note a
{
background-position-y: 2px\9;
}
html .twit-post .delete_note a:hover
{
background-position-y: -14px\9;
}
The result would be background-position-y: -14px; in IE 9
I think you can do the same as if you want to write specific code for IE6 but say IE9 instead :)
<!--[if IE 9]>
Special instructions for IE 9 here
<![endif]-->
use conditional CSS:
(place the code above the <head> on your html, and IE9 will read that extra CSS file)
<!--[if (gte IE 9)|!(IE)]><!-->
place the link to the CSS file here
<![endif]-->
This means the approach is with a new CSS file rather than a hack in the classes, this guarantees the CSS are valid.
I found that in some cases using negative values (when using a compiler to compile LESS files) using:
margin-right: -15px\9; /* This fails */
margin-right: ~"-18px\9"; /* This passes */
You shouldn't need to target IE9. It is capable of handling modern css and shouldn't be hacked. This is an outdated method of developing.