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.
Related
i am using following css code for displaying flash text in my website. Flash Text Displaying in Chrome Browser nicely but not in Mozilla Firefox Browser. if i add this code width:650px; position: absolute; in css, displaying flash text in mozilla firebos nicely but not in chrome browser again. what should i do ??
.flash_text { padding-left: 50px; margin-left: 50px; }
Chrome Browser
Flash News : Training Programme on Personality Development
Mozilla Browser
Flash News :
Training Programme on Personality Development
how to make it proper display in both browser
the following css code working nicely for chrome browser
.flash_text { padding-left: 50px; margin-left: 50px; }
but not to Mozilla Browser
if i add this coding width:650px; position: absolute; displaying nicely but again chrome browser not displaying properly
what to do??
<html>
<head>
<style type="text/css">
#-moz-document url-prefix() {
h1 {
color: red;
}
}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>
All 3 browsers
<style type='text/css'>
/*This will work for chrome */
#categoryBackNextButtons
{
width:490px;
}
/*This will work for firefox*/
#-moz-document url-prefix() {
#categoryBackNextButtons{
width:486px;
}
}
</style>
<!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{
width:486px;
}
</style>
<![endif]-->
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>
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 :/
In my css code i have tose hack that i want to affect IE6/7
#topmenu li a.activa,
#topmenu li a.activa:hover{
*background: url(../nImg/comunHomeSprite.png) no-repeat;
*background-position: right -2169px;
*float:left;
*margin:0;
*padding:0;
*margin-left:10px;
}
Is there a simple way to convert them into IE8 also??
If you must use hacks, then read this: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/
But note that CSS hacks are considered evil.
Conditional comments are a good alternative. They are easy to use, and guaranteed to work properly.
You can't put conditional comments directly into a stylesheet, but what you can do is define a class in your <body> tag using conditional comments, which you can then reference in the CSS:
Write your HTML <body> tag like this:
<!--[if IE 6]> <body class="ie6 ltie7 ltie8 ltie9"> <![endif]-->
<!--[if IE 7]> <body class="ie7 ltie8 ltie9"> <![endif]-->
<!--[if IE 8]> <body class="ie8 ltie9"> <![endif]-->
<!--[if IE 9]> <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
Then in your CSS, you can reference the relevant IE class in your selectors, and you'll have completely valid CSS code:
#topmenu li a.activa:hover {
/*normal styles here*/
}
.ie8 #topmenu li a.activa:hover {
/*IE8-specific styles here*/
}
Hope that helps.
Found this
selector {
prop: value; /* real browsers */
_prop: value; /* ie6 */
*prop: value; /* ie6 ie7 */
prop: value\9; /* ie8 */
}
don't know if this addresses IE9
/* IE8 */ #media \0screen { #topmenu li a.activa, #media \0screen #topmenu li a.activa:hover {
background: url(../nImg/comunHomeSprite.png) no-repeat;
background-position: right -2169px;
float:left;
margin:0;
padding:0;
margin-left:10px;
} }
I prefer this way personally as the attributes are still standard CSS and you need only change them once instead of however many different hacks you have. It can get a bit unwieldy otherwise.
.sample{
height:15px;
width:15px;
margin:10px;
padding:10px;
float:left:
/* this one apply in ie only */
border:1px solid #fff;
/* this one apply in ie only */
}
I would recommend using an entirely separate IE-specific stylesheet, to isolate all of the nasty IE hacks you use. Then, in your HTML, you can use a conditional comment to load that stylesheet for IE only.
HTML
<html>
<head>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/ie-hacks.css">
<![endif]-->
</head>
<body>
<!-- ... --->
</body>
</html>
ie-hacks.css
.sample{
border:1px solid #fff;
}
Use a conditional comment in the head of your HTML document.
<!--[if IE 6]>
.sample {border:1px solid #fff;}
<![endif]-->
check out "conditional CSS comments"
http://www.quirksmode.org/css/condcom.html
You can add !ie after the style declaration, e.g. .sample {border:1px solid #fff !ie;}. This works on IE 6 and 7, but doesn't work in 8, unless you trick it into IE7 compatibility mode using <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > (just make sure this appears before the CSS).
The cleanest solution though, is to include am IE-specific CSS file.
If you need to make more changes, and to keep your pages clean, I would recommend using a separate stylesheet for IE.
<!--[if IE]>
//place link to IE stylesheet here.
<![endif]-->
Then make the change inside of the IE stylesheet.
you can simply do the following give some charcter like # or so before it. Firefox ,chrome and other browsers ignore that line but IE executes that.
Give that line at the end of your css so that it will take care. Most of the developers use this hack for margin, padding issues in IE browser
.sample{
height:15px;
width:15px;
margin:10px;
padding:10px;
float:left:
/* this one apply in ie only */
border:1px solid #fff;
# border:2px solid #fff;
/* this one apply in ie only */ for ie it treats as 2px.
}