This question already has answers here:
Hidden radio button but box around it in ie8
(3 answers)
Closed 8 years ago.
In the below image - you see a mysterious box coming around Radio Button.
Any ideas what can be done ?
Below is the styling applied :
.inline-radio {
padding-top: 0px;
}
.inline-radio input[type="radio"] {
position: absolute;
opacity: 0;
}
Just from looking at your image, it looks like it has been ripped out of the layout as a result of position: absolute. One thing you could do, is display: inline instead. Not sure there is much to gain from absolute positioning without a top and left property.
Related
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Missalignment with inline-block (other elements pushed down)
(2 answers)
CSS inline-block issue - element being pushed down [duplicate]
(3 answers)
Closed 3 months ago.
I am participating in a CSS class on Udemy. Unfortunately I got no answers on thier internal discord site, so I am trying here.
This is a question about the display of some elements. What I don't understand is that first div element is moving down on the page, because I wrote the text "Hey you" in it. It shouldn't move down in my opinion, it should stay on the top of the page inline with the other two elements.
Here is the html and CSS:
div {
height: 200px;
width: 200px;
background-color: olivedrab;
border: 5px solid black;
display: inline-block;
margin: 50px;
}
<div>Hey you</div>
<div></div>
<div></div>
First div moving down
I have tried to give the first div an id:
<div id="first_div">Hey you</div>
And give that id a position of absolute:
#first_div {
position: absolute;
}
But it doesn't really work since the absolute value of the position property removes the element from the document flow, and thereby places it on top of the second element, so only two out of the three divs is showing, so no fix really!
Divs are now incorrectly stacked
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Why does clip-path (and other properties) affect the stacking order (z-index) of elements later in DOM?
(1 answer)
Closed 1 year ago.
My goal is to have boxes with a blur-glass effect. To do this I use:
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(7px);
Additionally on certain events I want to blur the whole page, except for one element (let's call it element-x). For the overlay I use:
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(2px);
z-index: 5999;
}
I'm able to create the blur-glass effect. And I'm also able to make a blur-overlay.
But as soon as the element-x lies within the box (nested) with the blurred-glass effect. It gets blurred with the overlay.
When I remove backdrop-filter: blur(7px); from the box, it works.
I know it's a stacking order problem (z-index). But I can't get it to work, as expected. How can I solve this problem?
OK. I build a codepen for you to reproduce (use Google Chrome):
https://codepen.io/54mu3l/pen/JjNdBwd
On the top you'll find the solution that is not working.
On the bottom you'll find the expected behaviour (but without the glassed-blurred-box).
As you can see the top box has a blurred background. The bottom box hasn't:
As soon as the overlay is activated (just click anywhere on the screen). The orange box on the top gets blurred (but shouldn't). The orange box at the bottom is not blurred:
EDIT:
useful links:
CSS: backdrop-filter messing up stacking order
https://developers.google.com/web/updates/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
http://jsfiddle.net/A2xht/
This question already has answers here:
Bootstrap 4 square grid
(2 answers)
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 4 years ago.
I'm building some global button classes for a CSS framework, and I'm wondering if there's any way to set an element's width to be the same as the height without hard-coding it.
Here's an example of how it would work:
HTML
<button class="button square-button">OK</button>
<div class="container">
<button class="button large-button square-button">OK</button>
</div>
CSS
.button {
height: 50px;
padding: 0 20px;
}
.square-button {
width: (always-same-as-height);
padding: 0; // Disable padding so it becomes a square
}
...
.container {
height: 100px
.button {
height: inherit;
}
}
In some scenarios I want to be able to set the height depending on the container height, and have all the buttons with the square-button class dynamically resize to that height while still staying a perfect square shape.
Is this possible using only CSS?
You can make use of CSS variables modules to achieve that. However, the browser support for CSS variables is not so good. So, proceed with caution by first checking if the browser versions you wish to support have implemented CSS modules or not.
This question already has answers here:
Responsive font size in CSS
(33 answers)
Closed 5 years ago.
I'm trying to add text in a pseudo element :before the body. It seems however I am forced to set the font-size which means it isn't responsive.
How can I force the content:'404' to be responsive when changing the browser dimensions? I'm I absolutely limited to SVG images?
Result I'm looking for is the 404 text behind content:
.
have you tried with "vw" - Viewport-percentage lengths
body::before {
content: "404";
font-size: 50vw;
position: absolute;
left: 50%;
transform: translate(-50%, -25px);
}
This question already has an answer here:
Removing spacing under the image
(1 answer)
Closed 6 years ago.
i have this code (https://jsfiddle.net/26gvaekf/1/) and want that A height was exactly at IMG boundaries. However, there is small space after IMG
can anybody explain, why this happens? and which css property i should use (only not float one).
DEMO
css
img {
vertical-align:top /* img are default bottom aligned make it to top */
}
/* for demonstration purpose */
a {
display: inline-block /* to cover your img completely */
}