I'm having a problem with rounded borders and a gradient in IE9. The gradient overflows the rounded border.
.cn_item:hover, .selected{
width:300px;
border:1px solid #333333;
cursor:pointer;
position:relative;
overflow:hidden;
height:49px;
color:#333333;
padding:5px;
margin:6px 5px 0px 0px;
text-shadow:1px 1px 1px #000;
background-image: -ms-linear-gradient(top, #DDDDDD 25%, #FF0000 5%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#666666');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#666666')";
zoom: 1;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
I already use the overflow:hidden; but nothing works. Any suggestions?
This is a known bug. If you search stackoverflow there are some questions just like this one.
IE9 border-radius and background gradient bleeding
The only way around it without adding more markup is to use svg.
Colorzilla gradient editor should make it easy.
Just use a wrapper div (rounded & overflow hidden) to clip the radius for IE9. Simple, works cross-browser. No need for SVG, PIE, JS, or conditional comments.
<div class="ie9roundedgradient"><div class="roundedgradient">text or whatever</div></div>
.ie9roundedgradient {
display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}
.roundedgradient {
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
/* use colorzilla to generate your cross-browser gradients */
}
Related
I am trying to create a line inside the thumb of a <input> with type range.
I have managed to modify some of the styling of the thumb using the ::-webkit-slider-thumb pseduo-element selector, as shown below, but I need a vertical line centered in the thumb of the slider. Is there a way to create such a line?
input[type="range"]{
-webkit-appearance:none !important;
width: 344px;
height: 18px;
/*background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 75%,#f6f6f6 75%,#f6f6f6 100%);*/
/*-webkit-filter: drop-shadow(0px 3px 5px rgba(0,0,0, 0.2));*/
border-radius: 18px;
margin: auto;
transition: all 0.3s ease;
background: rgb(190,220,0);
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none !important;
/*background-color: blue;*/
border: 1px solid #c0c0c0;
width: 34px;
height: 34px;
border-radius: 18px;
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(235,235,235,1) 100%, );
-webkit-filter: drop-shadow(0px 3px 5px rgba(0,0,0, 0.2));
z-index: 1;
/*background: white url(../icons/gc4_icon_cssbutton-v.svg) no-repeat;*/
}
<input type="range" id="test" />
In some old versions of Chrome only (but not in most browsers), you can do this using ::after or ::before pseudo-elements:
input[type="range"]::-webkit-slider-thumb{
position:relative;
display:block;
}
input[type="range"]::-webkit-slider-thumb::after{
content:'';
position:absolute;
top:0;
height:100%;
left:50%;
width:1px;
background:#000;
}
DEMO
However, from Chrome 49 onwards, this no longer works; allowing pseudo-elements to be chained in a CSS selector (like foo::-webkit-slider-thumb::after) was a violation of the CSS spec, and Chrome has changed its behaviour to conform to the spec. This also never worked in Firefox, Internet Explorer, or Edge.
I wish do a rectangle in CSS with graceful degradation to work in IE8+. And work fine in Chrome, Firefox and Safari browsers.
Supposed HTML Tag:
<span class="tag tag-gray">FRETE GRÁTIS</span>
See sample:
http://imageshack.us/photo/my-images/850/roundcutcorner.png/
Thank's
Pure CSS Solution
Here's the jsFiddle example with comparison to original image and the CSS:
span.tag {
margin:4px 5px;
position:relative;
border-radius:5px;
background:red;
display:inline-block;
padding:.6em 4.5em;
text-align:center;
}
span.tag-gray {
background: #7c7d80; /* Old browsers */
background: -moz-linear-gradient(top, #7c7d80 0%, #7c7d80 50%, #66686b 51%, #66686b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7c7d80), color-stop(50%,#7c7d80), color-stop(51%,#66686b), color-stop(100%,#66686b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* IE10+ */
background: linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c7d80', endColorstr='#66686b',GradientType=0 ); /* IE6-9 */
color:#fff;
font-family:sans-serif;
font-size:.7em;
font-weight:bold;
}
span.tag:after {
/* right, height, and width should equal eachother */
right:-18px;
height:18px;
width:18px;
content:".";
display:block;
position:absolute;
top:0;
font-size:0;
overflow:hidden;
background:#fff;
-moz-transform-origin:0 0;
-moz-transform:rotate(-45deg) translate(-50%, -50%);
-webkit-transform-origin:0 0;
-webkit-transform:rotate(-45deg) translate(-50%, -50%);
transform-origin:0 0;
transform:rotate(-45deg) translate(-50%, -50%);
}
Assuming the HTML is:
<span class="tag tag-gray">FRETE GRÁTIS</span>
Gotchas
To get it to work with older (and other) browsers, you may want to add the prefixed versions of border-radius
To get it to work in non-webkit/moz browsers, simply add the corresponding prefixed versions of transform and transform-origin
The "cut" cannot be transparent, but you can make it appear to be by setting it to the same color(s) as the background
Due to using border-radius, you cannot set div.cut's overflow to hidden as the div's background will bleed through along the outer edge of the radius, so you have to make sure you have enough room outside of the element to avoid covering other elements/text. A workaround is to set the background to a gradient and have the outer edge be transparent (aka right side)
a funny but probably not the best solution is to cover your image with triangle div using position-absolute and z-index :). To round your corners you can use border-radius (but it will not work in IE8 unless you add js to support css3 properties)
Is this fiddle something similar to what you need?
Here is the code for it
`.tag.tag-gray {
-webkit-border-radius: 5px;
-webkit-border-top-right-radius: 300px;
-moz-border-radius: 5px;
-moz-border-radius-topright: 300px;
border-radius: 5px;
border-top-right-radius: 300px;
}`
Try this:
<div class="rounded">FRETE GRÁTIS<div class="tri"></div></div>
CSS:
.tri {
width: 0;
height: 0;
border-top: 0px solid transparent;
border-bottom: 20px solid transparent;
border-right:20px solid #ffffff;
position:absolute;
top:0px;
right:0px;
}
.rounded {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 6px 20px;
background: -moz-linear-gradient(
top,
#c0c0c0 0%,
#333333);
background: -webkit-gradient(
linear, left top, left bottom,
from(#c0c0c0),
to(#333333));
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 0px solid #000000;
width:120px;
position:relative;
}
And for IE8, I'd use CSS3 PIE
If you're okay with using one image, you could make a simple white triangle image with a transparent background (PNG 24), then do something like this:
.tag-grey {
background: grey url(triangle.png) no-repeat right top;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
It's not pure css, but it uses a standard CSS method. The upshot is that this will work in IE7 and up, just without the other rounded corners.
Running Safari 5.05.
This CSS is looks fine in Chrome and Firefox, but when displayed in Safari, the border-left only spans to the beginning of the border-radius. This leaves a gap at the top/bottom.
.boxWithLeftBorder {
height:100px;
width:100px;
background: #ddd;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border-left: 20px;
border-color:#000;
border-style:solid;}
I've included an image below to clarify.
Given the wisdom of the crowds I'm guessing this is either well known or there is an easy workaround. I've Googled to the best of my ability and would appreciate any ideas. Thanks!!
Using some creative CSS pseudo elements (:before or :after), you can achieve your effect and use minimal markup at the same time. Note: The red border color emphasis is mine.
HTML:
<div class="boxWithLeftBorder">Lorem Ipsum</div>
CSS:
.boxWithLeftBorder {
background: #ddd;
border: 3px solid #000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
height: 100px;
position: relative;
width: 100px;
padding: 0;
}
.boxWithLeftBorder:before {
background-color: #c00;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
content: "";
display: block;
float: left;
height: 100%;
width: 20px;
}
Edit this Fiddle: http://jsfiddle.net/BYa9C/5/
Safari 5.05 and Firefox 3.6+ should support border-radius without the -webkit- and -moz- prefix.
If you have elements inside your rounded-corner elements, the will need to have completely transparent backgrounds or to have rounded corners themselves (first and last elements inside the element in discussion)
You'll wind up with issues attempting to do this in this fashion because of how borders are drawn -- and the vagaries across different browsers at the moment.
You can hack the functionality by adding a wrapper box:
.outer-box
{
padding:2px 2px 2px 20px;
border:none;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background:#000;
width:100px;
height:100px;
}
.inner-box
{
border:none;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
background:#ddd;
width:100%;
height:100%;
}
html:
<div class="outer-box">
<div class="inner-box"></div>
</div>
I leave in the -moz and -webkit prefixes because There is still a significant amount of Firefox 3.5 and Safari 4 out there.
Note that the inner box has a smaller radius. This is necessary because the angles will change as you shrink the boxes.
How can I create a div with rounded corners and transparent backgrounds? A bit like twitter does. So that at the edge of the corners you can see the page background and not a black edge.
for a simple Radius, use this CSS:
div{
-moz-border-radius:10px; /* for Firefox */
-webkit-border-radius:10px; /* for Webkit-Browsers */
border-radius:10px; /* regular */
opacity:0.5; /* Transparent Background 50% */
}
Greez, Chuggi
For full control over which elements are transparent and which are not, specify colors in rgba instead of hex:
div{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background: #fff; /* fallback for browsers that don't understand rgba */
border: solid 10px #000; /* fallback for browsers that don't understand rgba */
background-color: rgba(255,255,255,0.8); /* slighly transparent white */
border-color: rgba(0,0,0,0.2); /*Very transparent black*/
}
The fourth number within rgba is the level of transparency (alpha channel), 1 represents fully opaque and 0 is fully transparent.
Using css3:
#divid {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
You can read more about it here: http://www.css3.info/preview/rounded-border/
I am using an input type='submit' with CSS rules applied that make the background a gradated dark blue and the font color white. I cannot get this input to render consistently in IE 8. In some parts of my site, it looks just fine, with its lovely white type. In other parts, the color assigned to the body trumps the white applied by the CSS rules.
I've done a fair bit of research on this and can't find a solution that works. The one I did find on CSS Tricks recommended adding the css using jQuery. I tried this. I successfully added an inline style, but IE8 still trumped my white. I've switched in and out of Compatibility View, still no dice. 0
Why?
Here is the pertinent markup and CSS.
CSS
body {
color:#222;
font-size: 12px;
width:100%;
background:#8A7967 url(images/bg_body.png) top left repeat-x;
}
.buttonBigBlue,
input[type="submit"] {
color:#FFF!important;
-webkit-border-radius:12px;
-moz-border-radius: 12px;
border-radius:12px;
padding:3px 9px;
text-transform:uppercase;
font-weight:bold;
text-align:center;
vertical-align:middle;
border:1px solid #74a1a9;
cursor:pointer;
background: #678382; /* for non-css3 browsers */
background:-webkit-gradient(linear, left top, left bottom, from(#77A7B1), to(#678382));
background:-moz-linear-gradient(top, #77A7B1, #678382);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#77A7B1', EndColorStr='#678382'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#77A7B1', EndColorStr='#678382')"; /* IE8 */
}
MARKUP
<input type="submit" class="buttonBigBlue" id="login" value="Login" name="login">
This button displays with #222 text in IE8.
<input type="submit" class="buttonBigBlue" id="saveChanges" value="Save Changes" name="saveChanges">
This button displays with #FFF text in IE8
UPDATE after further investigation.
The containing div for the inputs that won't display properly is called #loginBox. It's styles are these:
#loginBox {
width:300px;
margin:25px auto;
padding: 25px 30px 30px;
border:1px solid #c9b9a8;
-webkit-border-radius:9px;
-moz-border-radius: 9px;
border-radius:9px 9px 9px 9px;
-webkit-box-shadow:rgba(0,0,0,.3) 4px 4px 6px;
-moz-box-shadow: 4px 4px 6px rgba(0,0,0,.3);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#544845')";
/* For IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#544845');
min-height:160px;
background-color:#fff;
box-shadow: 4px 4px 6px rgba(0,0,0,.3);
}
When I remove the -ms-filter and filter rules that set the box shadow, the input text returns to white.
Both display the same way in my IE8
example: http://www.jsfiddle.net/gaby/9grJP/
Maybe you have other rules overriding these ones.
Revise your CSS, you likely have some CSS rule that overrides this. Your sippet works perfectly standalone.