Any idea why there's a thin grey line above my green and how to get rid of it?
Thanks
https://jsfiddle.net/Lc7gym88/
hr {
border-bottom: 4px solid #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 0;
}
It's because <hr/> has border (at least in FireFox since <hr/> has browser dependent style).
Remove border first.
hr {
border: none;
border-bottom: 4px solid #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 0;
}
body {
background-color: black;
}
<br/>
<hr/>
Replace this:
border-bottom: 4px solid #469551;
by this:
border: 4px solid #469551;
Here is the JSFiddle demo
Removed default <hr> border and uses height and background
hr {
background: #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 4px;
border:none;
}
Example : https://jsfiddle.net/Lc7gym88/1/
by default tag <hr> taking border so you need first border zero. then add height check my demo
Related
I see whitespace between the div's border and the nav in chrome only at a specific screen size. I also see it in the fiddle so I don't have any extra code.
Also same happens in the snippet, I see the white space only when I expand it to full page.
*{
padding: 0;
margin: 0;
font-size: 0;
line-height: 0;
}
div{
min-height: 100vh;
border: 0.5vw solid red;
width: 100%;
box-sizing: border-box;
}
nav{
background: black;
height: 11vh;
}
<div>
<nav>
</nav>
</div>
The problem is this:
border: 0.5vw solid red;
and that doesn't give you a whole number as such it anti-alias the border with the white DIV and what you are likely be seeing is more orange than white.
I've come up with a hack by having 2 separate divs one for the nav and that div background is black so your border is anti-alias to black rather than white.
Fiddle: http://jsfiddle.net/dg45wfc8/
*{
padding: 0;
margin: 0;
font-size: 0;
line-height: 0;
}
.content-div {
min-height: calc(((100vh - 11vh) - 0.5vw));
border: 0.5vw solid red;
width: 100%;
box-sizing: border-box;
border-width: 0 0.5vw 0.5vw 0.5vw;
border-style: solid;
border-color: red;
}
nav{
background: black;
height: 11vh;
}
.nav-div {
border-width: 0.5vw 0.5vw 0 0.5vw;
border-style: solid;
border-color: red;
background: black;
}
<div class="nav-div">
<nav>
</nav>
</div>
<div class="content-div">>
</div>
You can add margin-top:-1px to remove the white space coming under the div with border. I used this to fix my white space issue, it works!
<div> test </div>
div{
border: 3px solid #FB982E;
margin-top: -1px;
}
The problem is with the unit vw you are using in it. When I changed it to the px the white gap gets eliminated.
*{
padding: 0px;
margin: 0px;
font-size: 0px;
line-height: 0px;
}
.div{
border: 5px solid red;
width: 100%;
box-sizing: border-box;
}
nav{
background: black;
height: 11vh;
}
<div class="div">
<nav>
</nav>
</div>
Any idea why there's a thin grey line above my green and how to get rid of it?
Thanks
https://jsfiddle.net/Lc7gym88/
hr {
border-bottom: 4px solid #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 0;
}
It's because <hr/> has border (at least in FireFox since <hr/> has browser dependent style).
Remove border first.
hr {
border: none;
border-bottom: 4px solid #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 0;
}
body {
background-color: black;
}
<br/>
<hr/>
Replace this:
border-bottom: 4px solid #469551;
by this:
border: 4px solid #469551;
Here is the JSFiddle demo
Removed default <hr> border and uses height and background
hr {
background: #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 4px;
border:none;
}
Example : https://jsfiddle.net/Lc7gym88/1/
by default tag <hr> taking border so you need first border zero. then add height check my demo
this is my first post here. I don't know how to explain my problem because I don't really know what is causing my CSS code to break. It would be easier to show you in a photo.
So I have a div tag and input and div child elements inslide. One of the div is static 32px x 32px and I am calculating its width with calc(100% - 32px), but when scaling some pixels aren't filled with the input.
Here's a photo of the problem: http://imgur.com/TkRFLde
This occurs when the zoom is not divisible by 100. For example it breaks on 110%, 150% and 175%. But it is right when the zoom is 100%, 200%, 300%...
Heres my code:
<div class="search">
<input type="text" value="Search" class="search-text" />
<div class="search-icon" ></div>
</div>
CSS:
.search {
height: 32px;
width: 250px;
}
.search-text{
float:left;
width: calc(100% - 55px) !important;
display: inline-block !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
margin: 0;width: 196px;
}
.search-icon{
display: inline-block !important;
background-color: #ACB6BE;
height: 30px;
width: 31px;
float:right;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
border: 1px solid #acb6be;
}
input[type=text] {
border-radius: 5px;
border: 1px solid #acb6be;
min-width: 180px;
color: #acb6be;
padding: 0 10px;
height: 30px;
background-color: #fff;
font-weight: 600;
}
Or jsfiddle: http://jsfiddle.net/39VDR/1/
The problem happens because when you zoom, your values will not be integer anymore. This means that rounding will take place and the outer container (.search) will be 1px larger than you would expect.
You can remove the float:right on the .search-icon and it will work ok.
You can see it here:
http://jsfiddle.net/39VDR/4/
.search-icon{
display: inline-block;
background-color: #ACB6BE;
height: 30px;
width: 31px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
border: 1px solid #acb6be;
font-size:12px;
vertical-align: top;
}
Still, as mentioned, you can remove the !important if you just add more specificity to your selectors.
I want to make this <hr> so it will stretch the full width, right to the edges of its parent container. I have tried adding margin-left/padding-right to overcome this but it keeps changing when resizing (responsive).
.single-article .article-container-inner {
background: #f0eded;
border: 1px solid #c9c7c7;
padding: 20px;
margin-bottom: 20px;
}
.single-article hr {
margin-top: 30px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #c9c7c7;
width:100%
}
<div class="article-container single-article">
<div class="article-container-inner">
<hr>
</div>
</div>
(also at http://jsfiddle.net/bh2f6/1/)
Is there a better solution for this?
Edit: I can't edit the parent container's padding as that is needed for bunch of other elements.
Your width:100%; on the <hr /> and the padding on the parent were messing things up. The <hr /> naturally stretches across the screen and doesn't need width:100%, so remove it. Then to compensate for the padding, just add the same negative margin to the <hr />.
Change your CSS to this:
.single-article hr {
margin: 30px -20px 20px;
border: 0;
border-top: 1px solid #c9c7c7;
}
See working jsFiddle demo
Something like this might work...
hr {
padding: 50px 0;
border: none;
&:before {
// full-width divider
content: "";
display: block;
position: absolute;
right: 0;
max-width: 100%;
width: 100%;
border: 1px solid grey;
}
}
http://codepen.io/achisholm/pen/ZWNwmG
HR Secret things, you must know.
When your horizontal rule (hr) leaves 15px from left and right, probably when you use with bootstrap.
<hr class="my-hr-line">
.my-hr-line {
position: relative;
left: -15px;
width: calc(100% + 30px);
height: 2px;
border: 2px solid blue;
}
Hope it will help many one.
Removing Padding should work for you
Working Example
.single-article .article-container-inner {
background: #f0eded;
border: 1px solid #c9c7c7;
margin-bottom: 20px;
}
.single-article hr {
margin-top: 30px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #c9c7c7;
width:100%
}
You mean like this?
Fiddle
just change the padding to padding: 20px 0;
I have some floating elements on a page.
What I want is the div that is floated left to be "maximally wide" so that it is as wide as it possibly can be without causing the red div ("I go at the right") to spill over onto the next line.
An example is here: The width:100%; doesn't produce the desired effect!
** I don't want the green element ("I want to be as wide as possible") to go "under" the red element. Its very important that they both stay separate i.e. .. I think they must both be floated!
<div class="container">
<div class="a1">i go at the right</div>
<div class="a2">i want to be as wide as possible,</div>
<div class="clear"></div>
</div>
<style>
div
{
border: solid 2px #000;
background-color: #eee;
margin: 8px;
padding: 8px;
}
div.a1
{
float:right;
background-color: #a00;
border: solid 2px #f00;
margin: 12px;
padding: 6px;
}
div.a2
{
float: left;
/*width: 100%;*/ /*this doens't produce desired effect!*/
background-color: #0b0;
border: solid 2px #0f0;
margin: 12px;
padding: 14px;
}
.clear
{
border: none;
padding: 0 ;
margin: 0;
clear:both;
}
</style>
Work with percentages:
div.a1
{
float:right;
background-color: #a00;
border: solid 2px #f00;
margin: 2%px;
padding: 6px;
width: 8%;
}
div.a2
{
float: left;
width: 84%;
background-color: #0b0;
border: solid 2px #0f0;
margin: 2%px;
padding: 14px;
}
Play with the widths, heights and margins % to get the desired look. Just remember that margin: sets right and left margins therefore margin: 2% uses 4% of the wrapper's width. Margins + widths should sum 100%, in this case (2%*2)*2 + 84% + 8% = 100%.