I'm trying to style a border so that it consist of a
1px green line below a 1px white line
hr{
height: 1px;
border: 0;
background-color: #89a889;
border-bottom: 1px solid #fafafa;
}
this works in webkit, but firefox seems to include the border in the total height of the line. This makes the bottom border cover the green line. Whan can I do about this?
hr {
height: 0;
border: 0;
border-top: 1px solid #89a889;
border-bottom: 1px solid #fafafa;
}
Use two borders.
Demo
Alternatively, if you really want it to work with a background color, use box-sizing: content-box to get Firefox to display an hr with the normal CSS box model.
You may want to include other vendor prefixes.
hr {
height: 1px;
border: 0;
background-color: red;
border-bottom: 1px solid blue;
-moz-box-sizing: content-box;
}
Demo
You can set -moz-box-sizing: content-box; box-sizing: content-box;. The UA stylesheet sets it to border-box sizing.
Related
div {
margin: 0px;
padding: 0px;
}
#a {
position: fixed;
border: 4px solid black;
background-color:aqua;
}
#b {
width: 40px;
height: 40px;
background-color: grey;
}
<div id=a>
<div id=b></div>
</div>
https://www.hualigs.cn/image/60c949e478467.jpg
change a's border to "5px solid black"
https://www.hualigs.cn/image/60c949e425294.jpg
change a's border to "6px solid black"
https://www.hualigs.cn/image/60c949e426a74.jpg
change a's border to "7px solid black"
https://www.hualigs.cn/image/60c949e47c2e2.jpg
What!!! Why!!! Who can explain？ the broswer is chrome stable version.
I believe this is simply a browser rendering issue between the border and the div (I only see this issue on chrome, its not there in firefox). But you can get rid of that issue by adding this outline: 1px solid black; to #b in CSS.
When using Safari, Setting an outline in CSS causes issues for selectable elements where the outline dynamically changes. Some of the outline gets left behind on previously selected elements:
.box {
outline: 1px solid black;
}
.box.selected {
outline: 5px solid blue;
}
Here is a CodeSandbox that demonstrates the problem. In order to reproduce, it has to be run on Safari: https://codesandbox.io/s/nostalgic-shockley-luu3m?file=/src/App.js&resolutionWidth=320&resolutionHeight=675
Has anyone experienced this issue and been able to solve it?
That’s how it works for the safari browser but you can try changing the style for .box from outline to border
.box {
height: 75px;
width: 100px;
border: 2px solid black;
margin: 0px 5px;
background: red;
}
.box.selected {
outline: 5px solid blue;
}
I try to create a handwritten looked underline to input.
With this complex border-radius, Chrome looks great. In Safari, however, these artifacts appear.
I tried to fix it with
-webkit-background-clip: padding-box;
from: https://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
input {
border: none;
border-bottom: 2px solid;
border-radius: 130px 50px/4px 2px;
}
https://codepen.io/matzR/pen/dybpXgO
Safari: artefacts over the input
Safari seems to have some interesting decisions as far as figuring out the border color goes. Try zooming at this, for instance:
input {
border: 0.001px solid white;
border-bottom: 2px solid red;
border-radius: 130px 50px/4px 2px;
padding: 10px;
width: 300px;
}
I guess the linked workaround doesn't work because the border isn't inside the element?
But this is OK (codepen):
input {
border: 1px solid transparent;
border-bottom: 2px solid red;
border-radius: 130px 50px/4px 2px;
padding: 10px;
width: 300px;
}
<input>
My other considerations were using a SVG element for background and/or using border-image-slice to simulate the behaviour.
In my app a frequently used HTML component is styles as:
.box {
min-width: 100px;
padding: 20px 10px;
}
there are a lot of these (100+) and their border is styled without bottom and different by color:
.box:nth-child(1) {
border: 2px solid red;
border-bottom: none;
}
.box:nth-child(2) {
border: 2px solid green;
border-bottom: none;
}
.box:nth-child(3) {
border: 2px solid blue;
border-bottom: none;
}
.box:nth-child(4) {
border: 2px solid yellow;
border-bottom: none;
}
...
There's a page in the app where all these boxes need to be displayed with full border (including the bottom border) - what is needed is to remove the 'boder-bottom:none' definitions. So in this specific page I've tried to override the .box definition:
.box {
border-bottom: initial; /* tried unset as well...*/
}
But this still results with no border. Is there a way to specify a style so all the .box accepts the full border - or I have to redefine all of the bottom borders?
-Dan
Why not define another class for that component and define border-bottom for that class and put it as !important
.another_class{
border-bottom: 1px solid #efefef !important;
}
border-bottom: initial; won't give you a border.
Set the second definition to border-bottom: 1px solid #efefef;
I have a sidebar block using bootstrap with two image blocks, one on top of the other, and my client wants a glowing red border around the blocks. I have a black background and the border for the glow. Here is the problem, when I resize the browser to a tablet size, the black background and border are wider than the image and the image is not centered. I want the border and glow to be 10px around the image and centered in the screen, not to the left. If I use a transparent background the image is to the left and the red border spans the whole screen and once again looks bad. Here are two screenshots:
I want the images to resize and be next to each other like other responsive templates with the glow and nothing I try is working. This is all probably pretty simple but I am lost. I am learning but this is driving me crazy. I have applied some additional css through c5 to give a glow to the images in the block. This is the code that comes up when I use Chrome dev tools:
element.style { }
#blockStyle167Sidebar40 {
background-repeat: no-repeat;
background-color: #000000;
-webkit-box-shadow: 0 0 6px 4px rgba(255,0,0,.7);
box-shadow: 0 0 6px 4px rgba(255,0,0,.7);
padding: 10px;
}
.pic {
border: 1px solid #000000;
height: 245px;
width: 370px;
overflow: hidden;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheetdiv {
display: block;
}
Inherited from div#sidebar-wrap.span4.sidebar-wrap.sidebar.color-content.pad
#main-content .color-content {
color: #FFFFFF;
}
Inherited from div.row-fluid.has-sidebar
#page .row-fluid {
color: #ffffff;
I am sorry this is so long but my site is in maintenance mode and I don't know how to link the page. I could give someone acces so the can look at it.
Thanks for any help.
Essentially what you need to do is create a transparent border of 10px with a red box shadow.
img {
border: 10px solid transparent;
box-shadow: 0px 0px 15px 0px rgba(255,0,0,1);
}
Then set each of the images to the width % you want.
See this jsfiddle http://jsfiddle.net/TZh2Y/