Here's a little weird thing happening.
When I set
border-bottom: 0.5px;
and
border-bottom: 1px;
I can see the difference in my computer. But when I do use the same system inside an online editor like codepen, I cannot see any difference.
Here is a little snippet for you guys to see it:
.teste {
display: inline-block;
width: 10vw;
height: 10px;
}
.teste1 {
border-bottom: 0.1px solid black;
}
.teste2 {
border-bottom: 0.4px solid black;
}
.teste3 {
border-bottom: 0.5px solid black;
}
.teste4 {
border-bottom: 1px solid black;
}
.teste5 {
border-bottom: 1.5px solid black;
}
.teste6 {
border-bottom: 2px solid black;
}
<div class="teste teste1"> </div>
<div class="teste teste2"> </div>
<div class="teste teste3"> </div>
<div class="teste teste4"> </div>
<div class="teste teste5"> </div>
<div class="teste teste6"> </div>
The only differente will be visible for me in this snippet are those with 1px and 1.5px.
So, here is my question:
How does the DOM works with those measures? Does it sees the difference between 0.1px and 0.5px?
If I can see the difference in my screen, will my visitors see it as well?
If to consider browser agnostic web site design you should assume that fractional px values are rounded to nearest integer.
Dimensions of elements reported by HTML DOM API are always in "DOM pixels" - numbers rounded up to nearest integer. Distances between elements are always expressed in whole number of "DOM pixels".
So things like 1.25px make not too much sense in web design.
"DOM pixel" is a logical length unit loosely equal to 1/96 of inch.
Like on 110 PPI monitor 1px equals to 1 physical pixel. But on 192 PPI monitor one 1px maps to 2 physical pixels.
Modern DOM and CSS have no means to address physical pixel units.
AFAIR it was an attempt to introduce "hairline" units but I think they will not go through.
Some Browers add user-agent styles to elements that sometimes create slight variations. I'm using chrome it seems to render the borders just fine.
Try zooming in closer and you will see the difference
Related
I've created a fiddle to illustrate this: https://jsfiddle.net/9tu8n4y5/
The markup is pretty simple as it's supposed to look like a dotted line to separate bits of content:
.dot {
border-bottom: dotted 2px #022169;
}
<div class="dot"></div>
In Firefox 55.0.3 this looks as I'd expect it to:
However, in Chrome 61.0.3163.91 it has a strange "solid line" at the start and end:
Closer:
Does anyone have any ideas why this is? I guess it's a browser specific problem that cannot be changed with CSS?
I am using a 27" 5k Retina iMac. However my second display is a non-Retina screen and the results are the same on that.
Safari 10.0.3 gives the same result as Firefox.
Edit (after posting) - reported to Chromium Bugs team, https://bugs.chromium.org/p/chromium/issues/detail?id=766977
I haven't tested this solution on retina, but you can play around with radius values to get exactly/closer to what you want. This is how I have dealt with the bug:
.border-bug {
border-bottom: 2px dotted red;
}
.no-border-bug {
border-bottom: 2px dotted red;
border-left: 2px solid transparent;
border-top: 1px solid transparent;
border-radius: 4px 1px 3px 3px;
}
<div class="border-bug">
Bug Bug Bug.
</div>
<br>
<div class="no-border-bug">
Almost no bug.
</div>
This bug seems like have been around since ages.
Hi Just found a work around: add Css Property border-collapse: separate; to table and it will work fine.
I ran across the issue that my design concept for displays like iPhone 4 included 1px borders and I didn't know the Retina devices measures CSS with an aspect ratio of 2x.
So I started designing the page by taking advantage of a media query for max-device-width:640px (for portrait) and came to recognize this will only look as expected, if I set the viewport meta to initial-scale=.5.
The problem is: If I don't want to set initial-scale=.5 and define the media query in real pixel dimensions of the iPhone, there seems to be no way to achieve a 1px wide border or such on a Retina display because setting border:.5px will force iOS to compute an integer value of it – which seems to result in rather 0 than 1.
This is how I've achieved 1px borders on the iPhone (tested on iPhone 5).
<span class="hr"></span>
.hr {
display: block;
width: 100%;
border-bottom: 1px solid black;
-webkit-transform: scaleY(0.1);
}
Obviously this makes it tricky to apply 1px borders to anything that actually acts as a container, but it'll do the trick for true 1px separators.
You can try:
border: thin solid black;
I know you can draw with a canvas element, I just wanted to know if it was possible to draw a triangle next to a link without using a canvas element? I just want a small < 16px down arrow.
Here is my take on drawing a triangle in css. You can view it on JSFiddle. Have not done any browser testing (works in Chrome!)
The CSS is pretty simple:
.triangle{
display: block;
border-bottom: 16px solid transparent;
border-left: 16px solid red;
overflow: hidden;
position: absolute;
}
If you want it pointing in a different direction, just alter the borders. For example, the following will point the triangle downward:
.triangle{
display: block;
border: 16px solid transparent;
border-top: 16px solid red;
overflow: hidden;
position: absolute;
}
Edit: Works in latest IE, FF and Chrome.
Nope.
The closest you could get is by using an ASCII key, ↓ to be precise.
It produces an arrow like this ↓
Of course a background-image will do the trick, but that's quite obvious, innit? :)
U+25BC: Black Down-Pointing Triangle exists in Unicode. Here it is: ▼
You could use this CSS to apply it:
a:before {
content: "▼";
}
It's probably better to use a background-image though. That way, you would not depend on the existence of such special characters in the font the web browser uses, and it would show up in IE 6/7. For example:
a {
background-image: url("arrow.gif");
padding-left: 16px;
}
No. Just use a special ASCII character, &#darr;, no CSS required:
<span id = "down-arrow">&#darr;</span>
Here's my simple drawing for the triangle using CSS:
<div style="border: 11px solid transparent; border-right-color: rgba(0, 0, 0, 0.25);"></div>
If you need to change the direction, just replace border-right-color with border-direction-color.
And maybe you use position: absolute; and margin-top and margin-left properties to set the position.
How do I square the corners of a submit button? Can it be done with CSS? I just noticed that Stackoverflow buttons are pretty much the same thing (don't close it for mentioning SO, just want to illustrate what I mean).
Use the following field and command in your css:
border-radius: 0;
Just add CSS to it, and the default look will dissappear.
input.button, input.submit {
border: 1px outset blue;
background-color: lightBlue;
}
edit: changed the selector to use class name instead, as suggested in comments.
You could use the HTML element instead of input type. It's quite easy to style that one.
If you specify the height and width in the css, you'll make the corners square, and retain the certain level of automatic fancy-ness that normal buttons have... and that way, you wont have to build your own.
input.button, input.submit {
height: 30px;
width: 20px;
}
I seem to remember this only working if the height is large enough, but it might work any which way.
Use border: 1px solid for the element.
<a class="test">click me</a>
<style>
.test
{
cursor: pointer;
background-color:#E0EAF1;
border-bottom:1px solid #3E6D8E;
border-right:1px solid #7F9FB6;
color:#3E6D8E;
font-size:90%;
line-height:2.2;
margin:2px 2px 2px 0;
padding:3px 4px;
text-decoration:none;
white-space:nowrap;
}
</style>
This is how a stackoverflow button is made.
For some reason most modern browsers will stop applying their default input border style to text boxes if you give them a background image. Instead you get that ugly inset style. From what I can tell there's no CSS way to apply the default browser style either.
IE 8 doesn't have this problem. Chrome 2 and Firefox 3.5 do and I assume other browsers as well. From what I've read online IE 7 has the same problem, but that post didn't have a solution.
Here's an example:
<html>
<head>
<style>
.pictureInput {
background-image: url(http://storage.conduit.com/images/searchengines/search_icon.gif);
background-position: 0 1px;
background-repeat: no-repeat;
}
</style>
<body>
<input type="text" class="pictureInput" />
<br />
<br />
<input type="text">
</body>
</html>
In Chrome 2 it looks like this: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6
And in Firefox 3.5: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc
Update: JS Solution: I'm still hoping to find a pure CSS-on-the-input solution, but here's the workaround I'll use for now. Please note this is pasted right out of my app so isn't a nice, stand alone example like above. I've just included the relevant parts out of my large web app. You should be able to get the idea. The HTML is the input with the "link" class. The large vertical background position is because it's a sprite. Tested in IE6, IE7, IE8, FF2, FF3.5, Opera 9.6, Opera 10, Chrome 2, Safari 4. I need to tweak the background position a couple pixels in some browsers still:
JS:
$$('input.link').each(function(el) {
new Element('span',{'class':'linkIcon'}).setText(' ').injectBefore(el);
if (window.gecko) el.setStyle('padding', '2px 2px 2px 19px');
});
CSS:
input.link { padding-left: 19px; }
span.linkIcon { z-index: 2; width: 19px; height: 19px; position: absolute; background-image: url(img/fields.gif); background-position: 1px -179px; background-repeat: no-repeat; }
Update: CSS Close Enough Solution: Based on the suggestion from kRON here's the CSS to make the inputs match FF and IE in Vista which makes a good choice if you decide to give up on pure defaults and enforce one style. I have modified his slightly and added the "blueish" effects:
CSS:
input[type=text], select, textarea {
border-top: 1px #acaeb4 solid;
border-left: 1px #dde1e7 solid;
border-right: 1px #dde1e7 solid;
border-bottom: 1px #e3e9ef solid;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
padding: 2px;
}
input[type=text]:hover, select:hover, textarea:hover, input[type=text]:focus, select:focus, textarea:focus {
border-top: 1px #5794bf solid;
border-left: 1px #c5daed solid;
border-right: 1px #b7d5ea solid;
border-bottom: 1px #c7e2f1 solid;
}
select { border: 1px; }
When you change border or background style on text inputs They revert back to the very basic rendering mode. Text inputs that are os-style are usually overlays (like flash is) which are rendered on top of the document.
I do not believe there is a pure CSS fix to your problem. Best thing to do - in my opinion - is to pick a style that you like and emulate it with CSS. So that no matter what browser you're in, the inputs will look the same. You can still have hover effects and the like. OS X style glow effects might be tricky, but I'm sure it is doable.
#Alex Morales: Your solution is redundant. border: 0; is ignored in favor of border: 1px solid #abadb3; and results in unnecessary bytes transferred across the wire.
This is the CSS that I use that can provide the default look back:
input, select, textarea {
border-top: 1px #acaeb4 solid;
border-left: 1px #dde1e7 solid;
border-right: 1px #dde1e7 solid;
border-bottom: 2px #f1f4f7 solid;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
You could also apply :active and give the controls that blueish hue once they're selected.
Update!
Ok, here is a workaround that I think is cross-browser compatible. The only issue would be that the default style differs by a few pixels so this might need some tweaking.
<html>
<head>
<style>
.pictureInput {
text-indent: 20px;
}
.input-wrapper {
position:relative;
}
.img-wrapper {
position:absolute;
top:2px;
left:2px;
}
</style>
</head>
<body>
<div class="input-wrapper">
<div class="img-wrapper"><img src="http://storage.conduit.com/images/searchengines/search_icon.gif" alt="asddasd" /></div>
<input type="text" class="pictureInput" />
</div>
<br />
<br />
<input type="text">
</body>
</html>
By using absolute-relative positioning you can make the absolute div (containing the image) act absolute in relation to its parent which all browsers I know about (not counting sub-IE6 versions, IE6+ are fine) can handle. User scaling might be an issue, but this is how it is with workarounds.
On the upside, you don't have to change the styles on your inputs at all (except for text-indent, but you'd do that anyway I hope).
On the downside, it's not the prettiest workaround.
Old!
I know this is not what you want, but you could do something like this to at least make all the input borders consistent.
input {
border-color:#aaa;
border-width:1px;
}
I haven't tried it in all browsers, but since you aren't setting the border-style it might use the native style but with another size (though you can skip that too). I think the key is to just set the border-color to something so that all input fields will use the same border-color and leave the rest up to the browser.
I had a text background image, and this was also annoying me. So I put a relative <div> round the <input> and then added the image absolutely positioned over the <input>.
Then of course I needed a little more Javascript to hide the image if it was clicked, or if the input got the focus by tabbing, or by being clicked around the edges of the image.
With a bit of fiddling this looked pretty good with IE8, Firefox, Chrome, and Opera, but it's a horrible kludge and it would be nice if the browsers fixed it.