I just noticed that my address link styled as a button does not properly show a radius in IE9 when using the CSS below:
a.btn {
background: #F00;
color:#333;
font-size:12px;
padding: 3px 4px 3px 4px;
border:1px solid #444;
border-radius:3px 3px 3px 3px; -moz-border-radius:3px; -webkit-border-radius:3px;
cursor:default;
}
CSS example
When I remove the border:1px solid #444; then a nice curved border appears.
Is this a bug with IE? In Firefox everything works good. Anyone else seen anything like this? Seems like it only happens when border-radius is set to a low value. I know this is not very important on the scale of things but I'm interested to hear if anyone knows why the radius doesn't properly show.
It works for me.
Check it using
border-radius: 20px;
http://jsfiddle.net/6Nr2n/1/
http://prntscr.com/2djxa
Related
I try to create a handwritten looked underline to input.
With this complex border-radius, Chrome looks great. In Safari, however, these artifacts appear.
I tried to fix it with
-webkit-background-clip: padding-box;
from: https://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
input {
border: none;
border-bottom: 2px solid;
border-radius: 130px 50px/4px 2px;
}
https://codepen.io/matzR/pen/dybpXgO
Safari: artefacts over the input
Safari seems to have some interesting decisions as far as figuring out the border color goes. Try zooming at this, for instance:
input {
border: 0.001px solid white;
border-bottom: 2px solid red;
border-radius: 130px 50px/4px 2px;
padding: 10px;
width: 300px;
}
I guess the linked workaround doesn't work because the border isn't inside the element?
But this is OK (codepen):
input {
border: 1px solid transparent;
border-bottom: 2px solid red;
border-radius: 130px 50px/4px 2px;
padding: 10px;
width: 300px;
}
<input>
My other considerations were using a SVG element for background and/or using border-image-slice to simulate the behaviour.
Using the following css, I get a slight jagged or non-smooth circle rendered in the iOS webview browser. Anyone know of a fix? It shows up at any border width, and can event be detected as low as 1px with the high density retina display on the iPhone.
a.circle {
display: block;
position:absolute;
z-index:10000;
border: 6px solid #000;
box-shadow:inset 0px 0px 0px 1px #ccc;
width:54px;
height:54px;
top:352px;
left:123px;
border-radius: 99px;
background-color: #fff;
}
a.circle:active {
box-shadow:inset 0px 0px 0px 1px #fff;
}
Notice the slight hard and somewhat angled lines on both the border and inner 1px shadow:
http://www.css-101.org/articles/-webkit-transform-rotate-and-anti-aliasing/rotate-creates-jagged-border-image.php
This is a slightly different issue, but it directly relates to iOS.
I specify a box shadow for a span. The shadow only shows on the right. Something seems to cover the bottom side of the shadow. I tried resizing the span but this doesn't do it. I have this in the style specifications.
#feastsaint:hover span {
display:block;
width:385px;
height:65px;
margin-left: 120px;
border:1px solid #808080;
padding:2px;
font-size:11px;
border-radius: 5px;
box-shadow: 3px 5px 8px #888;
-moz-border-radius: 5px;
-moz-box-shadow: 3px 5px 8px #888;
padding: 5px 5px 5px 15px;
background:#CCFFCC;
/* border:1px solid #404040;
background-color:#FFCCCF; */
color:#404040;
white-space: normal;
z-index:99;
}
What could be the problem?
NOTE: Couldn't upload the image for the box shadow.
Add some margin-bottom to your span.
#feastsaint:hover span {
....
margin-bottom: 5px; // (play with this a bit till you get the desired effect)
}
you really should post more info about your problem such as the html code your trying to affect, that said try:
change
#feastsaint:hover span
to
span#feastsaint:hover
I recently experienced some problems with Chrome on MAC. I just had to restart Chrome several times until it worked again. For me bitmaps and some images online were messed up (no vectors). Maybe just restart Chrome and look if it works. Otherwise just revise your CSS as the other answers suggest. Good Luck
Please see my Image here http://www.tiikoni.com/tis/view/?id=eba96bb
As you can see that the tool tip is being displayed beside the window , how to solve this ??
My code and css which is responsible to show the Marker is
'position:absolute; z-index:1;background-color:#fefbd6;border-bottom:30px;height: 75px;-moz-box-shadow: 3px 3px 3px #666; -webkit-box-shadow: 3px 3px 3px #666;position: absolute;box-shadow: 3px 3px 3px #666;left: 50px;top: 50px;width: 150px;border-top: 20px; font-weight:bold; solid #77c;height: 80px;border-color: #FFFF99 transparent transparent transparent;';
and my css for this
.flotr-mouse-value {
font-size: 14px;
font-weight:bold;
}
.flotr-mouse-value:after {
content:"";
border-color: #fefbd6 transparent transparent transparent;
border-style:solid;
border-width:20px;
width:0;
height:0;
position:absolute;
bottom:-40px;
left:20px
}
Please help as how to resolve this
I believe you will have to implement a javascript detection method to detect when the tooltip will appear near the right edge of the window. You can then reposition your tooltip accordingly or maybe change its anchor point.
I just updated to firefox 4, and it's messing up my sidebar. I have a contact form in my sidebar. If i give 1px margin to my texarea, it aligns fine in all browsers except firefox 4. It looks fine in FF 4 if i give it a 3 px margin. How can I solve it? my css for textarea:
textarea {
background: #0D1E2A;
border: 1px solid #102B3E;
box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-border-radius: 2px 2px 2px 2px;
padding: 1px;
margin-left:1px;
width:145px;
overflow:auto;}
It might have to do with applying border-radius to only Firefox and no others but without a link or the complete markup, it's all a wild guess. I also don't recall which browsers support box-shadow.