I have this CSS. the property FILTER In class .crumb make my background and this works perfectly and Chrome, Firefox, safari, iPad, iPhone,Android... but for an unknown reason. It just doesnt work on ie9. I see the dark bordes with a radius, but the background is just completly square.
.left-crumb {
margin-left:15px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
.crumb {
margin-top:20px;
margin-bottom:10px;
background-image:0 color-stop(0.3,#798aad), color-stop(0.51,#6276a0), color-stop(0.51,#556a97), color-stop(0.75,#566c98), to(#546993));
background:linear-gradient(top,#4c4c4c0%,#59595912%,#66666625%,#47474739%,#2c2c2c50%,#00000051%,#11111160%,#2b2b2b76%,#1c1c1c91%,#131313100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c',endColorstr='#131313',GradientType=0);
font-weight:bolder;
border:solid 1px #54617D;
height:30px;
padding-left:10px;
padding-right:10px;
display:inline-block;
color:#FFF;
line-height:28px;
border-color:#484E59 #aaa #4C5C7A #54617D;
}
.right-crumb {
position:relative;
margin-right:10px;
padding-right:25px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-right-radius:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomright:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
}
Here's a quick HTML so you can test.
<div id="adminPanel"><a class="left-crumb crumb right-crumb" href="admin.php">Admin panel</a></div>
adminPanel is just a div to contain all
Still IE9 doesn't supports yet, but you can use SVG to achieve this, please download the source code and check the demo here
http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/
Related
I am attempting to make some nice looking, flexible arrow buttons with CSS only by using a rotate. Problem is that Firefox seems to position the arrow part slightly differently to all other browsers. Adding Firefox only styles can of course address this, but is there a more elegant way?
HTML as follows
<span class="arrow-box left">Previous button</span>
<span class="arrow-box right">Next button</span>
CSS is as follows
.arrow-box { line-height:34px; border:2px solid #7E95AF; padding:8px 20px; z-index:10; font-family:Arial; font-weight:bold; font-size:12px; border-radius:5px; background-color:#EEE; position:relative; }
.arrow-box.left { border-left:0; }
.arrow-box.right { border-right:0; }
.arrow-box.left::before,
.arrow-box.right::after { content:""; display:block; width:24px; height:24px; transform:rotate(45deg); -webkit-transform:rotate(45deg); z-index:-1; position:absolute; border-style:solid; border-color:#7E95AF; border-radius:5px; background-color:#EEE; }
.arrow-box.left::before { top:2px; left:-10px; border-width:0 0 2px 2px; }
.arrow-box.right::after { top:2px; right:-10px; border-width:2px 2px 0 0; }
Working version for Chrome, IE, Safari: http://jsfiddle.net/YWnzc/356/
Working version for Firefox: http://jsfiddle.net/YWnzc/352/
Yes your border-right width changes when the browser is Firefox, So i think you can use a function in javascript to detect the browser and do changes according to it.
you can do like this...
Javascript :
var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+
if(isFirefox == true)
{
$('.arrow-box.right').toggleClass('changed');
}
CSS :
.arrow-box.right.changed:after { top:2px; right:-7px; border-width:2px 2px 0 0; }
I have called a changed css for .arrow-box.right , you can do changes for .arrow-box.left also if you want.
Check this fiddle in both Firefox and Chrome-> http://jsfiddle.net/YWnzc/360/
I'm have a wordpress site where I have three buttons with position:fixed in the right side. The buttons show fine in FF and IE, but disappears behind the next section when I scroll in google chrome. I am pretty sure it is a stacking context problem, but can not make the button appear no matter which value I change. HTML and css below( the theme uses visual composer, if that is any help:)
.button_fixed{
position:fixed;
right:0;
top:35%;
z-index:99999999;
}
.button_fixed a{
border:3px solid #f37121;
border-radius:8px 0 0 8px;
background:rgba(0,0,0,0.4);
display:block;
border-right:0;
color:white;
margin-bottom:25px;
padding:10px;
font-family: 'Deftone Stylus';
font-size:35px;
width:150px;
position:relative;
}
span.oswald{
font-family: Oswald;
font-size:25px;
text-transform:uppercase;
displaY:inline-block;
padding-top:5px;
}
HTML:
<div class="button_fixed">
sell <br/><span class="oswald">equipment</span>
buy <br/><span class="oswald">equipment</span>
outsource <br/><span class="oswald">my sales</span>
</div>
site url: http://tinyurl.com/q9yangh
Thanks a lot for the help.
For #top add overflow: visible
I have a table and 2 columns in a row. In the first one I have a text input and in the other one I have a container div with a margin in em and 2 inline-block elements inside it.
Everything's fine in Firefox, Safari and even in Opera. But in Chrome the second inline-block element is shifted below. The interesting thing is, if I set the margin(left) of the container in pixels, this doesn't happen.
Here's a fiddle: http://jsfiddle.net/inhan/bttBs/
Here's the structure:
<table>
<tr>
<td><input type="text" /></td>
<td>
<div class="buttons">
<span>Reset</span>
<span>Submit</span>
</div>
</td>
</tr>
</table>
And here's the rough CSS
body {
font-size:0.8em;
font-family:Arial, Helvetica, sans-serif;
color:#2E2E2E;
}
table,tbody,tr,td {
border-spacing:0;
margin:0;
padding:0;
}
input[type="text"] {
width:11em;
border:1px solid #BBB;
padding:4px 3px;
margin:2px;
}
.buttons {margin-left:1em} /* set this to 13px */
a.button {
text-decoration:none;
outline:none;
display:inline-block;
*display:inline; zoom:1; /* IE 6/7 */
width:65px;
height:26px;
margin:0 1px;
font-family:'Open Sans';
font-size:0.9em;
text-align:center;
color:#333;
cursor:pointer;
border-style:none;
/* there's a bg image here */
background-color:lightgray;
}
a.button span {
display:block;
margin:4px 0;
}
Does anybody know what's happening there?
A little advice that may work, is to use CSS reset from the meyerweb, it can be easily searched on Google.
Remove the class from the <div class="buttons">
jsfiddle.net
Apparently this was a bug with that version of Chrome at the time I asked this question. The issue does not exist anymore and the layout in the fiddle I provided looks just fine in the current version (23.0.1271.101) of Chrome in mac.
I create Any div in auto width with single image background. in act this worked but There is a small problem. end of right images not overlapped.
HTML :
<div class="home"><span><em>40</em></span></div>
CSS :
.home{
border:none;
background:none;
padding:0;
margin:0;
width:auto;
overflow:visible;
text-align:center;
white-space:nowrap;
height:40px;
line-height:34px; display:inline-block;
}
.home span, .home em{
display:inline-block;
height:40px;
line-height:34px;
margin:0;
color:#954b05;
}
.home span{
padding-left:15px;
background:url(http://www.uploadup.com/di-GRW2.png) no-repeat 0 0;
}
.home em{
font-style:normal;
padding-right:20px;
background:url(http://www.uploadup.com/di-GRW2.png) no-repeat 100% 0;}
See E.X In Action : HERE
My Problem : HERE
It's doing that because the corners of your PNG are transparent. Either make them white (same as background) or use another method. Most modern browsers allow you to do rounded borders via CSS now (with the exception of IE).
you can make the same curve box as per your image with css3 here is small css for you to make curve box and compatible with all browsers:-
.box {
border:1px solid #dadada;
width:50px;
height:50px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(border-radius.htc);
}
check the live demo:- http://jsfiddle.net/ZysQa/3/
i have used behavior hack for ie support border radius property so for ie border details you can read this article.....cross browsers css3 border radius
I have a couple of buttons inside a div with a specific width, and I am facing a problem where the buttons are being rendered differently in firefox vs chrome and safari.
In firefox, the buttons are bigger and are messing up my layout.
<div id="sort_by">
<button id="sort_by_price" class="sortButton" value="1">Price</button>
<button id="sort_by_bedrooms" class="sortButton" value="1">Bedrooms</button>
<button id="compareButton" class="sortButton">Compare</button>
</div>
CSS:
button {
display:inline;
float:left;
background-color:orange;
border:1px solid orange;
border-radius:5px;
-moz-border-radius:5px;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:14px;
text-decoration:none;
font-weight:bold;
color:#FFFFFF;
cursor:pointer;
padding:4px 10px 3px 7px;
}
#sort_by {
width:265px;
height:35px;
border-bottom-style:solid;
border-bottom-width:2px;
border-color:#c9c9c9;
padding-top:3px;
padding-bottom:3px;
padding-left:5px;
}
Rendered in firefox:
Rendered in Chrome:
It can be seen that the buttons in firefox are bigger. How can I fix this? Thanks.
Firefox adds an extra margin/padding to button elements that cannot be changed by standard CSS, you can however add the following to make it behave
button::-moz-focus-inner {
border: 0;
padding: 0;
}