border-radius is not working on IE-8 . Need help.
I am using the following code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Border</title>
<style type="text/css">
.mc-button {
positon:relative;
behavior: url(/PIE-1.0.0/PIE.htc);
-webkit-box-shadow: #999 0 0 12px;
border: 1px solid #696;padding: 60px 0;text-align: center;
width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
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);
}
</style>
</head>
<body>
<input class="mc-button" type="button" value="submit"/>
</body>
</html>
That code i am using for a button. But I am not finding any way to solve. I checked previous questions and as well as answers ,but those solutions are not working.
border-radius is not supported by IE8.
To check browser compabitility the http://caniuse.com site is a great resource.
Related
I am trying to create a simple button and design it using CSS3 and preview it in pastebin. I don't know what to add to my code so that it will show the button with the design, because it only shows a simple button.
CSS code:
.button {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-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: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.button:active {
border-top-color: #1b435e;
background: #1b435e;
}
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>JS Bin</title>
</head>
<body>
<button type="button">Click Me!</button>
</body>
</html>
Remove the . before button in your CSS.
.button {
background: red;
}
makes all elements with class "button" red, while
button {
background: red;
}
makes all button elements red.
Using a simple link will apply your styles nicely even if you aren't using a form. Also be sure to use class in the tag to apply the styles correctly.
<a class="button">Click Me!</button>
What you have specified in the css .button is a class.
You need to add that to the button element.
Ofcourse you can add it to any element you want.
As per your code, it should be like
<button type="button" class="button">Click Me!</button>
You are created the button class, but you are not applying it. Just add the button class to the button input. it will work just fine.
<button type="button" class="button">Click Me!</button>
Here is the the out-put link:
http://jsbin.com/dizej/1/edit?html,css,output
I have this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TheGelu - Coming Soon</title>
<style type="text/css">
body {
background: #474747 url(http://line25.com/wp-content/uploads/2009/letterpress/demo/bg.png);
}
p.margin {
margin-left:300px;
}
p.box {
margin-left:300px;
}
h1 {
font: 60px Helvetica, Arial, Sans-Serif; letter-spacing: -5px;
color: #999; text-shadow: 0px 3px 8px #2a2a2a;
}
boxy {
border: 0px solid #db9b20;
text-align: center;
background-color: #f0f0f0;
padding: 0px 0px 0px 0px;
margin: 4px 0px 4px 0px;
moz-box-shadow: 5px 5px 5px #000;
-moz-border-shadow: 0pc;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow:0px 0px 0px 3px rgba(240, 240, 240, 1);
-webkit-box-shadow:0px 0px 0px 3px rgba(240, 240, 240, 1);
box-shadow:0px 0px 0px 3px rgba(240, 240, 240, 1);
}
</style>
</head>
<body><h1><center>TheGelu *-*</center></h1>
<p class="margin"><img src="RoundRound.png" alt="" width="136" height="137" /><img src="arrowSignal.png" alt="" width="318" height="126" /></p><div style="width:400px;height:300px;float:right;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;background-color:#FFFFFF;-webkit-box-shadow: #000000 2px 2px 2px;-moz-box-shadow: #000000 2px 2px 2px; box-shadow: #000000 2px 2px 2px;">Pretty Text Here!</div>
</body>
</body>
</html>
And I want the box to be exactly next to the arrow (on the right). How can I do that? I've tried float but I don't know how to put it up.
Live version at http://thegelu.bl.ee/test.html
Is this what you want?
1. p.margin, add float:left;
2. text box div, also add float:left;
Done.
Edit:you mean like this?
Because your arrow uses an image and that image has a transparent background that is wider than the image itself.
Solutions:
1. modify your image and remove the blank space
2. no need to modify image, just add margin-left:-90px; to your text box div
You can move the div in your p.margin and specify on it style="display: inline-block".
I have the following css styles for an input tag...
<div class="container">
<input type="search" class="border" />
</div>
.container{
background: #000;
-webkit-border-radius: 25px 25px 25px 25px;
border: 3px solid #000;
}
.border{
background:none;
-webkit-border-radius: 25px 25px 25px 25px;
border: 3px solid #000;
}
When i set background: none, the border-radius did not work in chrome but works well in all other browsers including ie9. So why in chrome, border radius doesn't work when background:none ?
Example :
http://jsfiddle.net/TSKpN/5/
Using this code:
<style>
#some-id{
background:none;
border: 3px solid #000;
border-radius: 25px;
}
</style>
<body>
<input type="text" id="some-id">
</body>
I am making an application with jquery mobile. In my login screen I have a submit button. On this button I want to apply this CSS class.
input.submit {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 8px 20px;
background: -moz-linear-gradient(
top,
#007ca5 0%,
#8080f5);
background: -webkit-gradient(
linear, left top, left bottom,
from(#007ca5),
to(#8080f5));
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #ffffff;
-moz-box-shadow:
0px 1px 6px rgba(0,0,0,0.9),
inset 0px 0px 5px rgba(161,142,016,0.6);
-webkit-box-shadow:
0px 1px 6px rgba(0,0,0,0.9),
inset 0px 0px 5px rgba(161,142,016,0.6);
text-shadow:
0px -1px 3px rgba(255,255,255,0),
0px 1px 0px rgba(255,255,255,0);
}
And used this class like this in my HTML
<INPUT name=submit value=Inloggen type=submit class="submit">
Now I think the problem is that my CSS is not specific enough. Because when I am going to look at my code with Firebug I get this div
<div class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-g" data-theme="g" aria-disabled="false">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Inloggen</span>
</span>
<input class="submit ui-btn-hidden" type="submit" value="Inloggen" name="submit" aria-disabled="false">
</div>
So can anybody help me, I am not that good in making my CSS more specific.
Check that you embedded your custom style sheet after jquery mobiel css file ex:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="Style/jquery.mobile-1.0.1.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="Script/jquery.mobile-1.0.1.js" type="text/javascript"></script>
<style type="text/css">
input.submit
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 8px 20px;
background: -moz-linear-gradient(
top,
#007ca5 0%,
#8080f5);
background: -webkit-gradient(
linear, left top, left bottom,
from(#007ca5),
to(#8080f5));
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #ffffff;
-moz-box-shadow: 0px 1px 6px rgba(0,0,0,0.9), inset 0px 0px 5px rgba(161,142,016,0.6);
-webkit-box-shadow: 0px 1px 6px rgba(0,0,0,0.9), inset 0px 0px 5px rgba(161,142,016,0.6);
text-shadow: 0px -1px 3px rgba(255,255,255,0), 0px 1px 0px rgba(255,255,255,0);
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<form>
<div data-role="page">
<div data-role="content">
<input name="submit" value="Inloggen" type="submit" class="submit">
</div>
</div>
</form>
</body>
</html>
I am using this .htc logic to make my content tabs rounded but its not working. My tab structure looks like this.
<li id="profiletab1" class="selected">
Overview
</li>
<li id="profiletab2" class="">
Overview
</li>
...
css code for this
color: #4f4f4f;
height: 35px;
display: inline-block;
padding: 0px 18px 0px 19px;
font-size: 14px;
line-height: 35px;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
behavior: url(border-radius.htc);
background: #e7e7e7;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e7e7e7), to(#cccccc));
background: -webkit-linear-gradient(#e7e7e7, #cccccc);
background: -moz-linear-gradient(#e7e7e7, #cccccc);
background: -ms-linear-gradient(#e7e7e7, #cccccc);
background: -o-linear-gradient(#e7e7e7, #cccccc);
background: linear-gradient(#e7e7e7, #cccccc);
-pie-background: linear-gradient(#e7e7e7, #cccccc);
border-right: 1px solid #b1b1b1;
IE does not support CSS 3 until the IE 9
to use border-radius in css,
add
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
and
if you want to have them in IE 7/8,
you will need some sort of help with some javascript library.
e.g. http://css3pie.com/
Is it working in any IE browser? Also double check the path of your .htc file
I am using the PIE.htc method and my CSS is something like this.
#maincol #content {
float:left;
background-color:#FFF;
width:100%;
height:399px;
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
behavior: url(../css/PIE.htc);
}
Also I have tested and verified that it works in all versions of IE. All I had to do was put the pie.htc file in my CSS folder and then add the behavior to the elements that I wanted to round the corners on.
You need to use:
behavoir:url(PIE.htc)
at the end of the class