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.
Related
I made a CSS class that applies a gradient and rounded corners to a span element to act as a button. It seems to work in most browsers that I've tested, but IE9 is giving me some issues. As the class is now the rounded corners aren't working correctly. However if you look very close it seems like there are rounded corners underneath a layer that is not rounded (I think that's the best way to explain how it looks, forgive me if that doesn't make sense)
Anyway, by trial and error I messed with the class until I found that removing the 'display:inline-block;' property allows for the rounded corners to be displayed correctly, but as a result the gradient no longer works. Any ideas?
http://jsfiddle.net/jessikwa/wcgzkkgr/
The HTML:
<span class="action_button">Button</span>
The CSS:
.action_button
{
color: #FFFFFF;
font-size: 12px;
font-family: arial;
cursor: pointer;
text-decoration: none;
padding: 3px 5px;
display: inline-block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid #f7a03b;
webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: #8b8b8b 0px 1px 4px;
-moz-box-shadow: #8b8b8b 0px 1px 4px;
box-shadow: #8b8b8b 0px 1px 4px;
background-color: #efbb7f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#efbb7f), to(#f88600));
background-image: -webkit-linear-gradient(top, #efbb7f, #f88600);
background-image: -moz-linear-gradient(top, #efbb7f, #f88600);
background-image: -ms-linear-gradient(top, #efbb7f, #f88600);
background-image: -o-linear-gradient(top, #efbb7f, #f88600);
background-image: linear-gradient(to bottom, #efbb7f, #f88600);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#efbb7f, endColorstr=#f88600);
}
Update: Further reading of other posts in StackOverflow gets me a bit closer, but still not quite right.
IE9 border-radius and background gradient bleeding
This post's answer suggestions using an image, which I would prefer to avoid. Another proposed answer of the thread puts a wrapper around the button with "overflow:hidden;", but this doesn't seem to be quite right, either.
http://jsfiddle.net/uu19uqg4/
you have forgot the "-" near webkit-border-radius
try this :
-webkit-border-radius: 3px;
this link can be usefull
Add the following in the head of the page.
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=8,IE=9" />
This will disable the compatibility mode in IE9. If it's due to compatibility issue then it will be solved.
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;
}
I dont kmow how to explain this, if this is a design question please correct me. Look at the following facebook header.
That friend requests icon and sort look like they are inside the background, how do i do this with css?
You could do something like this (Just whipped it up, so it's not perfect).
I used colours from the Facebook image you provided.
Here is what I did:
HTML:
<div id="container">
<div id="inset"></div>
</div>
CSS:
#container{
height:200px;
width:200px;
background:#48639b;
}
#inset{
background:#31497e;
height:50px;
width:50px;
box-shadow:inset 0px 0px 5px #1f2f50;
}
JSFiddle -- Try one
JSFiddle -- Try two
The JSFiddle as a few extra styles to put #inset more into the container, but they don't affect the over style of the inset.
You can accomplish the sort button styling, by using box-shadow - and inset to get the shadow inside the button. As well as border-radius for rounding the corners.
HTML
button
CSS
body { background:#4b669d; padding:40px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}
a {
display:inline-block;
font-size:12px;
padding:0 20px;
margin:10px;
height:30px;
background:#435c91;
border:1px solid #2a3349;
text-align:center;
color:#fff;
line-height:26px;
text-decoration:none;
border-radius:5px;
/* this is the inner shadow and drop shadow */
-webkit-box-shadow:inset 0 0 3px 2px rgba(0,0,0,0.15), 1px 1px 0px 1px rgba(255,255,255,0.3);
box-shadow:inset 0 0 3px 2px rgba(0,0,0,0.15), 1px 1px 1px 0px rgba(255,255,255,0.3);
/* gradient - from http://www.colorzilla.com/gradient-editor/ */
background: rgb(93,114,163); /* Old browsers */
background: -moz-linear-gradient(top, rgba(93,114,163,1) 0%, rgba(46,72,128,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(93,114,163,1)), color-stop(100%,rgba(46,72,128,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(93,114,163,1) 0%,rgba(46,72,128,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(93,114,163,1) 0%,rgba(46,72,128,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(93,114,163,1) 0%,rgba(46,72,128,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(93,114,163,1) 0%,rgba(46,72,128,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d72a3', endColorstr='#2e4880',GradientType=0 ); /* IE6-9 */
}
Obviously it requires a bit more tweaking, but hopefully that should be a starting point.
JSFiddle Demo 2 - now with gradient background and a drop-shadow too.
and http://jsfiddle.net/53fWz/6/
Use multiple box-shadows to give the embossed effect.
box-shadow:inset 0 1px 1px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.3);
http://jsfiddle.net/Em97N/2/
You should color the image, with a more dark color than the forground. Simple design. Maybe add a black border arround it.
I want to style a select and it works almost perfectly but on google chrome behvior is different and I fixed that with -webkit-appearance: none; but this delete also select arrow.
I try to set an arrow for my select but it is not visible in chrome because I use multiple backgrounds. What can I do to set that arrow on chrome.
select{
width:120px;
margin:10px;
background:url(http://s14.postimage.org/jls6v1ywt/select_background.png),
url(http://s13.postimage.org/edsg65ss3/select_arrow.jpg);
background-position: center center,100% 53%;
background-repeat: repeat-x, no-repeat;
border:1px solid #DDDBD7;
-webkit-appearance: none;
}
check my example:
http://jsfiddle.net/DCjYA/359/
Swap the order of the backgrounds, so that the "arrow" background is on top.
http://dev.w3.org/csswg/css3-background/#layering
The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on. The background color, if present, is painted below all of the other layers.
See: http://jsfiddle.net/thirtydot/DCjYA/361/
background: url(http://s13.postimage.org/edsg65ss3/select_arrow.jpg), url(http://s14.postimage.org/jls6v1ywt/select_background.png);
background-position: 100% 53%, center center;
background-repeat: no-repeat, repeat-x;
select {
padding:9px;
margin: 0;
border-radius:4px;
-webkit-box-shadow:
0 0px 0 #ccc,
0 0px #fff inset;
background: url('http://i45.tinypic.com/309nb74.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);
background: url('http://i45.tinypic.com/309nb74.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));
color:black;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
cursor:pointer;
border: 1px solid #ccc;
}
This piece of code will fix your problem. Just change the padding and use local images or color codes a/c to your need. or use this to generate the code for you.
See: JS fiddle for background gradient and down arrow
As far as I am aware, IE9 should have CSS support for rounded corners. I have apparently coded my page in such a way as this does not occur in IE9 though - although it displays correctly in Chrome and FF.
*I have edited CSS to reflect suggestions as per answer below - the problem is still occurring *
I need top and bottom left corners only to be rounded for the div that contains the site main navigation.
The 'Activate Now' buttons are also not working, in the hosting package display boxes.
Site link to view is http://activehost.co.nz
I've checked other questions - and the most common cause (using prefixes) is not something I am doing.
Relevant CSS for sections is below.
Navigation:
#main_nav {
margin: 0px 0px 10px 0px;
float: right;
height: 37px;
/*background:url(../img/nav_bg.png);
background-repeat: repeat-x;*/
background-color: #286e38;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#6dc067), to(#286e38));
background-image: -moz-linear-gradient(top, #6dc067, #286e38);
background-image: -ms-linear-gradient(top, #6dc067, #286e38);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6dc067), color-stop(100%, #286e38));
background-image: -webkit-linear-gradient(top, #6dc067, #286e38);
background-image: -o-linear-gradient(top, #6dc067, #286e38);
background-image: linear-gradient(top, #6dc067, #286e38);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6dc067', endColorstr='#286e38', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-radius: 20px 0px 0px 20px;
clear: right;
}
And the CSS for the 'Activate Now buttons:
.hosting_order {
position: absolute;
top: 148px;
border: none;
height: 35px !important;
background-color: #286e38;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#6dc067), to(#286e38));
background-image: -moz-linear-gradient(top, #6dc067, #286e38);
background-image: -ms-linear-gradient(top, #6dc067, #286e38);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6dc067), color-stop(100%, #286e38));
background-image: -webkit-linear-gradient(top, #6dc067, #286e38);
background-image: -o-linear-gradient(top, #6dc067, #286e38);
background-image: linear-gradient(top, #6dc067, #286e38);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6dc067', endColorstr='#286e38', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #ffffff;
width: 120px;
padding: 0px 20px;
font-weight: bolder;
font-size: 1.1em;
border-radius:20px;
box-shadow: 2px 2px #888888;
}
The background image CSS is to produce a gradient effect - I wonder if that's the problem?
It's because you combine filter and border-radius for same element. Try to apply border-radius to one element, and filter to its child element instead.
see this question regarding the meta tag and some other possible issues/process to eliminate: IE9 border-radius
For IE9, you are correct it doesn't like the border radius and the filter combined. Here is what I followed and it worked perfectly in IE9, as well as all the other browsers.
https://github.com/bfintal/jQuery.IE9Gradius.js
Hope that helps!
You only need to define one number for your border radius if you're using "bottom-left" and so on. By specifying two numbers IE9 may not interpret it correctly.
If you use the following, the first number is the top-left, second is top-right, third is bottom-right, and fourth is bottom-left.
-moz-border-radius: 8px 8px 0px 0px;
-webkit-border-radius: 8px 8px 0px 0px;
-0-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
Making the border radius compatible to IE browsers, follow these steps:
Open Setting option in IE.
Go to compatibility and view setting.
Uncheck "Display intranet sites in Compatibility view " as well as uncheck "Use microsoft compatibility list".