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:
Related
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
code: http://jsfiddle.net/xVCrn/1/
(works best in chrome / webkit)
I'm trying to get the red part to have 1px of margin inside the dark buttony area. but I can't seem to change the height of the red part. =(
the goal:
If using display-inline you can set it's height. You will also want to set the line-height as well. For example I added line-height:17px; and it centered it pretty good.
Example: jsFiddle Example
Tip: For webkit browsers on elements with a border of 1px and border-radius. Use 1px double #color It'll help with the jagged lines. I believe this is mostly a problem in Chrome that hasn't been resolved.
Adding display: inline-block; to the red part lets you control its height.
Here's an example (with some padding added to make it look nice): http://jsfiddle.net/xVCrn/
I got another tricky CSS3 situation that I'm breaking my head on. I'm styleing a form with CSS to have a 10px border on the sides and a 12px border on the bottom, in combination with a 15px border radius.
Unfortunately, the point where the 12px and the 10px borders meet the transition is not gradual but there's a 2px chunk sticking out of the inside of the border. Example (sizes magnified for clarity):
http://jsfiddle.net/LnKND/1/
Any idea how to fix this using only css and no extra elements? Or is this just the way it's rendered currently and should I find another solution?
Add
border-bottom-left-radius:10px 20px;
border-bottom-right-radius:10px 20px;
reference : http://www.w3.org/TR/css3-background/#the-border-radius
for mozilla use
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
if you want, although it handles the issue automatically (if you fix the typo p to px in the example).
reference: https://developer.mozilla.org/en/CSS/border-bottom-right-radius
Can someone help me understand a way of adding rounded corners top left and top right of the current page link below? I have used jQuery corners but this doesnt work in IE very well... I was looking to use PNG. The space between the corners should be white. The PNG would be transparent letting whatever image was below to show through.
<ul>
<li class="current"><span>Home</span></li>
<li><span>Create Account</span></li>
<li><span>Order a Catalogue</span></li>
<li><span>Distributors</span></li>
<li><span>About Us</span></li>
<li><span>Contact Us</span></li>
<li><span>Login</span></li>
</ul>
Any help would be greatly appreciated.
Draw your rounded rectangle in something like Paint.NET (make sure you have a transparent background!) and make it the exact width of the LI. Give it more than enough height so that you can cut off the button rounded corners and it will still be tall enough to fill the LI. Cut off the bottom rounded corners, crop accordingly, and save it as a PNG. Set it as a background image on the element with CSS...
ul li.current {
background:url(../images/nav-current.png) no-repeat;
}
Note: if you use a background color on the LI, it will bleed through the transparent part of the rounded corners, which is not good.
Moving forward... you can just use the CSS3 border-top-left-radius and border-top-right-radius along with background-color (no images!), but these are not supported in IE8 and older.
Hey friend to apply border radius that works in IE also you have to apply border-radius.htc file and you can apply it to your CSS like this one. In my project i am using it on Div tag but you can use it whereever you want.
div
{
-moz-border-radius: 10px;
background: #D4D0C8;
border: 1px solid #808080;
-webkit-border-radius:10px;
behavior:url(border-radius.htc);
}
you will find border-radius.htc file on google also. If you can provide your emailid then i can mail it to you if you want
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.".