Having a little trouble removing a very thin border that is appearing around our :before and :after elements. This only seems to appear on a mobile device - doesn't even pop up in Chrome's device tools.
Problem:
Here's how the HTML/CSS looks.
.container {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;
padding: 100px 0px;
margin-bottom: 56px;
width: 100%;
}
container:after {
content: "";
background-image: url("$asset");
background-size: cover;
background-position: bottom;
position: absolute;
left: 0;
top: -15px;
width: 100%;
height: 16px;
border: 0;
outline: 0;
}
<div class="container">
<div class="bg"></div>
<section>
//Headings and Links here
</section>
</div>
I've tried making absolutely sure borders and outlines are set to none - and also adding and taking away a pixel or two from the top and bottom margins, but nothing really seems to work. It's also a bit inconsistent, the lines don't necessarily show on every page that the component is on.
Replace border: 0; with: border: none; very simple CSS Code. Also, the outline code is just for things like text, this has nothing to do with the border.
It's a chrome bug lads. Second answer here nailed it.
The solutions is reducing the height/width to 0 and putting padding in to account for the space instead. Seems to have worked in my case.
Related
Giving that code:
.avatar {
font-size: 40px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 2em;
height: 2em;
border: .15em solid red;
border-radius: 50%;
overflow: hidden;
}
.avatar>img {
object-fit: cover;
width: 100%;
height: 100%;
}
<div class="avatar">
<img src="https://thispersondoesnotexist.com/image" alt="avatar">
</div>
resulting avatar have pixels of parent element between border and own background.
They're better visible in smaller sizes (and zoom levels), but they also exist in higher zoom.
And here in firefox:
I think it's a bug, but I tested it on multiple browsers (chrome, chrome mobile, Samsung internet browser, Firefox) and in every there was some kind of this behavior.
I've tried setting background to border color, but this only image it's not the best solution, because image is still distorted.
Setting image as background helps in chrome, but only if there is no <img> selector, and I need it, to don't have accessibility issues.
You know how to repair this? Or where to find bug ticket for this?
Context:
I'm trying to use CSS to display playing cards for a game I'm designing on my free time
What I'm trying to do, specifically:
Nothing revolutionary, there's a place on my cards in which I need to write some text, and I want to center the text so that it looks good
What I did:
The relevant part of the HTML is simply this:
<div class = "card_header">
<div class = "card_cost">1</div>
</div>
And the relevant CSS:
.card_header {
position: relative;
top: 110px;
box-sizing: border-box;
width: 100%;
height: 75px;
}
.card_cost {
position: absolute;
top: 50%;
right: 165px;
transform: translateY(-50%);
font-size: 60px;
font-weight: bold;
}
What's the problem:
I expected the card_cost text to be vertically centered between the top and bottom borders of the card_header, but under the browser I was using (Firefox), the text was a bit too high. I tried to fix this by using top: calc(50% + 4px);, which looks like this (a bit better):
Since it felt a bit too tweaky for my taste, I went and checked how it looked like under another browser (Safari) to see whether it looked the same, and it looks like this:
which is the opposite problem: the text is too low.
I've tried adding border: 1px dotted gray; to get a better idea of what's happening, and here's what I see (safari on the left, firefox on the right):
The text seems to be vertically centered within card_cost in Safari (which means it would probably get centered properly if I simply used top: 50%; as I originally did), but in Firefox the box seems to be bigger and text way-high within the box.
What exactly is going on here? Why is this behaving differently depending on the browser? Is there a way to make this render the same? Or, more broadly, is there any browser-independent way for me to make the text vertically centered here?
Edit:
Since someone mentioned line-height in the comments, here's what it looks like when I add line-height: 1; for card_cost (again, Safari on the left and Firefox on the right):
With this, the text doesn't seem as centered as before under Safari, and it's even more clear that the text is way-high under Firefox
I usually take approach with invincible :before on parent with 100% of height and vertical-align: middle;. That way this :before justifies other inline-block content:
// I would apply this style everywhere
.card_header,
.card_header * {
font-family: arial;
box-sizing: border-box;
}
.card_header {
position: relative;
top: 110px;
width: 100%;
height: 75px;
text-align: center;
background-color: rgba(100, 0, 0, .1);
}
.card_header:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
border-left: 1px solid blue;
}
.card_cost {
display: inline-block;
font-size: 60px;
height: 60px;
font-weight: bold;
vertical-align: middle;
background-color: rgba(0, 0, 100, .1);
}
<div class="card_header">
<div class="card_cost">1</div>
</div>
This is yet another question about centering vertically in a div, but I've tried lots of the solutions discussed in other answers to no avail.
Here's an example of the code to play with: https://codesandbox.io/s/z2qzxwk99x
The arrow-icon is centering vertically in the viewport, instead of the viewer-wrapper div. As such, it drops off of the image completely, instead of staying centered vertically, if you make the page very narrow.
.viewer-wrapper {
background-color: #1b8dbb;
position: relative;
}
.arrow-wrap {
position: absolute;
max-height: 100%;
line-height: 95vh;
background-color: #4cae4c;
margin: auto;
opacity: .9;
left: 0px
}
.arrow-icon {
background-color: orangered;
}
.comic-page {
object-fit: contain;
max-height: 95vh;
width: 100%;
}
<div className="viewer-wrapper">
<div className="arrow-wrap">
<LeftArrow className="arrow-icon" size={75} />
</div>
<img className="comic-page"
src="http://assets-production.rovio.com/s3fs-public/hatchlings_0.jpg"
about="This is an image"
/>
</div>
The magic here is Flexbox (and Grids, but Flexbox has way better browser support). Keeping the same HTML layout, you could use somerthig like:
.viewer-wrapper {
background-color: #1b8dbb;
display: flex;
align-items: flex-start;
}
.arrow-wrap {
background-color: #4cae4c;
margin: auto;
opacity: .9;
}
.arrow-icon {
background-color: orangered;
}
.comic-page {
object-fit:contain;
min-height: 100%;
max-width: 100%;
}
Depending on how much support you need of IE, there are different ways to accomplish vertical alignment.
If you don't have any need to support IE, you could use the flex display property:
.viewer-wrapper{
display: flex;
align-items: center;
}
or, continue with what it looks like you're trying to do. What your missing to do so is the top: property. Since you've already correctly made the parent element position: relative, setting top: 50% will set your arrow to begin halfway down the viewer-wrapper element. From here you need to set a negative margin to correct for the arrow's height. Since it looks like you specify a size of 75(px?), you can achieve this like:
.arrow-wrap {
position: absolute;
background-color: #4cae4c;
margin-top: -37.5px;
left: 0px;
}
You shouldn't have to set any other margins.
A great resource for this, and what I used to help answer you, is howtocenterincss.com.
I am using transform: skew to create the effect of a down arrow on my banner image using both the :before and :after tags. The result should look like the following:
However, in IE 9-11 there seems to be a rounding issue. At some heights there is one pixel from the background image that shows below the skewed blocks resulting in the following:
In my case, the banner is a percentage of the total height of the window. Here is the some sample code which should be able to reproduce the problem:
HTML
<div id="main">
<div id="banner"></div>
<section>
<h1>...</h1>
<p>...</p>
</section>
</div>
CSS
#banner {
position: relative;
background-color: green;
width: 100%;
height: 75%;
overflow: hidden;
}
#banner:before,
#banner:after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 50%;
height: 1.5em;
background-color: #FFFFF9;
transform: skew(45deg);
transform-origin: right bottom;
}
#banner:after {
right: 0;
transform: skew(-45deg);
transform-origin: left bottom;
}
body {
background-color: #333;
position: absolute;
width: 100%;
height: 100%;
}
#main {
max-width: 40em;
margin: 0 auto;
background-color: #FFFFF9;
position: relative;
height: 100%;
}
section {
padding: 0 1em 5em;
background-color: #FFFFF9;
}
And here a working example.
Yes, seems to be a rounding issue – and I don’t know of anything that one could do to fix this. It’s in the nature of percentage values that they don’t always result in full pixel values – and how rounding is done in those cases is up to the browser vendor, I’m afraid.
I can only offer you a possible workaround (resp. “cover up”) that seems to work – if the layout really is as simple as this, and the main content area has a white background, and no transparency or background-image gets involved there.
Pull the section “up” over the banner by a negative margin of -1px (eliminated top margin of h1 here as well, otherwise it adjoins with the top margin of the section – countered by a padding-top), so that its background simply covers up that little glitch:
section {
padding: 1em 1em 5em;
background-color: #FFFFF9;
position:relative;
margin-top:-1px;
}
section h1:first-child { margin-top:0; }
Well, if you look closely, that makes the corner of triangle look slightly “cut off” (by one pixel) in those situations where the rounding glitch occurs – if you can live with that (and your desired layout allows for it), then take it :-) (And maybe serve it to IE only by some means). If not – then sorry, can’t help you there.
I know I have seen this somewhere before, but I am trying to create a black fixed navbar with a marker that is transparent cut-out triangle. I need help getting the triangle cut-out to be transparent to the background, so when you scroll the page, you can see through to the content beneath:
I have a standard list/anchor navigation with a javascript to move the .current class depending upon the page section:
<div class="navbar">
<ul>
<li class="current"><a>home</a></li>
<li><a>products</a></li>
<li><a>services</a></li>
<li><a>contact us</a></li>
</ul>
</div>
styled with the following CSS:
.navbar {
width: 100%;
position: fixed;
background: black;
float: left;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
a {
padding: 10px 20px 20px;
}
.current a {
background: transparent url('../img/wedge-red.png') center bottom no-repeat;
}
The only way I can think to do it is to add extra divs on either side of the ul and assign the background to them, and then use a transparent png with a cutout as the background of the li a's.
Is there a way to do this without getting really ugly like that, and adding extra divs?
Try CSS pseudo elements!
Add 2 free DOM elements before and after an existing element in the DOM. Ideal in cases when you don't want to add stuff to your markup to satisfy styling needs.
CSS Markup
.item:before {
content:"";
display: inline-block;
width: 20px;
height: 20px;
background-color: silver;
}
.item:after {
content:"";
display: inline-block;
width: 20px;
height: 20px;
background-color: gray;
}
HTML
<div class="item">Content</div>
Check this JSFiddle for a demo.
Make sure you set content: "" and display:block in order to see them.
Here's what I ended up with -- extending the borders and cropping them with overflow: hidden; (a little hacky, but it works and doesn't add elements to the DOM):
.navbar {
width: 100%;
height: 60px;
position: fixed;
overflow: hidden;
}
ul {
border-left: solid black 2000px;
border-right: solid black 2000px;
position: absolute;
top: 0;
left: 50%;
margin-left: -2000px;
}
The above worked nicely for my purposes, and behaves in a responsive environment.
The other answer on this page, using :before and :after pseudo elements didn't work for my purposes. It ended up being too fussy, the pseudo elements wouldn't align properly, and kept wrapping to the next line when the browser window was resized. That solution as suggested works with fixed-width elements, not percentages as was specified in the original question.