I'm trying to create arrows using borders but FF10 on win7 doesn't want to play ball.
It adds a 1px border around my border.
Here is a JSFiddle with a minimal example:
http://jsfiddle.net/5jjVb/1/
It doesn't matter what color the border I set has, the extra border is always the same color.
For those of you not on FF or on window 7 here is a screenshot:
And here is the same arrow in FF on OS X:
I could always change the color of the arrow to the same color as the extra border but that doesn't feel right.
It's a bug. https://bugzilla.mozilla.org/show_bug.cgi?id=646053
And here is workout to tackle this issue. http://jsfiddle.net/5jjVb/3/
Try this:
div {
border: 30px solid transparent;
border-left-color: #EEE;
-moz-border-left-colors: none;
}
Give rgba() instead of transparent for transparency.For more check my this answer
CSS Transparent Border Problem In Firefox 4?
Related
is there a way to set background-color in safari to transparent? Currently my png is displayed with a white background instead of transparent.
I've tried:
background-color: transparent;
background-color: rgba(255,255,255,0);
appearance: none;
and even
-khtml-background-color: transparent;
Nothing wrong with your CSS, but if you've saved your image with a colored background (e.g. red/white/yellow) it's not possible to "overwrite" this color using CSS. Therefore you need to make sure the background of the image is transparent.
Take a look at the following page to get an idea of what I described.
https://www.causevox.com/blog/using-the-right-logo-image-transparent-png/
*EDIT
I jumped the gun a little bit, its the border-bottom that causes it.
New question:
Can you remove the picture frame effect from borders?
So i have this CSS code on a div:
border-left: 5px solid #009933;
It displays fine in Safari:
But it displays like this in Firefox and Chrome:
So i guess my question is, why does Firefox and Chrome display it differently and how can i make it look like Safari displays it?
Thanks
The exact rendering of border corners differ between browsers.
With thick borders, the browser tries to make a diagonal boundary between the borders. The pixels right in the corner can get the color from one of the borders:
******************
+*****************
++****************
+++***************
++++
++++
++++
or the other border:
+*****************
++****************
+++***************
++++**************
++++
++++
++++
Different browsers will use either of those two approaches, but differently on all four corners of the element. I once compared what different browsers use, and it almost seemed like each browser vendor went out of their way to pick an approach that no other browser used.
In your case Firefox and Chrome happen to use the horizontal border color for the boundary on the bottom left corner.
To get the side borders to go on the outside, i.e.:
++++******************
++++******************
++++******************
++++******************
++++
++++
++++
++++
you would use one element inside another, and set the vertical borders on the outer element and the horizontal borders on the inner element.
Example (with exaggerated border widths just to show the effect):
.outer { border: 10px #0c0; border-style: none solid; }
.inner { border: 10px #ccc; border-style: solid none; }
<div class="outer"><div class="inner">Demo</div></div>
I have a problem with background-color of an element overflowing it's border when using border-radius. I have seen this problem many times and it isn't a special case.
Here is the description:
I have a <input type="submit"> which has the following styles:
background-color: #FF0000;
border: 2px solid #222222;
border-radius: 5px;
And if you look at the picture blow, the background-color is overflowing a little at all 4 rounded corners:
Note: To see the problem better I used the browser's zoom feature. So the picture is a little larger than it's original.
This problem always happens, usually I don't see it because my colors are in similar ranges but when using completely different colors like picture above, it's obvious ...
I believe it is a rendering problem in the browser (Firefox 30 and IE11) since I can't see the same problem using Google Chrome. How can I fix this in Firefox and maybe IE? (IE isn't important)
To fix this issue in FireFox, looks like there is a simple trick with background-clip:
background-clip: padding-box;
Demo
There is still another work-around with using linear-gradient background and I found out that setting background-repeat to no-repeat works:
background:linear-gradient(red,red) no-repeat;
Demo 2
In the example bellow:
http://jsfiddle.net/Du8f6/3/
Im setting inner shadow to the container and 10px border with border-radius set to 50%.
And the result is weired thin white border outside the container border.
The thin white border is visible in:
mozilla firefox
ie 11
and its not visible in:
opera
safari
chrome
any suggestions for fixing this are welcome.
It's because the way the border is rendered: painted over the div. It's another "half pixel" issue and the border color mixs with the div background color... Take a look to Border-radius: 50% not producing perfect circles in Chrome or IE11 draws small line between positioned elements . Those are not the same issue, but have the same origin.
Probably your easier workaround is to skip out the border width of the div and set up a "fake" border using the background of a new wrapper div:
In your html:
<div class="fakeborder"><div class="sub">Hm</div></div>
and in your css:
.sub {
...
border: 0px solid black;
...
}
.fakeborder{
margin:0;
padding:10px; /*The fake border width*/
background:black; /*The fake border color*/
}
I had a similar issue.
Even if I set
box-shadow:0 0 0 rgba(0,0,0,0);
to the element just because I didn't want a box-shadow for that element and I thought I could override the property like this.
That was working in webkit browsers, but FF was still rendering a thin shadow.
A better solution and the best practice to override a css property to its default, it is obviously set it to its default (dumb!)
box-shadow: none
I am just using a simple CSS code for this:
button {
border: 1px dotted #bebebe;
background: #eeeeee;
font-size: 20px;
color: black;
padding: 7px;
border-radius: 4px;
}
But the dotted border doesn't show up in the left side:
What am I doing wrong?
EDIT:
Well, for everyone who has this problem, it is about the navigator you're using and zoom. I don't know why but some buttons you can see the border in all sides, and some buttons you can't.
There are bugs in browsers in rendering one pixel wide dotted borders, see e.g. the Mozilla bug report Dotted/dashed border-radiused corners are rendered as solid and the Chromium bug report Another Border-Bug: dotted line turns solid on the half way. You seem to have triggered one of such bugs in Chrome. Testing your jdsfiddle in Chrome 28beta on Win 7, I can see the left border as solid and the bottom border solid in the left half. (This is a bit difficult to see but it becomes more visible if you take a screenshot and zoom it or set the border color to red, for example.)
I’m afraid it might be difficult to find an acceptable workaround. In this particular case, the bug seems to disappear if you remove the rounding of corners (which you probably don’t want to do) or set the border width to 2px.
A dotted 1px border is very hard to see. If you zoom in Cntrl + + I think you'll see that there is actually a dotted border.
Alternatively, changing 1px to 2px : border: 2px dotted #bebebe; also shows that the border is present.
EDIT:
Remove the border-radius: 4px; and you'll see the dotted border.