I have HTML code with background image,which is man's head.I have html button on man's eye,and I want when browser windows resizes,button be always on eye,this is my code.
Please help me,thanks a lot to help me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Post</title>
</head>
<body>
<div>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img id="bgimage" src="heroes.jpg"/>
<div id="content">
<p align="center"><input type="submit" class="butt" onclick="dosomething();"/></p>
</div>
</td>
</tr>
</table>
</div>
<style>
body,html{margin:0;padding:0; height:100% width:100%}
#bgimage{ position:fixed; left:0; top:0; z-index:1;height:100%; width:100%;}
#content{position:absolute;left:0; top:0; z-index:70; height:100%; width:100%;}
.butt {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #3c4fd9;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}.butt:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}.butt:active {
position:relative;
top:1px;
}
.butt{
margin-top:260px;
margin-right:190px;
}
.butt{
}
</style>
</body>
</html>
button.classname{
position:fixed;
top:value; /*set a value so that it comes on eye horizontally*/
left:value; /*set a value so that it comes on eye vertically*/
}
Fixed position and absolute position work in different way. If you use fixed position ,body will be the parent of the item but absolute positioned item can have user defined parent( just give parent element a position property.)
So, if you want to keep the man and the eye button together you have to use same parent. use same position for both man and eye (fixed or absolute) having same parent.
second thing is, you are resizing the man's head by using width: 100% and height: 100%; so, if you want the eye button also change the position use percentage in position (eg. top: 50%). have a look at http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/ . It might help you.
I tried to not make that many adjustments to your code as possible to make this solution as easy to implement as possible, but I have done what you're asking in the following way.
Put this in the "head" section of your HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
HTML:
<img id="bgimage" src=""/>
<div id="content">
<input type="submit" class="butt" onclick="dosomething();"/>
</div>
CSS:
body,html{ margin:0;padding:0;height:100%;width:100%}
#bgimage{
position:fixed;
left:0;
top:0;
z-index:1;
height:100%;
width:100%;
}
#content{
position:absolute;
left:0;
top:0;
z-index:70;
height:100%;
width:100%;
}
.butt {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #3c4fd9;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
.butt:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
.butt:active {
position:relative;
top:1px;
}
jQuery:
$('.butt').css({
"position" : "absolute",
"left" : "39%",
"top" : "41%"
});
to put the jQuery in your HTML file just copy and paste this:
<script type="text/javascript">
$(document).ready(function(){
$('.butt').css({
"position" : "absolute",
"left" : "39%",
"top" : "41%"
});
)};
</script>
This isn't perfect on all resolutions, you might have to tweak the percentages in the jQuery, the only alternative is to create a CSS using multiple #media queries to adjust with every screen size.
Related
I have an image that i want to use as a button on my page that links to other pages. I want to make it in a way that I can use small and large texts on it.
The image in question:
I have tried something but can go no where with it.
a {
background:url(http://i.imgur.com/8Isga60.png);
background-size:contain;
background-repeat:no-repeat;
display:inline-block;
padding:30px 100px;
height:20px;
color:black;
font-size:16px;
}
JS Fiddle
I would recommend you drop the image idea... that concept is very 2005. With today's CSS you can easily recreate that image with pure CSS, which then is much more flexible.
If you Google "CSS button generator" you will find many online tools that help you with that... i.e. http://www.cssbuttongenerator.com/
Here is an example I did in 10 seconds and just copied the CSS they provided... granted it is a little convoluted, but it certainly works:
<style type="text/css">
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
background-color:#79bbff;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:0;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
}
.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
background-color:#378de5;
}.classname:active {
position:relative;
top:1px;
}</style>
You could almost do it in CSS3: JSFiddle Demo
.btn {
margin:10px;
color:white;
font-size:16px;
border:4px solid #c5c7c9;
border-radius: 50px 50px;
display:inline-block;
/* Drop shadow */
-webkit-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.68);
-moz-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.68);
box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.68);
/* Gradient Background */
background: rgb(78,186,234); /* Old browsers */
background: -moz-linear-gradient(left, rgba(78,186,234,1) 0%, rgba(0,121,183,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(78,186,234,1)), color-stop(100%,rgba(0,121,183,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(78,186,234,1) 0%,rgba(0,121,183,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(78,186,234,1) 0%,rgba(0,121,183,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(78,186,234,1) 0%,rgba(0,121,183,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(78,186,234,1) 0%,rgba(0,121,183,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ebaea', endColorstr='#0079b7',GradientType=1 ); /* IE6-9 */
}
/* Button Sizes. */
.btn.large { padding:30px 60px; }
.btn.small { padding:10px 30px; }
HTML
my text here
my text here
my text here long text goes here
I think you will have to split the image, as If you try to repeat it using it as a complete image, it will also repeat the rounded parts. So take the left and right, and a pixel from the center. See this answer for reference Button using three (3) background images css
The old school version is something like using three classes for left and right and one for center with the repeating background.Create button using 3 images
Now, as mentioned in the comments, unless you are completely decided on the background images part, a pure CSS solution will probably work better.
Try this:
a{
background:url(http://i.imgur.com/8Isga60.png) no-repeat center;
...
}
However it moves the button too. jsfiddle
You should really look into CSS buttons instead of using images. Try CSS Button Generator
The problem is the left & right padding, Why not separate the link and the text so it's easy to center the content?
(edit: jsfiddle )
<p><a class="sol" href="http://imgur.com/8Isga60"><span>Does not work with larger text</span></a></p>
a.sol {
background:url(http://i.imgur.com/8Isga60.png);
display:inline-block;
padding:30px 0px;
width: 243px;
height:20px;
color:white;
font-size:16px;
text-align: center;
}
Okay, I guess you could say this website looks "close" to how I want it which is okay for maybe someone else, but not me because I'm a perfectionist. I'm also new to all of this html and css so you can imagine the struggle that is my life. I have two divs called topred and top yellow. I then have a slider and then a navbar(navigation bar). I would like all of these element to "stack" on one another if that makes sense. If you were to lo load it with an image at the moment you could tell that the slider doesn't perfectly match up with the topyellow. also the navbar and the slider have a tiny gap between then. Its killing me cause although it looks okay and unoticable in chrome, I can see it in IE.
This is just due to my lack of experience. I can promise you I have already spent hours trying to trouble shoot this issue. It's now time to ask the experts. Seriously, I bet Im about to feel like a genius. Dont worry, I already deleted all of my "float:center"'s lol
BTW this is a volunteer project I am doing for veterans, a great way to give back
I just took some time to clean this up!
<head>
<link rel="shortcut icon" href="bavafavicon"/>
<title>Berlin Airlift Veterans Association: News</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body id="news">
<div id="topyellow"></div>
<div id="topred"></div>
<div id="left"></div>
<div id="leftblue"></div>
<div id="right"></div>
<div id="container">
<div id="slider">
<script type="text/javascript">
var i = 0; var path = new Array();
path[0] = "1.jpg";
path[1] = "2.jpg";
path[2] = "3.jpg";
path[3] = "4.jpg";
path[4] = "5.jpg";
path[5] = "6.jpg";
function swapImage()
{
document.slide.src = path[i];
if(i < path.length - 1) i++;
else i = 0;
setTimeout("swapImage()",5500);
}
</script>
<img name="slide"/>
</div>
<ul id="head_nav">
<li>NEWS</li>
<li>ABOUT BAVA</li>
<li>HISTORY</li>
<li>BIOGRAPHIES</li>
<li>CALENDAR</li>
<li>CONTACT</li>
<li>LINKS</li>
<li>DONATE</li>
</ul>
<div id="headlogo">
<img src="BAVA.png" alt="BAVA logo" width="150" height="150"/>
</div>
<div id="subscribe">Sign up for BAVA updates!<br>
<img src="emailBomb.png" alt="emailBomb" id="emailBomb" width="150" height="300"/>
<form action="demo_form.asp">
E-mail: <input type="email" name="userid">
<input type="submit" value="Submit"><br>
</form>
<script type="text/javascript">
function GetClock(){
tzOffset = +2;
d = new Date();
dx = d.toGMTString();
dx = dx.substr(0,dx.length -3);
d.setTime(Date.parse(dx))
d.setHours(d.getHours() + tzOffset);
nday = d.getDay();
nmonth = d.getMonth();
ndate = d.getDate();
nyear = d.getYear();
nhour = d.getHours();
nmin = d.getMinutes();
if(nyear<1000) nyear=nyear+1900;
if(nmin <= 9){nmin="0"+nmin}
document.getElementById('berlinClock').innerHTML=""+(nmonth+1)+"/"+ndate+"/"+nyear+" "+nhour+":"+nmin+"";
setTimeout("GetClock()", 1000);
}
</script>
<script type="text/javascript" language="javascript">
window.onload = function() { swapImage(); GetClock(); };
</script>
<div id="berlinClock"></div>
</div>
</div>
<footer>
<div id="footer">
<p><i>15 N. College Ave, Newton, NC 28658 | (828) 466-3410</i></p>
</div>
</footer>
</body>
And Here is my CSS, please don't laugh...
body {margin:0px; padding:0;min-width: 1100px;}
#container {position:absolute; display:block; width:100%; height:100%}
#center {margin:0px}
#topred {z-index:1; top: 0; left: 0; right:0; height: .6%; width: 100%; background: rgb(211,5,24); position:absolute; display:block}
#topyellow {z-index:1 ;top: .6%; left: 0; right:0; height: .9%; width: 100%; background: rgb(253,248,12); position:absolute; display:block }
#left, #right {top: 0; bottom: 0; width: 19.5%; background-color: black; position: fixed}
#left {left: 0}
#right {right: 0}
#leftblue {left:19.5%;top: 0; bottom: 0; width: .35%; background-color: rgb(8,44,180); position: fixed}
#slider {position:relative;display:block; margin-top:.6%;width: 100%; max-width: 875px; height:350px;margin-bottom:0px;margin-left: auto;
margin-right:auto; padding-bottom:0px}
#headlogo {display: block; position: absolute; left: 14.5%; top:5%}
#subscribe {display: block; position: absolute; top:388px; right:0; width:19.5%; text-align:center; color: white}
#head_nav {z-index:1;position:relative;text-align: center;margin-left: auto;margin-right:auto;padding:0; margin-top:0px; margin-bottom:none; width:975px; border:0}
#head_nav li {display:inline;margin: 0.0px}
#emailBomb {padding-bottom: 10px}
#berlinTime {display: block; position: relative; top:388px; left:0; width:19.5%; text-align:center; color: red}
#footer {z-index:-1; padding-top:99%; font-size:10; color:black; position: relative; width:100%; text-align:center}
.currentButton {
-moz-box-shadow:inset 0px 0px 0px 0px #d3051a;
-webkit-box-shadow:inset 0px 0px 0px 0px #d3051a;
box-shadow:inset 0px 0px 0px 0px #d3051a;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );
background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
background-color:#000000;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:0;
display:inline-block;
color:rgb(211,5,24);
font-family:Arial;
font-size:14px;
font-weight:bold;
font-style:normal;
height:33pxpx;
line-height:33px;
width:105px;
text-decoration:none;
text-align:center;}
.currentButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );
background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
background-color:#000000;color:rgb(211,5,24);}
.currentutton:active {
position:relative;
top:1px;}
.button {
-moz-box-shadow:inset 0px 0px 0px 0px #d3051a;
-webkit-box-shadow:inset 0px 0px 0px 0px #d3051a;
box-shadow:inset 0px 0px 0px 0px #d3051a;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );
background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
background-color:#000000;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:0;
display:inline-block;
color:#fdf902;
font-family:Arial;
font-size:14px;
font-weight:bold;
font-style:normal;
height:33pxpx;
line-height:33px;
width:105px;
text-decoration:none;
text-align:center;}
.button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );
background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
background-color:#000000;color:rgb(211,5,24);}
.button:active {
position:relative;
top:1px;}
I figured out what your issue was with the gap between the nav and the slider. You have a sub-pixel margin set on the nav. Remove the margin or set it to 0.
#head_nav li {
display:inline;
/*margin: 0.3px; remove this */
}
Edit: Solved, see comments!
I've read a few posts about styling submit buttons in forms, but it only seems to partially work with me. I'm able to change the border, but not the background color or font settings. Can someone please tell me what's wrong with my code? I'm new to forms, so I could have just n00bed. I've tried background, background-color, hexadecimal values... I just am stumped.
#submitButton {
color: black;
background: #cac9c9;
border: 4px solid blue;
}
<form action="#" method="post">
<input type="text" value="user#domain.com" />
<div class="clear"></div>
<hr />
<div id="checkboxContainer">
<span>Select the newsletters you'd like to receive</span>
<input type="checkbox" name="travel" value="Getaways" />
<label>Destinations & Getaways</label>
<br />
<input type="checkbox" name="travel" value="Tips" />
<label>Weekly Travel Tips</label>
</div>
<input id="submitButton" type="submit" value="SIGN UP" />
</form>
Click for demo
Css
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
-webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
box-shadow:inset 0px 1px 0px 0px #bee2f9;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf) );
background:-moz-linear-gradient( center top, #63b8ee 5%, #468ccf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf');
background-color:#63b8ee;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:0;
border:1px solid #3866a3;
display:inline-block;
color:#14396a;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:86px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #7cacde;
}
.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee) );
background:-moz-linear-gradient( center top, #468ccf 5%, #63b8ee 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee');
background-color:#468ccf;
}.classname:active {
position:relative;
top:1px;
}
I forked your jsfiddle example and solution is here it works
I used css to create a button style, but i have issue on IE9 ,
it works fine on Firefox
code:
.my_box {
-moz-box-shadow:inset 0px 1px 0px 0px #f9eca0;
-webkit-box-shadow:inset 0px 1px 0px 0px #f9eca0;
box-shadow:inset 0px 1px 0px 0px #f9eca0;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f0c911), color-stop(1, #f2ab1e) );
background:-moz-linear-gradient( center top, #f0c911 5%, #f2ab1e 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911', endColorstr='#f2ab1e');
background-color:#f0c911;
-webkit-border-top-left-radius:33px;
-moz-border-radius-topleft:33px;
border-top-left-radius:33px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:33px;
-moz-border-radius-bottomright:33px;
border-bottom-right-radius:33px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #e65f44;
display:inline-block;
color:#c92200;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:40px;
line-height:40px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ded17c;
}
see the FIDDLE
How to make it work on IE9?
PLEASE JSfiddle answer
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Give the element a container, with the border radius and set the overflow of the container to hidden and also give this element the border:
HTML
<div class='rounded'>
TEXT
</div>
CSS
.rounded{
-webkit-border-top-left-radius:33px;
-moz-border-radius-topleft:33px;
border-top-left-radius:33px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:33px;
-moz-border-radius-bottomright:33px;
border-bottom-right-radius:33px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
overflow:hidden;
display:inline-block;
border:1px solid #e65f44;
}
JSFiddle
Tried and tested in IE 9
You can use this http://css3pie.com/ it will work for IE 6-9
CSS border radius will work by adding this to your page header,
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
Make sure this resides at the top of your HTML document
<!DOCTYPE html>
Try it without the filter
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911', endColorstr='#f2ab1e');
That can override the style.
Fiddle
Try this:
-webkit-border-top-right-radius: 36px;
-webkit-border-bottom-left-radius: 36px;
-moz-border-radius-topright: 36px;
-moz-border-radius-bottomleft: 36px;
border-top-right-radius: 36px;
border-bottom-left-radius: 36px;
you can create border radius by border-radius.com
I made this site. On Chrome (v24.0), everything appears as intended. When I look at it in Safari or Firefox, the layout breaks: the links "view cart" and "checkout" in the top right spill over to an extra line. It's hard to describe, but compare how they look in Chrome (correct) vs Firefox and Safari (wrong) and it should be obvious what I mean.
How can I fix this? Everything I've tried that successfully solves the problem in Firefox and Safari just breaks it in Chrome.
My current CSS (Sass):
.account-links {
font-size: 0;
}
.account-links a {
box-sizing: border-box;
width: 90px;
margin: 0px;
font-size:9pt;
-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
box-shadow:inset 0px 0px 0px 0px #ffffff;
background:-webkit-gradient( linear,
left top, left bottom,
color-stop(0.05, #f9f9f9),
color-stop(1, #e9e9e9) );
background:-moz-linear-gradient( center top,
#f9f9f9 5%, #e9e9e9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
background-color:#f9f9f9;
border-top:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
&:first-child {
border-right:1px solid #dcdcdc;
}
display:inline-block;
color:#666666;
font-family:arial;
font-weight:bold;
padding: 5px 0px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
&:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9) );
background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
background-color:#e9e9e9;
}
&:active {
position:relative;
top:1px;
}
}
That's because you're using unprefixed box-sizing for #shop-meta .account-links a. Add -moz-box-sizing: border-box and -webkit-box-sizing: border-box and it should work as intended.
Edit: Actually I've found that there's some bug in Safari (using v5.1.7 for Windows) that prevents box-sizing from working properly. The solution for that browser is to set float: left on .account-links a. You don't need -webkit-box-sizing.
I have run into issues with this a few times with Chrome. Most of the time I can figure it out but a few times I've had to resort to using this: css_browser_selector.js
Basically it allows you to write css like this:
.gecko .account-links a{}
Which would then apply that css to browsers using the gecko engine (i.e. Firefox). I use it on several production sites, (mostly for IE but once or twice for Firefox as well) and I haven't had any issues with it.
Which means that you can use your solutions for Firefox and Safari without breaking what's working in Chrome.