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.
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 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 four boxes in a row and they all have the same class. They all should be the same width but one is 1 pixel wider than the rest and it's throwing the row out. As far as I can see, the content is not pushing it, and there is nothing in the box to make it 1 pixel wider. It's the second last box to the right with the contact form in it on this site: http://www.guitarworldcityarcade.com.au/
If it's not content, how can I tell what's making this particular div 1 pixel wider than the rest?
I had compensated for the border in the widths of each box: layout is 1120px wide. 1120/4 = 280. Each box has a padding of 5px, so thats 5 on the left and right. 280-10=270. Then the border, which is 1px on each side, so thats 270-2 = 268. I have set my class for the boxes to be 268px wide and yet one is one pixel wider. I don't really want to sacrifice the border (yet).
You are using border: 1px solid #111111; on line 247 of global.css.
So if you are aware of CSS Box Model
The border is counted outside of the element and not inside hence it offsets your element by 2px and not 1px because it takes 1px on the left, 1px on the right as well as top and bottom too.
So two solutions here, either you can use border: 0; or you need to use box-sizing: border-box; on that element, which will count the border inside instead of outside.
That extra space is coming because of border. So you need to set it to zero.
Declare border: none; for the last box and it will work.
Add this code in your class
border: none;
outline: none;
width:0;
Remove the css border property to that div
border:0px;
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 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