I have to apply the border-radius CSS property to a button, but only when the browser is not Internet Explorer 9. Otherwise I want to use the background-image property. I tried to apply the background-image for IE9 using conditional comments, but it is not working (the border-radius property from the "general" CSS is being applied to IE9 also, instead of the background-image).
How do I change this to make it apply the desired CSS according to the browser version?
/*For IE9*/
<!--[if lte IE 9]>
.PopupBtn
{
background-image: url("../Images/new-btn.png");
height: 28px;
width: 99px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
cursor: pointer;
}
<![endif]-->
/*Style.css(general)*/
.PopupBtn
{
-moz-box-shadow: inset 0px 2px 1px 0px #0d0d0d;
-webkit-box-shadow:inset 0px 2px 1px 0px #0d0d0d;
box-shadow:inset 0px 2px 1px 0px #0d0d0d;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fffcff), color-stop(1, #000000));
background:-moz-linear-gradient(center top, #fffcff 5%, #000000 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcff', endColorstr='#000000');
background-color:#fffcff;
-moz-border-radius:22px;
-webkit-border-radius:22px;
border-radius:22px;
display:inline-block;
color:#fcfcfc;
font:bold 13px trebuchet ms;
text-decoration:none;
text-shadow:1px 0px 0px #000000;
min-width:90px;
height:30px;
cursor:pointer;
border-style:none;
}
Better use jQuery for this.
if ($.browser.msie && parseInt($.browser.version, 10) == 9)
$('.PopupBtn').css({'background-image':'url(../Images/new-btn.png)','height':'28px','width':'99px'});
See http://api.jquery.com/css/ The advantage is that you not only have to use less code, but you can adjust everything, not just css. This is only just an example, you have to fill in the rest :)
IE's conditional comments are actually html comments, so you cant have them in a css file they have to be in a webpage. Somewhere in you webpage you'll have
<!--[if lte IE 9]>
<style>
.PopupBtn
{
background-image: url("../Images/new-btn.png");
height: 28px;
width: 99px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
cursor: pointer;
}
</style>
<![endif]-->
or even an external style sheet link betwwen the comments
May be it will use full for You:
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"> </script>
use this java script in head tag.
You need to place the Internet Explorer Conditional Comments on the actual web page and not in the CSS file.
Avoid adding inline CSS code. Instead, put them in their own CSS file. It's a good idea to separate your CSS files. Make one for the IE "hacks" and another for your regular stylesheet.
So, for example, put your IE specific CSS in ie.css file:
ie.css:
.PopupBtn {
background-image: url("../Images/new-btn.png");
height: 28px;
width: 99px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
cursor: pointer;
}
Place your regular stylesheet in style.css.
In the <head> tag put:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- [if lte IE 9]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->
</head>
Note:
IE will still apply any styles from your regular style sheet that it understands. So,
make sure the Conditional Comments and ie.css style sheet is applied after the regular style sheet. This way, it can override any styles you don't want.
Make sure you explicitly override any styles you don't want in ie.css, otherwise, it will "bleed" through and show up in IE
See my JSFiddle link below. If you run it in IE 9, you'll see a green gradient with the word "Hello" in red. If you run it in any other browser, you should see a black gradient with the word "Hello" in white.
http://jsfiddle.net/mKrRL/
Related
I'm trying to build a website but I've realised that the text stroke is a different weight between Chrome and Safari. On Chrome it's thick and on Safari it's really thin:
How can I fix this so that they look the same on both browsers? When I try 1px onwards the stroke in Chrome is too thick.
#media screen, (max-width: 1920px) and {
h1 { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 80px;
font-style: normal;
font-variant: normal;
line-height: 26.4px;
color: transparent;
text-align: center;
margin-top: 120px;
width: 100%;
position: absolute;
}
#supports(-webkit-text-stroke: 0.1px white){
h1{
color: transparent;
-webkit-text-stroke: 0.1px white;
text-shadow: 1px 1px #00FFD8, 1px 1px #00FFD8, 3px 3px #00FFD8;
}
h1 a{color: transparent;
-webkit-text-stroke: 0.1px white;
text-shadow: 2px 2px #00FFD8, 1px 1px #00FFD8, 3px 3px #00FFD8;
text-decoration: none;
transition: letter-spacing 1s ease,
text-shadow 0.5s ease;
}
h1 a:hover {
color: transparent;
-webkit-text-stroke: 0.1px white;
text-shadow: 1px 1px #9700FF, 1px 1px #9700FF, 6px 6px #9700FF;
transition: letter-spacing 1s ease,
text-shadow 0.5s ease;
letter-spacing: 8px;
}
}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1>
hello
</h1>
</body>
</html>
Without being able to mess with your code (I'm not going to retype it), I think the issue is not specifically related to -webkit-text-stroke but the fact that you're specifying a line width of less than a full pixel.
Chrome and Safari support subpixel rendering/smoothing differently as does your monitor's ability to display less than a full pixel.
Try setting the stroke width to 1px and I'll bet they look the same.
The other issue is that text-stroke isn't part of the CSS spec so it's going to be supported differently in each instance. Also not all browsers (notably IE & Edge) support text-stroke so you can't count on it being available.
A better cross-browser solution would be to use multiple text-shadows to get the effect you're looking for.
Okay so after playing around with this for a while I think it's directly related to font-weight on Chrome, I had to manually set an entry for font-weight to 500 or less for it to appear accurately on Chrome as it does on other browsers. I hope this helps!
According to MDN about: -webkit-text-stroke
Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Try using text-shadow instead as #Bryce said:
Using multiple text-shadow values can achieve the same effect: (Credit)
.text-stroke {
color: white;
-webkit-text-stroke: 1px black;
}
.text-shadow {
font-weight: bolder;
color: white;
text-shadow:
-1px -1px 0 black,
-1px 1px 0 black,
1px -1px 0 black,
1px 1px 0 black;
}
<p>Text Stroke Style: (will change based on browser)</p>
<h1 class='text-stroke'>1234567890</h1>
<p>Text-shadow Style:</p>
<h1 class='text-shadow'>1234567890</h1>
I have an odd visual bug in IE11 as you can see in image here >
(source: jonwallacedesign.biz)
See the odd effect on corners of the white "WHY USE US" li button....
The combination of border-radius, background-image and border: 1px solid #colour seems to be creating this odd horrid effect.
Anyone know of a solution to fix?
CSS of the LI is:
background-image: url("../images/core/primnavItemBG_sprite.png");
background-position: 0 0;
border: 1px solid #FFFFFF;
border-radius: 6px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
color: #2062AF;
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-size: 14px;
margin-right: 5px;
outline: medium none;
overflow: hidden;
text-decoration: none;
text-transform: uppercase;
This worked for me. I am not sure if you have the same problem as me.
I was getting slight white borer just around the corners.
background-clip: padding-box;
Please try this inside conditional CSS block.
background-image: url("../images/core/primnavItemBG_sprite.png");
border: 1px solid #FFFFFF; /*In Border color use color same as background color otherwise use border-size:0*/
box-shadow: none;
outline: none;
hope this will fix your issue
Solution:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
</style>
Instead of a background-image why not use http://css3buttongenerator.com/ to recreate this button and save on any additional requests and loading time. I was able to re-create your button and your gradient just fine in IE 11 using the above generator. Picture attached;
Button image
Adding a solid BG colour to IE10 + fixed this... seems like an IE bug trying to render CSS3 bits...
You turn on IE10 mode by adding <meta http-equiv="X-UA-Compatible" content="IE=10" /> to head section and will work normally.
I've added googles translate app to a site using the following
code
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?
cb=googleTranslateElementInit"></script>
The app seems to work for a couple of languages. When translating to other
languages all the css is removed.
I'm keeping an eye on specific elements (such as a li in the header, or a div), and then running the translation. I can see that neither the header scripts (ie the css), or the elements are being changed by the app. It's just that the styles are no long applied (firebug tells me 'This element has no style rules')
The problem occurs on Firefox but not Chrome or Opera.
Any ideas what's going on here?
In case anyone else has the same issue -
The php that compresses the css files was adding a title to the scripts so
<link title="Default" media="screen" type="text/css" href="/modules/pd_smoothgallery/jd.gallery.css" rel="stylesheet">
was being changed to
<link title="Par défaut" media="screen" type="text/css" href="/modules/pd_smoothgallery/jd.gallery.css" rel="stylesheet">
I removed the title and the translation works fine for all languages.
(not sure why firebug wasn't highlighting this change, but it wasn't).
#google_translate_element span{
color:white!important;
font-size:15px;
border-left:1px solid transparent!important;
line-height: 22px;
}
.goog-te-gadget-simple {
background-color: #5191CD !important;
border-left: 1px solid transparent !important;
border-top: 1px solid transparent !important;
border-bottom: 1px solid transparent!important;
border-right: 1px solid transparent !important;
}
.goog-te-gadget-icon {
margin-left: 0px;
margin-right: 0px;
width: 0px!important;
height: 0px !important;
border: none;
vertical-align: middle;
}
I have two css files included on my page.
<link rel="stylesheet" href="/css/screen.css" />
<!--[if IE 8]>
<link rel="stylesheet" href="/css/ie8.css"/>
<![endif]-->
Now in screen.css I have a style like this
ul.treelayout{
list-style: none;
margin: 0px 0px 10px 0px;
background-color: #fff;
padding: 3px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #007b40;
}
I would like to remove the radius related styles in the ie.css such that the result style of ul.treelayout in IE is
ul.treelayout{
list-style: none;
margin: 0px 0px 10px 0px;
background-color: #fff;
padding: 3px;
border: 1px solid #007b40;
}
It seems that due to the fact that the styles cascade simply writing the class without the styles in ie.css doesn't do the trick. Any ideas?
Thanks
Regards
Gabriel
Ok mine is not to reason why ;) - but you can do this the other way around and only give the border-radius styles to NON-IE browsers.. in fact with a combination of Conditional comments you can give the border radius styles to IE9 and other browsers, I don't know which script you mean is clashing but maybe you can also just give the script to the browsers that need it?
here's an example (not using border-radius but hopefully you may get the idea..)
<style type="text/css" media="screen">
div {
padding: 40px;
color: #fff;
}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
div {background: #00f}
</style>
<![endif]-->
<!--[if (!IE)|(gt IE 7)]><!-->
<style type="text/css" media="screen">
div {background: #f00}
</style>
<!--<![endif]-->
HTML:
<div>
<p>background is red in non-IE browsers,and IE gt 7 - but background is blue in other IE's</p>
</div>
About the above conditional comments..
the first is a regular style
the second is a "traditional" hidden conditional comment which Only IE sees
the third is a revealed comment which all browsers see but IE still reads the arguments
you would put the common rules in a normal sheet, and the border radius rules inside a sheet in the third style comment
you can change the argument of the third comment it's basically saying if NOT IE OR is gt IE7
More Information on arguments: About Conditional Comments
ul.treelayout{
list-style: none;
margin: 0px 0px 10px 0px;
background-color: #fff;
padding: 3px;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border: 1px solid #007b40;
}
ta da.
Due to the way the stylesheet will cascade, you only need to have this in your ie8.css:
ul.treelayout {border-radius: 0;}
This will keep all of the styles the same, except it will remove the IE border radius. If you want further IE changes you can add them in as you like.
When overwriting a stylesheet that is always included, you only need to add styles you want to overwrite or have show up in the browser you're customising for. This makes the css file smaller, which is better for your users.
i wanted to know if i can change the background color of the of hovering option using css only. I am not bothered about browser compatibility. But give me a solution that works across most browser.
I think the best solution first is to know that you DON'T have to expect that you page look the same in all browser. A good clean solution is use the power of each browser to do this. for example build a css for chrome/safari, another for IE and a last one for Firefox, you can do it as the follow example:
and I think use JAVASCRIPT for this purpose is NOT the best solution.
for web-kit safari/chrome
select{
-webkit-appearance: button;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(../img/forms/arrow_blue.png),
-webkit-linear-gradient(#E1E1E1, #FFF 30%, #FFF);
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #CCC;
color: #999;
font-size: 90%;
font-family:Comfortaa, Arial, Helvetica, sans-serif;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
height:40px;
}
For firefox:
#-moz-document url-prefix() {
select{
border-radius: 5px;
background-image: url(../img/forms/arrow_blue.png),
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #CCC;
color: #999;
font-size: 90%;
font-family:Comfortaa, Arial, Helvetica, sans-serif;
margin: 0;
height:auto;
padding:10px;
}
}
And you can target each IE in each version as example
<!-- cause not every body is pretty -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="frontend/css/ie8-and-down.css" />
<![endif]-->
select{ border:1px solid #EEE;
width:auto !important;
height:35px !important;
padding:5px !important;
margin:5px !important;
line-height:1 !important;
}
I thinks in this way you will have nice dropdowns in all browser, while only safari/Chrome will be look exactly as you like, the other ones will behave as the user expect and you will not have to use javascript
Hmmm... you can use the :hover pseudo class to change the background-color of a select element but I just tried:
option:hover {
background-color: #F00;
}
with no result. However:
select:hover option {
background-color: #F00;
}
will change the background color of options when you hover of the select menu but as far as I can tell using option:hover itself won't work
The select tag depends on the OS you're on,
and you can't style it the way you want
the best solution is to use jquery to replace the select with a styled list (editable with css)
take a look:
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
is this the sort of thing your after?
select:hover { background-color: red; }
I know this is an old question, but since I had tryed to implement this in the past and although I came to the conclusion that is not worth it most of the time, I realize sometimes it really affects the design idea (i'm not a designer but they get very frustrated about details like that), I thought I would share a resource I found that actually suggests ways to work around the fact that it is very difficult (if not impossible) to get a consistent enough look and feel by just applying css to the tag. Hope it helps somebody.
The html select tag styling challenge