I constructed a thought bubble with HTML and CSS and found an issue solely on IE11 - every other browser (down to IE9) works great.
The idea is simple:
Have a container that contains text and give it a background-color and round corners. Then put another element into it and make it look like an arrow. Position the arrow so that it sits right next to the container.
The problem:
Somehow, even though the arrow sits perfectly adjusted, there is a very small line between arrow and container. And this line is less then 1px in height. If I move the arrow up a notch then it sits inside the container which cannot be accepted due to the fact that arrow and container must have transparency.
Here is the jsfiddle showing the problem:
http://jsfiddle.net/hurrtz/t2RhR/3/
HTML really is simple.
<div id="bubble">
<div class="arrow"></div>
</div>
CSS is equally simple and boils down to this (some pseudo code ahead):
#bubble {
(some dimension giving)
background-color: rgba(0,0,0,0.5); //black, semitransparent
position: relative;
}
#bubble .arrow {
position: absolute;
bottom: 0 - height of arrow:
background-color: rgba(0,0,0,0.5); //black, semitransparent
}
By the way: The problem increases, decreases or seizes to exist the more I let IE11 zoom in or if the browser window's height is changed.
Here's what it looks like with the gap in IE11:
A screenshot of this picture, zoomed at 500% shows this:
It's because the way the border is calculated. Screen is a finite grid, so when you decide that the center of the arc is at coordinates e.g. "10 x, 10 y" it could mean different things:
the center of the arc is in the middle of the 10th pixel?
the center of the arc is at the begginnig of the 10th pixel?
the center of the arc is at the end of the 10th pixel?
So, when it draws the arc with radius 10px it could go half pixel farther (or closer) from the point you expected (and will yield "half pixel" sizes, a 2px gray line where you wanted 1px black, a circle that is not really round or some other sad surprise).
This kind of different behaviour is common among the major browsers (e.g. see this: Border-radius: 50% not producing perfect circles in Chrome ) I think it shouldn't be considered a bug, those are just implementation decisions that unluckily for us differ from a browser to another.
The most common solutions is to play with the border width (0.5px,1px,2px) and radius (even/odd sizes) or even positioning with decimals (bottom: -19.5px?). Can't say wich combination will yield best results for this case since I can't reproduce it in Windows 7 + IE11.
border-bottom: 1px transparent solid ;
margin-bottom: -1px ; /* grey line fix */
all well and good but there is no real answer to the problem here. after a search i found this. and it worked on the IE and safari grey line issue on a simple white box i use.
Based on #miguel-svq answer (thanks!!!), which was very helpful, I have simplified it with the following:
#bubble{
/* Set the border color to match your surrounding background.
It will take away the grey line in IE11 */
border: solid 0.5px #f0f0f0;
}
I have a button with perfectly rounded corners; meaning, the button is 50px high and the border radius is 25px, making a perfect half-circle on either side of the button:
Achieving this with CSS is easy, provided you already know the height of the button (button height รท 2 = border radius).
But is it possible to maintain the perfectly-circular edges if the button's height increases dynamically (more text is added, for example)?:
Just set the border-radius to something high, like 360px.
div {
height:50px;
width:500px;
background:red;
border-radius:360px;
}
Look at this jsFiddle example to see what I mean.
I'm coming across an issue that I feel like I've found (and solved) before. But can't remember what or how.
I'm using jQuery Mobile and re-skinning it majorly. Part of this is putting a solid thick line at the bottom of the nav items. So I've overridden the borders so I have a left and right 1px border, then a 10px bottom border. But the bottom border is jagged, it looks like the left and right are trying to come over half of the bottom border but not all of it.
I've attached a screenshot of the problem (I've increased bottom-border to 25px to make it more obvious).
#id
{
border: #231F20 1px solid;
border-top: none;
border-bottom: #EE1E5C 25px solid;
}
Any ideas where this problem is coming form and how to solve?
It's because the border edges don't meet in straight horizontal or vertical lines, but in diagonals starting at the corner of the inner box and finishing at the corner of the box including the borders (in this case that means the border finishes one pixel to the left and right of where it starts). If you changed your side borders to be wider it'd be clearer what's happening.
Here's a quick image to illustrate:
The borders join along the red lines.
As to a solution - you may need an extra element to wrap to provide that bottom border, or get rid of your 1px side borders. Neither are ideal solutions I'm afraid.
This question already has answers here:
CSS: Background image and padding
(9 answers)
Closed 3 years ago.
I'd like to add a background to a div, position right center, but!, have some padding to the image. The div has padding for the text, so I want to indent the background a little. probably makes most sense w/ example:
http://jsbin.com/umuvud/edit#javascript,html,live
Thanks!
Updated Answer:
It's been commented multiple times that this is not the correct answer to this question, and I agree. Back when this answer was written, IE 9 was still new (about 8 months old) and many developers including myself needed a solution for <= IE 9. IE 9 is when IE started supporting background-origin. However, it's been over six and a half years, so here's the updated solution which I highly recommend over using an actual border. In case < IE 9 support is needed. My original answer can be found below the demo snippet. It uses an opaque border to simulate padding for background images.
#hello {
padding-right: 10px;
background-color:green;
background: url("https://placehold.it/15/5C5/FFF") no-repeat scroll right center #e8e8e8;
background-origin: content-box;
}
<p id="hello">I want the background icon to have padding to it too!I want the background icon twant the background icon to have padding to it too!I want the background icon to have padding to it too!I want the background icon to have padding to it too!</p>
Original Answer:
you can fake it with a 10px border of the same color as the background:
http://jsbin.com/eparad/edit#javascript,html,live
#hello {
border: 10px solid #e8e8e8;
background-color: green;
background: url("http://www.costascuisine.com/images/buttons/collapseIcon.gif")
no-repeat scroll right center #e8e8e8;
}
this is actually pretty easily done. You're almost there, doing what you've done with background-position: right center;. What is actually needed in this case is something very much like that. Let's convert these to percentages. We know that center=50%, so that's easy enough. Now, in order to get the padding you wanted, you need to position the background like so: background-position: 99% 50%.
The second, and more effective way of going about this, is to use the same background-position idea, and just use background-position: 400px (width of parent) 50%;. Of course, this method requires a static width, but will give you the same thing every time.
Method 1 (99% 50%)
Method 2 (400px 50%)
There is actually a native solution to this, using the four-values to background-position
.CssClass {background-position: right 10px top 20px;}
This means 10px from right and 20px from top.
you can also use three values the fourth value will be count as 0.
you can use background-origin:padding-box; and then add some padding where you want, for example: #logo {background-image: url(your/image.jpg); background-origin:padding-box; padding-left: 15%;}
This way you attach the image to the div padding box that contains it so you can position it wherever you want.
In case anyone else needs to add padding to something with background-image and background-size: contain or cover, I used the following which is a nice way of doing it. You can replace the border-width with 10% or 2vw or whatever you like.
.bg-image {
background: url("/image/logo.png") no-repeat center #ffffff / contain;
border: inset 10px transparent;
box-sizing: border-box;
}
This means you don't have to define a width.
first off, to be a bit of a henpeck, its best NOT to use just the <background> tag. rather, use the proper, more specific, <background-image> tag.
the only way that i'm aware of to do such a thing is to build the padding into the image by extending the matte. since the empty pixels aren't stripped, you have your padding right there. so if you need a 10px border, create 10px of empty pixels all around your image. this is mui simple in Photoshop, Fireworks, GIMP, &c.
i'd also recommend trying out the PNG8 format instead of the dying GIF... much better.
there may be an alternate solution to your problem if we knew a bit more of how you're using it. :) it LOOKS like you're trying to add an accordion button. this would be best placed in the HTML because then you can target it with JavaScript/PHP; something you cannot do if it's in the background (at least not simply). in such a case, you can style the heck out of the image you currently have in CSS by using the following:
#hello img { padding: 10px; }
WR!
To add space before background image, one could define the 'width' of element which is using 'background-image' object. And then to define a pixel value in 'background-position' property to create space from left side.
For example, I'd a scenario where I got a navigation menu which had a bullet before link item and the bullet graphic were changeable if corrosponding link turns into an active state. Further, the active link also had a background-color to show, and this background-color had approximate 15px padding both on left and right side of link item (so on left, it includes bullet icon of link too).
While padding-right fulfill the purpose to have background-color stretched upto 15px more on right of link text. The padding-left only added to space between link text and bullet.
So I took the width of background-color object from PSD design (for ex. 82px) and added that to li element (in a class created to show active state) and then I set background-position value to 20px. Which resulted in bullet icon shifted inside from the left edge. And its provided me desired output of having left padding before bullet icon used as background image.
Please note, you may need to adjust your padding / margin values accordingly, which may used either for space between link items or for spacing between bullet icon and link text.
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