I have a weird issue with CSS Pie and iE8 where Pie correctly applies the border-radius property to an element but the background of the element (a gradient or a flat color) overflows the borders and looks like it is at the top, hiding the actual element.
I have been working with Pie CSS for a while. I do know that while using it on a PHP environment the pie.php is needed and that the correct location for Pie is at the root of the site. I never had this problem but now that Im using a responsive framework Im having this issue. The button us made with this structure:
<p class="btn">
Learn More
</p>
CSS:
.btn {
position: relative;
display: inline-block;
width: auto;
height: 36px;
font-size: 16px;
line-height: 36px !important;
border: 1px solid #a0c401;
border-radius: 4px;
cursor: pointer;
margin: 0 0 20px 0;
-webkit-box-shadow: inset 0 1px 1px #fff,
0 1px 2px rgba(0,0,0,0.31); /* Remove this line if you dont want a dropshadow on your buttons*/
box-shadow: inset 0 1px 1px #fff,
0 1px 2px rgba(0,0,0,0.31); /* Remove this line if you dont want a dropshadow on your buttons*/
background: #c0eb03; /* Old browsers */
background: -moz-linear-gradient(top, #c0eb03 0%, #a8cd01 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c0eb03), color-stop(100%,#a8cd01)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c0eb03 0%,#a8cd01 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c0eb03 0%,#a8cd01 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c0eb03 0%,#a8cd01 100%); /* IE10+ */
background: linear-gradient(top, #c0eb03 0%,#a8cd01 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0eb03', endColorstr='#a8cd01',GradientType=0 ); /* IE6-9 */
-pie-background: linear-gradient(top, #c0eb03 0%,#a8cd01 100%);
behavior: url("PIE.php");
z-index: 10 !important;
}
.btn a, .btn:hover a {
display: block;
text-shadow: 0px 1px 1px rgba(199, 243, 6, 1);
text-transform: uppercase;
font-family: 'AvantGardeGothicITCW01D 731075';
padding: 0 20px;
text-align: center;
text-decoration: none;
color: #6a8100;
text-shadow: 0px 1px 1px rgba(199, 243, 6, 1);
}
It's the filter that's overflowing; it's not needed if you're letting PIE render the gradient via -pie-background. Remove the filter and all should be well.
Related
In internet explorer we get a strraight line.in chrome we get distorted lines and rest of all the browsers have the desired case.which is shown by first image. Kindly tell some code to achieve this as i need it very badly. here is the code:
ul#tabs li a {
color: #a09b95;
padding: 6px 15px 7px 15px;
padding: 6px 15px 5px 15px\9; /* IE-only fix */
text-decoration: none;
display: block;
border-bottom: 1px solid #c9c3ba;
border-right: 1px solid #c9c3ba;
/* background-color: #ffffff; */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f3efeb)); /* Saf4+, Chrome */
background: -webkit-linear-gradient(top, #ffffff, #f3efeb); /* Chrome 10+, Saf5.1+, iOS 5+ */
background: -moz-linear-gradient(top, #ffffff, #f3efeb); /* FF3.6+ */
background: -ms-linear-gradient(#FFFFFF, #F3EFEB); /* IE 8 */
background: -o-linear-gradient(top, #ffffff, #f3efeb); /* Opera 11.10+ */
background: linear-gradient(to bottom, #ffffff, #f3efeb); /* IE9+ */
-pie-background: linear-gradient(#FFFFFF, #F3EFEB); /* IE 6-7 via CSS3Pie */
behavior: url("http://ocw5.mit.edu/styles/pie/PIE.php");
}
ul#tabs li a.selected {
color: #b30838;
border-bottom: 1px solid #fff;
background-color: #fff;
background: none;
-pie-background: none;
behavior: url("http://ocw5.mit.edu/styles/pie/PIE.php");
}
/* Chrome/Safari-only CHP tab border fix */
#media screen and (-webkit-min-device-pixel-ratio:0) {
ul#tabs {
margin: 19px 0 -1px 0;
outline: 0;
}
}
Try this:
ul#tabs li {margin-bottom: -1px;}
I have the following links :
<div class="links">
Home
About Me
Contacts<span></span>
Contact Author
<div class="link">
</div>
</div>
with this css file:
.links {
height: 50px;
display: inline;
text-align: center;
padding: 0px 0px 0px 170px;
margin-right: 0px;
margin-top: 7px;
border: none;
line-height: 25px;
}
.links a {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
color: black;
font-family: Calibri;
font-size: 13px;
text-decoration: none;
padding: 2px 10px;
border: 1px solid #ccc;
}
.links a span {
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid #555;
display: inline-block;
margin: 2px 7px;
}
I want the links to show in one line ie: [home] [contacts] [link3] etc
but currently its showing on seperate lines like:
[home][contacts]
[link3]
How can I get them on one line?
You've got display: block assigned to your <a> tags. That will put each one on their own line. Remove that, and they'll be on the same line.
UPDATED to the real case scenario:
If you see the following on IE8 and you notice that the anchor background color has gone.
<a class="button-white" href="/contacts/index">Contacte-nos</a>
.button-white {
display: block;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
width: 7em;
font-size: 1.25em;
color: #000;
padding: .4em 1em .4em; /* tamanho */
border-radius: .5em;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#dddddd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#dddddd 100%); /* IE10+ */
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
}
I can't mark background as important, other wise, good browsers will have a white background instead of the gradient one.
I've tried to change background to "background-color" no effect.
What could it be ?
We have HTC enabled.
Thanks a lot
if you disable behavior: url(http://yoururl.com/css/PIE.htc), then the button is white in IE8 like it should be.
Your CSS is correct, but there is a override with the htc file.
You have a background. you just don't see it because it's white: http://jsfiddle.net/y5YfE/2/
Edit: change
background: #ffffff; /* Old browsers */
to
background: #f90; /* Old browsers */
You should get an orange background. tested in IE8 here on win7.
I currently have css styles for buttons that look a bit outdated. Here is my css:
a.yellow_button {
font-weight: bold;
font-size: 1.2em;
-moz-border-radius: 14px 14px 14px 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
background: #ffce2e;
color: #444;
text-shadow: 1px 1px 1px rgba(256, 256, 256, 0.9);
-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
border: 1px solid #444;
cursor: pointer;
text-decoration: none;
padding: 5px 6px;
margin-top: 0;
margin-left:0;
margin-right: 2px;
float:none;
display: inline-block;
}
a.yellow_button:hover {
background: none repeat scroll 0 0 #ff0;
color: #000;
}
You can see these buttons as they currently appear on comehike.com making the site's design kind of old looking.
What I need to do is make the buttons look like the yellow button on the top-right of this mockup:
Any idea which part of the css I should change to get that effect?
Right. This will do it.
.whatever-the-class-is {
/* No border */
border-style:none;
Now for some shadow
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
And the curved border
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
Finally, the gradient. This code is designed to work in alot of browsers.
background: #bfc126; /* Old browsers */
background: -moz-linear-gradient(top, #bfc126 0%, #ffff00 100%); /* Firefox */
background: -webkit-linear-gradient(top, #bfc126 0%,#ffff00 100%); /* Chrome, Safari */
background: -o-linear-gradient(top, #bfc126 0%,#ffff00 100%); /* Opera */
background: -ms-linear-gradient(top, #bfc126 0%,#ffff00 100%); /* IE */
background: linear-gradient(top, #bfc126 0%,#ffff00 100%); /* Probably should include this aswell */
}
You could create an image of the gradient, but this would take time, and would make the page slower to load.
How about this:
http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
or this:
http://css3buttongenerator.com/
Both sites give similar buttons, the first link is probably more relevant, you will just need to make them a bit taller.
Try this:
a.yellow_button {
-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-shadow: 1px 1px 1px #fff;
background: #dac303; /* Old browsers */
background: -moz-linear-gradient(top, #dac303 0%, #f1e000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dac303), color-stop(100%,#f1e000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dac303 0%,#f1e000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dac303 0%,#f1e000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #dac303 0%,#f1e000 100%); /* IE10+ */
background: linear-gradient(top, #dac303 0%,#f1e000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dac303', endColorstr='#f1e000',GradientType=0 ); /* IE6-9 */
}
That should get you started with the button and the text-shadow for the text. Let me know if you need further assistance!
To create the yellow gradient, you can either use a background image, or you can make use of CSS-gradients, like in this example. You will of course have to change to colors, but something like this:
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
To get the rounded corners you use the CSS border-radius property, reference. It would be something like:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
To get the white 1px text-shadow you can use the CSS text-shadow property, reference. Something like:
text-shadow: 1px 1px 1px #fff;
Notice that there will be limited browser support on this solution, as it is CSS3. Older browsers will ignore the rounded corners and the text-shadow.
I have the following CSS for a button:
login #submit, .grey_part_right1 #submit, .button99{
background: #9dd53a; /* Old browsers */
background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
background: linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
-webkit-box-shadow: 0 8px 6px -6px #666;
-moz-box-shadow: 0 8px 6px -6px #666;
box-shadow: 0 8px 6px -6px #666;
border: 1px solid #48922c;
float: left;
height: 30px;
padding: 0;
padding-bottom:4px;
width: 100px;
cursor: pointer;
font: bold 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
}
When the user clicks the button i want the shadow to go, and am moving the button 2px down and thus creating a 'real' button effect. So I have button with class=button99 and add the following:
.button99:active {
margin-top:2px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none
}
But the shadow does not go away until i move the mouse away from the button with the mouse button still down...
Any ideas why it does not immediately go away?