I've got a PIE folder in my libraries directory, and css3pie module folder in my modules directory.
I've got the following css in my layout.css:
#block-block-1, #block-block-7, #triptych, #block-block-8 {
border: 1px solid #EEEEEE;
padding: 10px 20px;
-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: #EEEEEE;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEEEEE), to(#FFFFFF));
background: -webkit-linear-gradient(#EEEEEE, #FFFFFF);
background: -moz-linear-gradient(#EEEEEE, #FFFFFF);
background: -ms-linear-gradient(#EEEEEE, #FFFFFF);
background: -o-linear-gradient(#EEEEEE, #FFFFFF);
background: linear-gradient(#EEEEEE, #FFFFFF);
-pie-background: linear-gradient(#EEEEEE, #FFFFFF);
behavior: url(/../libraries/pie/PIE.htc);
}
I've enabled the module and have the following option selected: Use theme settings
Use selector settings from theme info file.
The rounded corners are not working in IE, but they are working in Firefox. What am I missing?
This site uses css3pie and it's meant to be working, but for me, on IE8 the corners are not rounded.
Perhaps try removing the first forward slash in your behavior line and see if that helps.
Try adding a position: relative into you CSS statement. I've had that issue a couple of times and it's normally resolved by doing that. Further information can be found at: http://css3pie.com/documentation/known-issues/.
Related
I have a Joomla website based on Yootheme's Sync template.
I have my search module which display auto suggest result when visitor start to type characters in search field.
But these auto suggest results are not displayed properly because I published the search module inside a tab module.
See screenshot:
http://prntscr.com/3kwpmf
This is the CSS of the result:
.searchbox .results {
top: 49px;
width: 300px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,0.1);
border-bottom: none;
border-radius: 5px;
background: #f7f7f7;
background: -webkit-linear-gradient(top, #f7f7f7, #f4f4f4);
background: -moz-linear-gradient(top, #f7f7f7, #f4f4f4);
background: -o-linear-gradient(top, #f7f7f7, #f4f4f4);
background: linear-gradient(to bottom, #f7f7f7, #f4f4f4);
box-shadow: 0 1px 0 0 rgba(0,0,0,0.2), inset 0px 1px 0 #fff;
text-shadow: 0 1px 0 #fff;
}
Is there someone who can help me to fix that?
Set to position relative and retrieve any height on the wrapper if you want to put inside the box, if you want to overlap set to position: absolute and z-index 999
set:
z-index:100
or a higher value than your tab module.
I have two css file.I have a class following in one css below
input[type="submit"], input[type="button"], .butLink {
padding: 3px 9px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3);
-webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3);
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3);
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
font-weight: bold;
cursor: pointer;
color: #FFFFFF;
background: #A5BD24;
background: -moz-linear-gradient(top, #A5BD24 0%, #7DAC38 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A5BD24), color-stop(100%,#7DAC38));
background: -webkit-linear-gradient(top, #A5BD24 0%,#7DAC38 100%);
background: -o-linear-gradient(top, #A5BD24 0%,#7DAC38 100%);
background: -ms-linear-gradient(top, #A5BD24 0%,#7DAC38 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a5bd24', endColorstr='#7DAC38',GradientType=0 );
background: linear-gradient(top, #A5BD24 0%,#7DAC38 100%);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
border: 1px solid #781;
}
Now I want to change this style from another css file.I tried following below which isnt working -
input[type="submit"], input[type="button"], .butLink
{
background-color:#000 !important;
}
Any Idea?
Writing background will override previously defined properties.
Write:
input[type="submit"], input[type="button"], .butLink{
background:#000;
}
Try using the background rule instead of background-color, and make sure that your stylesheets are in the correct order in the <head> of your HTML. If they are in the correct order, the rule should not need the !important.
You can do it easily.
Option one: If you apply this css rule for the particular page so use internal css .Add this rule within the header tag like this
<style>
input[type="submit"], input[type="button"], .butLink
{
background-color:#000 !important;
}
</style>
It will perfectly works because internal css overwrite the external css rule.
Option two: If you apply this css rule for the all pages so use external css .Add this rule after the last css property:value;like this
color: #FFFFFF;
background: #A5BD24;
background:#000;/* This will overwrite with the previous background property value #A5BD24;
Hope the answer!
I have few css clases that uses properties like below:
.rfs_left_btn
{
width: 176px;
height: 20px;
background: #fefefe;
background: -moz-linear-gradient(top, #fefefe 0%, #fafafa 48%, #f1f1f1 50%, #e9e9e9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(48%,#fafafa), color-stop(50%,#f1f1f1), color-stop(100%,#e9e9e9));
background: -webkit-linear-gradient(top, #fefefe 0%,#fafafa 48%,#f1f1f1 50%,#e9e9e9 100%);
background: -o-linear-gradient(top, #fefefe 0%,#fafafa 48%,#f1f1f1 50%,#e9e9e9 100%);
background: -ms-linear-gradient(top, #fefefe 0%,#fafafa 48%,#f1f1f1 50%,#e9e9e9 100%);
background: linear-gradient(top, #fefefe 0%,#fafafa 48%,#f1f1f1 50%,#e9e9e9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#e9e9e9',GradientType=0 );
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* Drop shadow*/
-webkit-box-shadow: 0px 1px 1px #cecece;
-moz-box-shadow: 0px 1px 1px #cecece;
box-shadow: 0px 1px 1px #cecece;
margin-bottom: 5px;
}
When creating a StyleBundle like below:
StyleBundle bundle_cssSession = new StyleBundle("~/Css/bundle_session");
bundle_cssSession.Include("~/Styles/_catalog.css");
The System.Web.Optimization.Styles.Render("~/Css/bundle_session") fails with the following error:
/* Minification failed. Returning unminified contents.
(2196,14): run-time error CSS1036: Expected expression, found '0'
*/
If I remove the multiple 'background' properties (and leave just one of them) the minification works.
Is there a solution to use the StyleBundle with CSS3 properties like the ones above?
Thank you.
There are known bugs in the Optimization namespace that cause it to fail on CSS3. The bug reports are here and here. The only advice I can offer is to either compress them yourself and give the style bundle the .min file to use when serving optimised content or use a different minification method.
Maybe, it can be a wrong mode to do (or a 'gambiarra', like we say in Brasil), but I fixed it moving the gradients tag to inline.
I'm having some problems to add opacity to IE 8 (I would also like this to work in IE7 and IE9 but I've just tested it on IE8).
I have my css as this:
label{
color: #333;
text-decoration: none;
border: solid 1px #bebebe;
width: 138px;
padding: 5px;
text-align: center;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px #333;
box-shadow: 0 8px 6px -6px #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #f2f2f2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#bdbdbd');
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#bdbdbd));
background: -moz-linear-gradient(top, #f2f2f2, #bdbdbd);
display: inline-block;
margin-bottom: 10px;
position: relative;
outline: none;
}
So all my labels must be the same in all explorers (This is working with no problem) but I wan to add a opacity to some of these labels. I was using:
.aclass{
opacity:0.4;
filter:alpha(opacity=40);
}
But it is not working on IE. I read some articles here, for example:
Opacity CSS not working in IE8 , opacity in IE8 not working
and others but I haven't found the solution for this. I tried adding this:
.aclass{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
opacity:0.4;
}
Also adding "zoom:1;" to the previous block or " display: block;" but still not working. I haven't found the solution to this, so if anyone could help me I would really appreciate it.
Thanks in advance!
In your gradient filter, you can define #AARRGGBB whereas the AA == alpha values.
From MSDN. You might have better luck doing this than adding unique filters for gradient and alpha.
Can someone direct me to a good Textbox replacement or css design for the standart one.
I think the regular one is boring but functioning well. I just need to make it look nicer.
Thanks.
In the resulting HTML page TextBox is rendered as a standard input element:
<input type="text" />
So, you may apply any sort of CSS styling for it, there is no need for another control. As for CSS example, you may start from here to get some ideas.
Apply CSS on MarkUp like this.
<asp:TextBox ID="TextBox1" runat="server" CssClass="textbox" />
CSS
.textbox{
behavior: url(border-radius.htc);
border: 1px solid #CCCCCC;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 6px 6px 4px;
box-shadow: 2px 3px 2px #eee;
-moz-box-shadow: 2px 3px 2px #eee;
-webkit-box-shadow: 2px 3px 2px #eee;
background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #f4f4f4), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #f4f4f4 1px, #FFFFFF 15px);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#f4f4f4');
}
Before that download http://curved-corner.googlecode.com/files/border-radius.htc and place it in the same folder the CSS resides.
Demo: http://jsfiddle.net/naveen/YqRCU/2/
http://jsfiddle.net/533eV/1/ maybe it is to simple, but you could play with shadows, or change colors ect.
I now saw this website which shows many nice text inputs (check #44 out):
http://html-generator.weebly.com/css-textbox-style.html