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;
}
Related
*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 am trying to create a div element with a rounded border. I am aware of the use of the border-radius, but I noticed that using this property will curve the corners only, like the top-right, top-left etc. so i was wondering if there is some property to curve the side of a div element, something like border-radius for top, down, left and right.
For example, a div with a straight top, bottom and left but a rounded right side. i would like to create the right side so that it is more rounded at the top than the bottom.
My aim is to create a div element with rounded right side which will not affect the top and bottom sides. i mean the curve in the right side should stop as soon as it reached the top or bottom side. (so that the top and bottom remains straight rather than slightly curved).
Is there a way to get this effect using css?
You can specify horizontal and vertical border-radii via the slash notation to achieve such an effect...
div{
width:100px;height:100px;
border:3px solid #bada55;
border-radius:10px/50%;
}
<div></div>
This would set a vertical border-radius of 50% and a horizontal border-radius of 10px for all sides. You can define this for each corner individually (So you have up to eight values).
You can use the / effect which defines the horizontal and vertical radii. 10px is horizontal, 100px is vertical
div
{
height: 200px;
width: 200px;
border: 2px solid #000;
border-radius: 10px/100px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
With the border radius set to 10px/100px this makes the sides slightly curved. Set the left corners to 0 and you have only one side that is curved :)
http://jsfiddle.net/UWbKf/
You can still use border-radius for this. You just have to be a bit more creative with the parameters you give it.
border-radius allows you to specify both a horizontal radius and a vertical radius for each corner. Using these gives you the flexibility to stretch a curve effect across the whole of one side your element if you wish.
An random example that makes an odd shaped box:
.myElement { border-radius: 24% 41% 31% 9%/44% 6% 32% 40%; }
And here it is on jsFiddle.
Rather than give you loads of detailed examples, I'll link you to this site, which demonstrates the flexibility of border-radius, and allows you to design the shape you want: http://www.webtutorialplus.com/border-radius.aspx
Hope that helps.
I have reproduce the same template than my code but i can't reproduce the same bug on JsFiddle
http://jsfiddle.net/V9BDR/1/
Here is what happen:
There is a space (about 1px) which appears between the<img> and the border-right of the <div id="page"> (the red border right) in the whole vertical ligne (for all the childs of <div id="page">) when:
There is an overflow on axe Y.
There is a red border-left-width between 3px and 6px, 10px and 13px, 17px and 20px...
I really don't understand, especially the fact the this pixel disapears when the red border left (i also can find patterns with the right border width which erase this mysterious pixel) is between some regular intervals.
I could change my borders from 5px to 6px, this is a case this pixel desapears, but i realley would like to understand what is not "stable" in my code.
Maybe these symptoms talk to you ! I am sorry i am not able to reproduce it on jsFiddle
UPDATE:
Here is a screenshot of what happens precisely when i resize the window to a smartphone resolution (i used a simple white picture for the <img> src).
If i return to a desktop resolution, i just have 1px between the image and the black border (for each different width window value, the image is like floating around):
We can see that the picture go over the border even if its <div> parent (currently selected in the console) is well fitted. it's like the image would be on absolute position, but it's well inline-block (with a simple text-align: right apply on its parent).
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.
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.