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.
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
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.
I am creating a menu with 4 different color borders. When viewed in Safari 5, the left and right borders go from top to bottom with no angles around the box. When viewed in FF 4, there is a border angle at the border-bottom and border-right elements. This makes the menu look different in different browsers. Here is the CSS for the menu item:
ul#mainnav a {
display: block;
text-decoration: none;
color: #b0c9da;
padding: 7px 7px 7px 14px;
border-bottom: 1px solid #01304f;
border-top: 1px solid #1a74af;
border-right: 1px solid #fff;
border-left: 1px solid #246792; }
Please advise. Thanks
This is caused by the browsers' determination of where to begin the border line and where to end it. Unfortunately there is no fix for this. Your best bet is to pick border colors that are similar enough that they will not stand out so tremendously.
Another option, requiring modern browsers / CSS3 support, would be to use a box-shadow on the element. For example:
box-shadow: inset 1px 1px 1px rgba(255,0,0,1),
inset 1px -1px 1px rgba(0,255,0,1);
You can add multiple layers of box shadows of only 1px width, and specify the direction that they "drop". Could be fun to play with.
For once, ff and ie comply. But in this instance chrome doesnt like it.
We have a field, with autosuggest attached, that appears after x amount of letters. Cannot really put a demo on fiddle, as its db driven.
However here is the css
.suggestionsBox {
z-index: 2;
position: absolute;
margin: 70px 0px 0px 146px;
width: 207px;
background-color: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #cccccc;
color: #000;
box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-webkit-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-moz-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
list-style: none;
margin: 3px 3px 3px 3px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #ffffcc;
}
And screenpic of ff , ie chrome appearance. Any suggestions, I am usually bloody good with css. But this has me stumped.
As requested here is html for this element:
<div class="field"><label for="propertysuburb">Suburb </label> <input name="propertysuburb" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" size="50" type="text" class="medium" /></div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
What does the margin for the .suggestionsBox do? As an absolutely positioned element, I believe it will just ignore that.
The issue seems to be that you're not setting any top / bottom / left / right values to your absolutely positioned .suggestionsBox div; this leaves it up to the browser to determine where to put it.
Make sure your .field class has "position: relative;" on it, then add a "top: 20px;" and "right: 0px;" to your .suggestionsBox styles. Just adjust the top / right values if it doesn't line up correctly.
First off, a nitpick.
When using CSS3 with vendor prefixes, ALWAYS use the non-prefixed version last, otherwise you may (potentially) break something:
-webkit-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-moz-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
As for your problem: I can't see the CSS for the .field div, but I assume it has a positioning context set as well (probably relative), otherwise the z-index on suggestionBox wouldn't work, and judging by the screenshots, it does. Now, what you haven't set is the actual position. The absolute positioning context should place the box in the top left corner of its parent (obviously, that's why the parent needs a positioning context too). If you need it to start at the parent's bottom, you also need to add top: 100%; to your .suggestionBox properties.
I can't really see anything else that might be wrong here.
To debug something like this, I would slightly modify your back-end code so that the suggestion list remains fixed and open, regardless of typed input. Load the page, then open the developer pane in Chrome, go to the Elements tab, and use the "magnifying glass" icon to inspect the misplaced elements. Play with the styles panel to discover which attributes are causing the incorrect offset (don't forget to try things like absolute vs. fixed position of the element or its parents). Once you have an idea of where things are going wrong, see if the "fix" is benign in other browsers.
This looks like it's most-likely a JavaScript issue. The suggestion list is most likely placed programmatically (given the position: absolute it seems certain), so I'd look to that code.
If it's not a JavaScript issue, the other possibility is that the "position parent" of the absolute element differs. Your CSS shows that the suggestion box is positioned absolutely, but we cannot see from your posted code what establishes the baseline for the position (how its nearest-positioned ancestor is defined).
One thing that can sometimes help with absolute positioning is to use the top style rather than the margin-top to move your absolutely-positioned element down.
Thanks to #mingos and #russelluresti
We have this fixed now:
css:
.suggestionsBox {
z-index: 2;
top: 59px;
right: 524px;
position: absolute;
margin: 69px 0px 0px 146px;
width: 207px;
background-color: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #cccccc;
color: #000;
-webkit-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-moz-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
}
and field :
.form .field { width: 50%; float: left; position:relative;}
Cheers Guys, perfect. I havent got Safari, but it works in the 3 I was interested in, and seems to be valid code now, which supports proper rules. Many thanks