My button works in all other browsers except IE. I thought the 'border-radius' was suppose to work for IE?
.simpleHelp {
border-top: 1px solid #ffffff;
background: #910330;
background: -webkit-gradient(linear, left top, left bottom, from(#790228),
to(#910330));
background: -webkit-linear-gradient(top, #790228, #910330);
background: -moz-linear-gradient(top, #790228, #910330);
background: -ms-linear-gradient(top, #790228, #910330);
background: -o-linear-gradient(top, #790228, #910330);
padding: 10.5px 21px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 17px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
}
Border-radius (and, in fact, any CSS3) only works on IE9+, however, you can "retrofit" CSS3 stuff onto older versions of IE9 with a fun little library called CSS3PIE. If you really need borders and shadows in IE, then CSS3PIE is the way to go. However, letting older browsers gracefully degrade is okay to do, too.
I'm afraid that border-radius only works in IE9 and up.
http://www.findmebyip.com/litmus/
Related
i have color issue with css. when i put HREF in link the font color changes to grey but there is no grey color in its class in css.
The code is below.
HTML
<a class="css_button_addHRS" >ADD HOURS</a>
When i add href in the tag it changes the font color of ADD HOURS to grey it should be white. Any Idea? There is no other grey A in css.
CSS
.css_button_addHRS {
font-size: 14px;
font-family: Arial;
font-weight: bold;
text-decoration: inherit;
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
border: 1px solid #d02718;
padding: 9px 18px;
text-shadow: 1px 1px 0px #810E05;
-webkit-box-shadow: inset 1px 1px 0px 0px #f5978e;
-moz-box-shadow: inset 1px 1px 0px 0px #f5978e;
box-shadow: inset 1px 1px 0px 0px #f5978e;
cursor: pointer;
color: #ffffff;
display: inline-block;
background: -webkit-linear-gradient(90deg, #c62d1f 5%, #f24537 100%);
background: -moz-linear-gradient(90deg, #c62d1f 5%, #f24537 100%);
background: -ms-linear-gradient(90deg, #c62d1f 5%, #f24537 100%);
background: linear-gradient(180deg, #f24537 5%, #c62d1f 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f24537",endColorstr="#c62d1f");
}
.css_button_addHRS:hover {
background: -webkit-linear-gradient(90deg, #f24537 5%, #c62d1f 100%);
background: -moz-linear-gradient(90deg, #f24537 5%, #c62d1f 100%);
background: -ms-linear-gradient(90deg, #f24537 5%, #c62d1f 100%);
background: linear-gradient(180deg, #c62d1f 5%, #f24537 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c62d1f",endColorstr="#f24537");
text-decoration: none;
color: #ffffff;
}
.css_button_addHRS:active {
position: relative;
top: 1px;
color: #ffffff;
}
this css creates a button rounded corner in red color with white font color. Help will be appreciated.
You have to specify This. The page links will automatically change to default color of links, so you have to add this:
<style type="text/css">
a:link,
a:visited,
a:hover,
a:active{
color: #FFF;
text-decoration: none;
}
</style>
What editor do you use to code?
It sounds like it's default styling of a :visited link.
You should add this to fix it:
.css_button_addHRS:visited {
color: #ffffff;
}
The link, visited and active colors, if not specified, take the defaults values set by the browser, and it varies across browsers. Since you already specified a color for .css_button_addHRS class, the grey color surely appears when you have visited the link,so you have to specify a color for visited links, e.g:
.css_button_addHRS:visited{
color: #ffffff;
}
Hope it's useful!
Heyy there,
I have this text field I would like it to have a simpler border, but the left and top borders have a different(darker) color than the one I'm assigning them to be. I have been trying alot of different attributes in my CSS file.
this is the image
this is my css:
div#search_area input[type=text]{
width: 179px;
height: 23px;
background: -webkit-gradient(linear, left top, left bottom, from (#ffffff), to (#f5f5f5));
background: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
background: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background: -ms-linear-gradient(top, #ffffff, #f5f5f5);
background: -o-linear-gradient(top, #ffffff, #f5f5f5);
outline: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-width: 1px;
border-color: rgb(228,229,228);
color: rgb(120,123,122);
font-size: 13px;
font-family: Arial, serif;
text-decoration: none;
vertical-align: middle;
padding: 0px 0px 0px 0px;
}
you need to also add
border-style: solid;
or dashed, or dotted, whichever one you want
This is because your border-style is most likely set to inset. If you change it to a different style, it won't create the "3D" effect that is causing the two different colors. See here for more details on border-style https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
I am using a webfont (poly) on my page on several buttons. In firefox, everything appears right, but in Chrome the first button's font seems bolder than the others despite using the same CSS3 code (unless I'm missing a typo).
http://ashgavs.cloudant.com/site/_design/AshGavsCouch/betcha/index.html
thats the page, look at Login vs. Login with facebook or Sign up. It's not the length of the text that's affecting the font weight, tested that already.
here's the CSS for the first and second buttons:
#login{
position: absolute;
top: 137px;
left: 19px;
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid #aff797;
background: #369942;
background: -webkit-gradient(linear, left top, left bottom, from(#27ca3d), to(#369942));
background: -webkit-linear-gradient(top, #27ca3d, #369942);
background: -moz-linear-gradient(top, #27ca3d, #369942);
background: -ms-linear-gradient(top, #27ca3d, #369942);
background: -o-linear-gradient(top, #27ca3d, #369942);
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 5px;
-webkit-box-shadow: rgba(0,0,0,.7) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,.7) 0 1px 0;
box-shadow: rgba(0,0,0,.7) 0 1px 0;
text-shadow: 0 1px 0 #91d99a;
color: #0e5817;
font-size: 24px;
font-family: 'Poly', serif;
text-decoration: none;
vertical-align: center;
width: 229px;
}
#loginFB{
position: absolute;
top: 196px;
left: 19px;
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid #65a9d7;
background: #3e779d;
background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
background: -moz-linear-gradient(top, #65a9d7, #3e779d);
background: -ms-linear-gradient(top, #65a9d7, #3e779d);
background: -o-linear-gradient(top, #65a9d7, #3e779d);
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 5px;
-webkit-box-shadow: rgba(0,0,0,.7) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,.7) 0 1px 0;
box-shadow: rgba(0,0,0,.7) 0 1px 0;
text-shadow: 0 1px 0 #7ca9c7;
color: #0e3458;
font-size: 24px;
font-family: 'Poly', serif;
text-decoration: none;
vertical-align: center;
width: 229px;
}
Both buttons inherit properties from the same divs, so that can't be the issue either. Thanks.
--Ashley
It may be with your particular browser. Regardless, a very good thing to do (pretty much a requirement these days) is to add a CSS Reset before your own CSS definitions. Just Google "CSS Reset". You will see a lot of results. Basically it removes browser specific formatting so that your CSS is the only effective formatting on the page. No unexpected changes or additions from the browser. Often doing this will solve the kinds of issues you describe. You might want to research the idiosyncrasies of your browser, but to save time just try the reset first.
To implement the border-radius in IE8 I use border-radius.htc
The block in which to work correctly realzovat border-radius:
.mc-button
{
-moz-transition: all 0.218s ease 0s;
-moz-user-select: none;
background-color: #CBCBCB;
background-image: -moz-linear-gradient(center top , #CBCBCB, #DCDCDC);
border: 1px solid #DCDCDC;
color: #FFFFFF;
cursor: default;
display: inline-block;
font-size: 11px;
font-weight: bold;
height: 29px;
line-height: 29px;
min-width: 70px;
padding: 0 8px !important;
text-align: center;
overflow: visible;
font-family: inherit;
font-size: inherit;
float: left;
text-decoration: none;
display: block;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-outline-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family: Arial, Sans-Serif !important;
behavior:url(Content/border-radius.htc);
}
According to the list of attached files - border-radius.htc connects to the page
Can you please tell how to solve the problem?
UPDATE (06/13/2012)
If the code is replaced by a button:
.mc-button
{
border: 1px solid #696;
height: 29px;
line-height: 29px;
min-width: 70px;
text-align: center;
padding: 0 8px !important;
overflow: visible;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
float: left;
display: block;
background: #00ADEE;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#00ADEE), to(#0078A5));
background: -webkit-linear-gradient(#00ADEE, #0078A5);
background: -moz-linear-gradient(#00ADEE, #0078A5);
background: -ms-linear-gradient(#00ADEE, #0078A5);
background: -o-linear-gradient(#00ADEE, #0078A5);
background: linear-gradient(#00ADEE, #0078A5);
-pie-background: linear-gradient(#00ADEE, #0078A5);
behavior: url("Content/PIE.htc");
}
and to declare as:
<a id="login_button" class="mc-button mc-button-submit ">SomeText</a>
.mc-button-submit
{
border: 0px solid #0076A3;
background: #00ADEE;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#00ADEE), to(#0078A5));
background: -webkit-linear-gradient(#00ADEE, #0078A5);
background: -moz-linear-gradient(#00ADEE, #0078A5);
background: -ms-linear-gradient(#00ADEE, #0078A5);
background: -o-linear-gradient(#00ADEE, #0078A5);
background: linear-gradient(#00ADEE, #0078A5);
-pie-background: linear-gradient(#00ADEE, #0078A5);
color: #FFFFFF;
text-align: center;
}
Rounding it disappears. Adding to the .mc-button-submit line behavior: url ("Content / PIE.htc"); does not help.
Can you please tell how to connect a second class with the parameters of the background?
Standalone .htc hack is not working for background gradient and border-radius both at the same time.
Try to replace css gradient with simple image. This trick will work.
Also you can use css3pie (thanks to #dop-trois) — this pure Javascript tool is more perfect than standalone .htc file.
PS. Inset box-shadows cannot be implemented in both solutions.
PPS: the code you need is here: (i changed it a bit to make it more valid and correct):
.mc-button {
font: bold 11px/29px Arial, Helvetica, sans-serif !important;
text-align: center;
text-decoration: none;
color: #FFFFFF;
border: 1px solid #DCDCDC;
height: 29px;
min-width: 70px;
padding: 0 8px !important;
overflow: visible;
display: block;
float: left;
/* Unique link for this gradient — http://www.colorzilla.com/gradient-editor/#cbcbcb+0,dcdcdc+100;Custom */
background-color: #CBCBCB;
background: -moz-linear-gradient(top, rgba(203,203,203,1) 0%, rgba(220,220,220,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(203,203,203,1)), color-stop(100%,rgba(220,220,220,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* W3C */
/* css3 stuff below: (via css3please.com) */
/* no one prefix except `-webkit` is needed nowadays for `border-radius` */
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.218s ease-out;
-moz-transition: all 0.218s ease-out;
-ms-transition: all 0.218s ease-out;
-o-transition: all 0.218s ease-out;
transition: all 0.218s ease-out;
/* PIE specific accordingly http://css3pie.com/documentation/q-and-a/ */
behavior: url(PIE.htc);
}
You should be sure that you have included PIE.htc correctly (important!)
Relative questions
Using CSS3Pie htc for border-radius in IE8
CSS3 PIE - Giving IE border-radius support not working?
CSS3 PIE - Giving IE border-radius support not working?
Accordingly to answers possible problems may be in mime type ("text/x-component").
Also possible solution may be:
position: relative;
z-index: 0;
To apply gradients and border-radius, I recommend CSS3 Pie. It's the most powerful tool i know, to apply CSS3 properties in IEs.
Apply gradients in IEs):
#myElement {
background: #CCC; /*fallback for non-CSS3 browsers*/
background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
background: -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
background: -moz-linear-gradient(#CCC, #EEE); /*gecko*/
background: -ms-linear-gradient(#CCC, #EEE); /*IE10*/
background: -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
background: linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
-pie-background: linear-gradient(#CCC, #EEE); /*PIE*/
behavior: url(PIE.htc);
}
Apply border-radius in IEs):
#myAwesomeElement {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(path/to/PIE.htc);
}
You'll need PHP to get it work.
Live demo on CSS3 Pie's website.
Btw.: Applying border-radius & gradients the same time is possible with this tool ;)
Hope this helps :)
To apply Gradients, Box shadows and Border-radius, I recommend CSS3 Pie. I used it in cook&smile project and it fully works in IE.
*{ behavior:url(path/PIE.htc);}
.border_radius_div{ position:relative; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.gradient_div{ position:relative;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33); }
Visit this website to explore yourself further.
http://css3pie.com
Note:
Don't forget to use position (relative or absolute) where we are using Border-radius, gradients and box shadows.
Don't forget to use behavior:url(xhtml_folder/PIE.htc);
And the important thing is don't forget to put the PIE.htc in xhtml folder.
I am presently doing a project with menus and trying to implement something which is the same menu appeared below:
And now I have got which is similar to this menu and trying to modify it but I am stucked with it.
Here is the screenshot of my menu how it looks in chrome:
And this is how it looks in IE8 and firefox:
The problem is I am able to get rounded corners but the gloss and the bump over the menu which is shown in 1st menu is not appearing in my menu as it is showing as flat in chrome,IE as well as firefox.So how do I modify in order to get the same menu as shown in 1st figure.
Here is my menu css:
.menu
{
height: 18px;
margin-left:318px;
margin-top:10px;
width:914px;
border: 1px solid #d6d6d6;
background: #fff;
padding: 14px;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #1612CE;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#1612CE), to(#3B91F1));
background: -webkit-linear-gradient(#1612CE, #3B91F1);
background: -moz-linear-gradient(#1612CE, #3B91F1);
background: -ms-linear-gradient(#1612CE, #3B91F1);
background: -o-linear-gradient(#1612CE, #3B91F1);
background: linear-gradient(#1612CE, #3B91F1);
behavior: url(css/ie-css3.htc);
}
.blue {
background : rgb(52,119,210);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(52,119,210)), to(rgb(34,98,188)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(52,119,210)), to(rgb(34,98,188)));
border: 1px solid #2f8893;
}
.blue li a
{
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.40);
}
a {
text-decoration: none;
color: #262626;
line-height: 20px;
}
ul
{
margin: 0;
padding: 0;
z-index: 300;
text-align:right;
}
li
{
padding: 0 10px;
display:inline-block;
}
li:first-child {
float:left;
}
This is how I'm showing it:
<div class="menu blue">
<ul >
<li class="active">Home</li>
<li>About</li>
<li>Blog</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contacts</li>
<li>Back to Article</li>
<li>How it Works?</li>
</ul>
</div>
Try this combination of colors: http://jsfiddle.net/TLS3Y/4/
CSS3 Please! makes all these CSS3 rules so easy :)
.menu {
border-color: #598FD1 #598FD1 #1A53A2;
border-style: solid;
border-width: 2px 1px 3px;
height: 18px;
margin-left: 318px;
margin-top: 10px;
padding: 14px;
text-align: center;
width: 914px;
background-color: #2A72D8;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2A72D8), to(#1A53A2));
background-image: -webkit-linear-gradient(top, #2A72D8, #1A53A2);
background-image: -moz-linear-gradient(top, #2A72D8, #1A53A2);
background-image: -ms-linear-gradient(top, #2A72D8, #1A53A2);
background-image: -o-linear-gradient(top, #2A72D8, #1A53A2);
background-image: linear-gradient(top, #2A72D8, #1A53A2);
-webkit-box-shadow: inset 0px 0px 9px #2A72D8;
-moz-box-shadow: inset 0px 0px 9px #2A72D8;
box-shadow: inset 0px 0px 9px #2A72D8;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
behavior: url(css/ie-css3.htc);
}
First of all i encourage you to use Lea Verou's http://leaverou.github.com/prefixfree/ which saves you the pain of having to add all those prefixes for different browsers and makes just one linear-gradient declaration
Second you are not using the proper declarations for linear-gradient in webkit. Should be
-webkit-linear-gradient(rgb(52,119,210),rgb(34,98,188))
This is the shorthand method which you should use since you are not specifying any angles for your gradient
This is also available in FF
background: -moz-linear-gradient(rgb(52,119,210),rgb(34,98,188)); /* Firefox */
background: -webkit-linear-gradient(rgb(52,119,210),rgb(34,98,188)); /* Webkit */
For a 3d-er look add box-shadow set on inset
box-shadow:inset 0 1px 0 #fff; // for a nice thing white line at the top of the menu
You can also chain the box-shadow declarations and have
box-shadow:inset 0 1px 0 #fff, 0 2px 5px #222 // thing white line at the top and drop shadow
You can emboss the ul using box-shadow:
div.blue {
box-shadow: 2px 2px 2px #888888;
}
Gradient can be made with linear-gradient. I like the generator at http://gradients.glrzad.com/.