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
Related
Someone please help me understand what is causing this inconsistency of the line widths. I know there are a lot of questions on this topic, but I couldn't solve my issue with any of them.
I made an SVG border to use with CSS border-image.
Here is my CSS:
border: 70px solid transparent;
border-image: url("src/assets/images/pixel-border.svg") round;
border-image-slice: 5;
Here is my image:
And this is how it renders on the page:
You can clearly see that left & top borders are thicker than right & bottom ones when SVG is used with border-image.
Here is the reproducible example
Interestingly, the SVG is rendered perfectly when used with background-image.
Here is the codepen for that:
Does anyone know something more about Opera outline bug?
Check this out:
http://jsfiddle.net/BYgMr/
<div id="outline">TEST</div>
<div id="another-div">Another div</div>
#outline {
border: solid 1px #000;
outline: solid 1px red;
background-color: #fff;
width: 200px;
height: 200px;
}
#another-div {
position: absolute;
top: 100px;
left: 100px;
border: solid 1px #000;
outline: solid 1px blue;
background-color: #eee;
width: 200px;
height: 200px;
z-index: 5000; /* even this is not helping */
}
I'm using the latest Opera, I've checked on TWO different machines with different Opera versions all of them render it like:
What's THAT? In any FF/Safari/Chrome the outline goes below grey area, but in Opera it's still above (even if div parent is way below!).
Google search gives only "Opera 9.5+ CSS bug: rendering outline over absolute positioned" link, but it doesn't want to open.
Any temporary fixes? Or maybe I'm blind and made a horrible mistake somewhere?
This is more of a missing spec in Opera rather than a bug. A bug constitutes something not working according to specifications and Opera is following W3 standards according to step 10 - http://www.w3.org/TR/CSS21/zindex.html)
It is a missing spec in Opera because there's no way to set a style above the last block drawn namely an "outline".
Its probably in our best interest not to use an outline when we could use border or box-shadow but I can't do that in my case since I've got a tooltip which thousands of people load independently onto their sites. And I don't have the luxury of changing everybody's template styling nor would I ever want to.
I've submitted a bug report to Opera (DSK-339836). Hopefully they'll give us a way to draw something above the last thing drawn (ie. outline)
This is not a bug!
http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines
The outline created with the outline properties is drawn "over" a box,
i.e., the outline is always on top, and does not influence the
position or size of the box, or of any other boxes. Therefore,
displaying or suppressing outlines does not cause reflow or overflow.
Outline is not supposed to be "just another border" property. Its more needed for debug, or creating visual UI hints, around certain elements.
It's not a "bug," per se, but a difference in how the spec was implemented. The outline highlights the edges of the box. That's it. It isn't supposed to be used as a border. If you look closely, you'll see that only the red outline overlaps the other box, but the dark border does not.
Is there a reason you're using a border and an outline and overlapping divs? That seems like an odd use case. If you need to use both, you can use box-shadow as a bit of a hack to get the effect you want in most recent browsers: box-shadow: 0px 0px 0px 1px red;.
First: I see a lot of talk and no intelligent answers.
Second: the outline property in opera seems to have a positive Z-Index and stays on top of all other Z-Indexes.
Third: I came looking for a fix or a deal with it, but instead got rubbish and opinions, and we all know what opinions are like.
I see this as a browser code issue that separates the outline from the element and gives it a positive Z-Index above everything else. All other browsers I have tried work fine including mobile browsers, except Opera.
I was once fond of Opera as a mobile browser but am now seeing more draw backs than anything else.
The only fix I see at this point is a browser ID script that removes the outline property for the Opera browser.
Yes, it is a bug!
CSS 2.1 outlines differ from borders in the following ways:
Outlines do not take up space.
Outlines may be non-rectangular.
So nowhere it states that outlines should be on top of other boxes. Borders don't do that! That the outline is drawn above its own box is allright but thats it. Another box above with a higher z-index and it should not be visible.
I can not even nicely show a floating popup window over a div with an outline, it shines through! This is simply wrong. No other browser does it like this.
I have been googling for rounded corners with a css div.. but found very cluttered stuff.. some are still using for images of rounded corners and placing them on four corners...
can somedoby help with with a simple CSS code for this... or can it be attained with jQuery
The CSS way to support border radius is as follows:
CSS:
.myClass
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
This will tell Mozilla, Webkit and then standards reading browsers (as far as I understand FF4, Chrome 6 and IE9 will read without the browser prefix) to round your corners by whichever pixel radius you see fit :)
Images were used before these CSS options were available, and the articles are still there. There are also jQuery solutions such as the Curvy Corners script which does support IE.
I've got a webpage I'm designing and my design works great in google's Chrome browser but I'm using the CSS 'border-radius' property which as I'm sure you know isn't supported by IE. I'm trying everything I can think of but I've got a few things going on that are causing me a lot of trouble
The 'box' in question that I'm trying to get rounded corners on has a white background with a background image
The page background is a gradient and the outside corners must be transparent to look right.
I've got a green border running around my box.
Here's a sample image that shows what I'm trying to achieve:
alt text http://www.freeimagehosting.net/uploads/77c9ec6c32.png
Let me know if it would help to see my current CSS and HTML. I've tried a lot of different things but they all have one problem or another. The box background is set in my CSS as a non-repeating image set in the lower right and the fading effect comes from it being partially transparent so it fades to white since that's the background color of the box. A fluid solution would be nice but I can use a fixed-width solution just fine.
The background is what's causing my main problem. I can't figure out how to make the background fill the whole thing if I break up the HTML into more than one div.
HTML:
<div class="content">
<jdoc:include type="component" />
</div>
CSS:
.content {
background-color: #FFFFFF;
border: solid 2px #ACD579;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
padding: 1em 2em;
}
.content
{
background-image: url(../img/pagebG.gif);
background-position: bottom;
background-repeat: repeat-x;
}
It would be better if you provide your code, so we can see where you're going wrong.
Also, is the page breaking in IE6? or just IE in general?
To get rounded corners in IE you could use CSS3 Pie, which makes "Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.".
I want to set the border of a table to be "1px solid black" except on the bottom, where I want to use an image which provides a pointer into the link - as a visual aid.
Is it possible to set an image as the bottom border when the other borders are regular css.
Try putting the table inside <div class="myTableContainer"></div> and then:
.myTableContainer{
padding-bottom: 1px;
background: url(myBorderImage.png) bottom left;
}
This should work well across all browsers.
CSS3 has added support for border-image. You can find more information at http://www.w3.org/TR/css3-background/#border-images. At this point (early 2012), it's probably not safe to use due to lack of support in all versions of IE. To track when it is safe to use you can visit http://caniuse.com/#search=border-image. One way to simulate the border-image style is to use a positioned background-image. For example, to simulate a top border:
div
{
background-image: url('topBorder.gif');
background-position: top;
background-repeat: repeat-x;
}
I don't think so. You're probably better off adding a <DIV> below the table, give it a black border, a fixed background, and some fixed padding or whatnot (to give it some size).
One solution is to style your element with a background image in css and then specify an offset for the background in CSS. The background can poke out from beyond the edge of the element (a div or li element for example). This can be used for many different effects, one being the appearance of a drop shadow using pure css.
Some specifics here:
http://www.alistapart.com/articles/cssdropshadows/
Now there is CSS3 and a border-image property for that, but still it does not work for all browsers.
OK, let's there be a W3Schools link on this topic.
No. Why don't you try another table row for that purpose?
Try putting a below your table then set his style like
.bottomborder {
height:1px;
background-image:url("yourImage.png");
}
Should work good.
Edit : and of course border-top, left, right for your table a "solid 1px black"
You can set the borders like that except the bottom border :
border-top:1px solid black;
border-right:1px solid black;
border-left:1px solid black;
For the bottom border, you can set your image as background of a row maybe.