I've designed a table with flexbox and the borders on alternate/every third row has a single pixel space between content.
I couldn't find the space from the dev tools.
Fiddle here.
I've tried with 0 font size, changes in position and display property with no luck.
But when I set background color for the whole row, instead of one column, it fits well for all rows.
Like this,
.block {
display: flex;
border-bottom: 1px solid black;
.label {
background-color: blue;
padding: 10px;
flex: 1;
}
.value {
flex: 1;
}
}
Can someone help me find out where this extra space between border and content comes from and how to remove that. Thanks in advance.
Try to change all border to .5px
and no need to ad a border with the last .bloc
This has mostly to do with subpixel rendering on a zoomed in Chrome browsers. A lot of windows laptops have their display settings default at 150%, so it renders a 1px line at 1.5px.
Firefox is obviously better at this then Chrome, by the way. But this explains why some people using chrome do see the issue, and some don't. To reproduce, zoom in on Chrome on a site with small borders.
Chen Hui Jing has some good explanations on subpixel rendering on different browsers -> Sub-pixel rendering and borders
Related
I need to display data containing Unicode full block characters (\u2588). However, as you can see here, browsers seem to apply font smoothing to the blocks causing gaps to appear between the blocks. ██████████████
How can I render these characters without the gaps?
I tried using CSS 'line-spacing' with a negative value as a hack, but this text is being rendered with a mono-space typeface and it throws off alignment with the rest of the content.
I have the same issue for a long time and still searching for a perfect solution. CSS text-shadow method by Kieran Devlin is good, but only for cases when there is only one-line blocks with same color.
I can suggest this solution via JavaScript (or just CSS) tho this is not 100% perfect. Here we just making sure that user is on Chromium and then squashing blocks together into each other, therefore filling the gaps. After that, we can use transform scale to return initial size and transform translateX to return it to it's initial position.
if (window.chrome) {
art_div.css({
'letter-spacing': '-0.1em',
'line-height': '1.2em',
'transform': 'scale(1.2, 1) translateX(8%)'
});
}
You can see it visualized in my GitHub issue, maybe i will find something better.
You can use font shadow to fill the gap. I know its a hack but unless you plan to overlap the characters by positioning them in a fixed orientation I don't see how this can be achieved across different browsers.
text-shadow: 1px 0px 0px rgba(0,0,0,1);
Example:
body {
text-shadow: 1px 0px 0px rgba(0,0,0,1);
}
██████████████
Another option is to pad the characters within a container and set the background color the same as the font color. Example:
#container {
background: black;
color: black;
width: 159px;
height: 20px;
}
<div id="container">
██████████████
</div>
Alright, of course I understand why this is happening, I'm just hoping there's some creative solution. Let's say I have this element:
.element {
padding:0 1px;
}
.element:hover {
font-weight:bold;
}
It's crucial that the padding be in place for visual consistency, but is there some magical way I'm not aware of to lock the element's width down before engaging in the hover behavior?
No JavaScript allowed, unfortunately.
JsFiddle:
http://jsfiddle.net/M9V3Q/
More Info
The client is extremely specific about what they want on certain parts of the site, and the nav is one of them, much to my frustration. They insist on hover being black text on a dark shade of red used in their logo, and they want the buttons to be centered. Since different browsers render text differently, the only way to create a consistent look is to use padding to create the width. Unfortunately, with normal font weight the black is very difficult to read.
You can use this approach:
#hoverEle {
width: 100px;
}
#hoverEle {
display:inline-block;
border:1px solid black;
padding:3px;
text-align: center;
}
#hoverEle:hover {
font-weight:bold;
}
Fiddle: http://jsfiddle.net/M9V3Q/4/
Cons is fixed width.
By the way, I think it is bad idea to focus buttons like this. More beautifull for user will be simple color change (e.g. #ccc) and, probably, transition effect. I think it is much more better.
Try this fiddle: http://jsfiddle.net/M9V3Q/9/
I think it is much more beautifull even in this variant :)
Try something like:
.element {
padding: 0 1px;
border: 2px solid transparent;
}
.element:hover {
font-weight: bold;
border: none;
}
A fiddle: http://jsfiddle.net/F4knz/
Could always try CSS3 box-sizing. It cuts into the elements width etc for padding, border..., and so prevents the element from expanding outside its set width.
Need to prefix -moz- or -webkit- for Firefox and safari.
Just found another bug in chrome when using border-radius and box-shadow.
Hard to explain it, Look at the picture below.
The first box is fine and has a radius of 53px.
the second box loses its shadow on the corner, to me it looks like the shadow is now square but is being hidden with a overflow: hidden effect the radius of this box is 54px.
now the last box is screwed, the shadow looks the same as the second box, only not being hidden by the overflow:hidden effect, the radius of this box is 56px.
Check out a demo for yourself, it works fine in Firefox, The problem is in Chrome
Demo: http://jsfiddle.net/RmYea/1/
Can anyone shed any light on this, why it happens?
CSS:
div{
height:50px;
width: 90%;
margin: 20px auto;
border: 5px solid green;
box-shadow: 0px 0px 5px 2px inset;
}
div:nth-child(1){
border-top-left-radius: 53px;
}
div:nth-child(2){
border-top-left-radius: 54px;
}
div:nth-child(3){
border-top-left-radius: 56px;
}
Note: This only happens with inset
Chrome has some bugs to manage border-radiu.
In your case doesn't manage well the border, to solve this problem you have to change your logic I think because is a bug recognized of border-radius
See this link of something like your problem (not the same problem but some cases about bug in chrome like yours):
https://code.google.com/p/chromium/issues/detail?id=82417
https://bugs.webkit.org/show_bug.cgi?id=30475
Firstly I confirm I am not answering the original question, in the true sense, but I see this problem a little differently.
I would question the values being used for the border-radius in the first place.
The height of your <div> is 50px, therefore your border-radius value shouldn't be more than 50px ( this will provide a full height curve ).
Examples: http://jsfiddle.net/WWvxV/
Following the above, both browsers render the element as expected.
Again, I agree there is an issue with handling values that are larger than can be applied in Chrome, but I also think your initial values need revision.
Here's an example of code to place a border around span tags on hover:
CSS
p {
background-color: #def;
width: 137px; /* chosen so the text *just* fits, may need to alter
* for different browser or OS
*/
}
span {
margin: 0;
}
span:hover {
margin: -2px;
border: 2px solid #336;
}
HTML
<p>
<span>hover</span> <span>over</span> <span>the</span> <span>words</span>
</p>
(See demo at: http://jsfiddle.net/sS7vY/)
It uses a -ve margin to compensate for the border and avoid the text shifting position on hover.
On Firefox, hovering over the very last word causes it to wrap over to the next line, which I want to avoid. On Chrome it behaves as I intended and never wraps.
Is this a Firefox bug that needs reporting?
Is there a way to prevent this wrapping in Firefox, in a way that works for arbitrary text? (i.e. adding a couple more pixels width to the outer <p> is not a valid solution!)
Not sure if it's a bug in either browser as I'm not familiar with the inline box model, but using an outline instead of a border seems to work well as outlines don't affect box sizing, even on inline-level boxes:
span:hover {
outline: 2px solid #336;
}
I forded a working solution of your's : jsfiddle.net/dgY4J
It seems to be a mixed of 'box-sizing' and available width situation.
Also, if you use the css box-sizing, you won't have to deal with borders with the negative margins.
One last tip : chosen so the text just fits, may need to alter for different browser or OS || it will do the oposite. No browsers render font type the same.
I'm having a problem with input elements:
Even though in that picture their css is
margin: 0;
padding: 0;
They still have that slight margin I can't get rid of. I had to use a negative margin of -4px to get the button to stay close to the text field.
Also, when doing further styling I end up with a problem between Firefox and Chrome:
submit buttons seem to not have the same height. Setting an height which makes the submit button fit together with the input bar on Chrome breaks it on Firefox and vice-versa. There seems to be no apparent solution.
1px difference between buttons http://gabrielecirulli.com/p/20110702-170721.png
In the image you can see that where in Chrome (right) the button and input field fit perfectly, in Firefox they'll have a height difference of 1px.
Is there a solution to these 2 problems (the persistent margin and the 1px difference)?
EDIT: I've fixed the first problem, it was caused by the fact that the two elements were separated by a newline in the html code.
The second problem persists, though, as you can see here:
by highlighting the shape of the two elements, you can see that in Firefox (left) the button is 2px taller than in Chrome (right)
Try this one: demo fiddle.
HTML:
<span><input type="text" /><input type="submit" /></span>
CSS:
span, input {
margin: 0;
padding: 0;
}
span {
display: inline-block;
border: 1px solid black;
height: 25px;
overflow: hidden;
}
input {
border: none;
height: 100%;
}
input[type="submit"] {
border-left: 1px solid black;
}
Tested on Win7 in IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0. Only IE7 fails since it obstinately shows a normal button-like submit input.
Seems to me that your CSS is interfering, somewhere, with your inputs layout.
As you can see here http://jsfiddle.net/F3hfD/1/ what you're asking is doable without any problem.
For your second issue, see How to reset default button style in Firefox 4 +
For a similar issue where I an image used as the button type="submit" and it wasn't exactly the same height as the input adjacent to it, I simply added this to the container of the two said inputs:
padding-bottom:1px;
I had a glyphicon in a span next to input, which was inserting top:1px.
So I set top:0px on span and the issue was fixed.
But actual answer for the thread is totally problem specific and user needs to better understand the elements and css to fix it.