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.
Related
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
I used the CSS border radius to curve a dotted border. It looks great in every browser except firefox where only the corners have a solid curve.
Thanks in advance
Some years ago this was a bug of FireFox as far as I remember. Not sure how it's now.
Show us your CSS please. Maybe you have to use browser specific CSS like this:
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
Also there can be some dependency of what HTML version you use. HTML 5 hope :)
That's the way Firefox renders it.
There is no solution for this.
http://jsfiddle.net/437sp/
.border {
width:200px;
height: 50px;
border:5px dotted green;
border-radius:10px;
}
I'm using the following CSS to border a <tr> entirely.
<style type="text/css">
tr.top td { border-top: thin solid black; }
tr.bottom td { border-bottom: thin solid black; }
tr.row td:first-child { border-left: thin solid black; }
tr.row td:last-child { border-right: thin solid black; }
</style>
It works perfectly in Mozilla Firefox but in Internet Explorer, it doesn't border the last right <td> as shown in the following snap shots.
In Firefox, it displays the following table.
In Internet Explorer(8) however, it displays the table as follows.
Means that in the above CSS, this CSS class tr.row td:last-child { border-right: thin solid black; } doesn't work in IE. What is the solution to this? I'm using IE 8.
IE 8 doesn't support the :last-child pseudo class (CSS 3), but it does support :first-child (CSS 2.1)
CSS Compatibility and Internet Explorer
You'll need a different selector for the last cell such as a custom class name.
btw, what if you declare the border out of the css file, but instead after style, within the TD tag? I was told that IE8 has some bugs with border rendering. Post it here, and see if it works.
another doubt, why don't you use 1px instead of thin!?
I am designing home page of my domain registration website and I am stuck at one place. Please go through the website at http://a2host.in/
In Firefox and Google Chrome the Search and Go Button are in same alignment with the text and select box but in Opera and IE8, they are falling down a bit.
I have tried out all the things but I am not able to figure out the actual problem.
I see a lot of unneccesary styling. In essence, this is what you want:
Basic form without floats
You can tweak the font-sizes and colors here, until you have what you want. But this is a good starting point, because it is cross browser identical.
Also, think about using the <button> element instead of the <input type="button">. It gives you more freedom in styling.
Form-controls are a pain to get them look good in all browsers, especially buttons and select-boxes.
Please comment out the following CSS3 properties (please see below) in the .regbutton class of your stylesheet and then try
.regbutton, .regbutton:visited {
background: #222 url(/getImage.php?src=myUploadedImages/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
/*-moz-border-radius: 6px;*/ /*comment out all CSS3 properties*/
/*-webkit-border-radius: 6px;*/
/*-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
/*border-bottom: 1px solid rgba(0,0,0,0.25);*/
position: relative;
cursor: pointer;
}
try to set border:none for your buttons
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.