I'm trying to round the corners of the video container on this page: http://tstand.com/homepage-test/
For some reason there are white pointy edges on the bottom left and right. I've inspected source a bunch of times and can't see where this white background is coming from.
If someone could tell me which class I should be adding the border-radius to that would be great. Also, this is a minor detail, but I feel like the edges aren't that smooth, is there a way to fix that?
As I see the following code should help in your case:
.page-id-965 .et_pb_video_box {
overflow: hidden;
}
It seems that the video element goes outside the container - that's why the overflow hidden helps as applying border-radius to the video element not work.
Related
I have this div that starts off at a distance from the top:
The problem is that, when I start to scroll up, the rounded image is hidden:
I am very sorry that I could not reproduce the issue, as this is a custom CSS used on Notion -- meaning that I couldn't duplicate a website for testing purposes.
What I want is for the rounded image to appear on the top of the page, as opposed to being partially cut off as in the second image. The image should be perfectly round, even if being scrolled up.
In more simple terms, I want the rounded image to display even outside of the notion-app div, which is shown in the first image that starts off at an offset from the top.
Do anyone have a suggestion of removing the problem?
EDIT I already tried z-index, but that doesn't help.
Thanks in advance.
Give the #notion-app of overflow: visible;
#notion-app{
overflow: visible;
}
https://www.w3schools.com/css/css_overflow.asp
read sample docs on w3school for reference
I've got a piece of code consisting of styled images that need to fit within a fixed sized div. If it does not, it should flow over. However, the floated element that does not fit, flows over as it should but touches the other elements and places itself over one of their shadows.
It's best to explain using an example: http://jsfiddle.net/wjw83/10/
The 7th image (barely visible) should vanish entirely or move further down where it moves out of the visible area. Can anyone help me accomplish this?
Thank you.
EDIT
Being out of ideas and on the verge of raging, I've started pasting random attributes and eventually was successful.
Solved: http://jsfiddle.net/wjw83/13/
All I had to was add "margin-bottom: 20px;" to the image class. Since it's the same value as the shadow, it leaves the shadow intact while completely removing the clipped element. Whoohoo!
.main{
padding-top: 15px;
width: 870px;
height: 140px; /* Reduced height */
overflow:hidden;
}
Live demo: Fiddle
Being out of ideas and on the verge of raging, I've started pasting random attributes and eventually was successful.
Solved: http://jsfiddle.net/wjw83/13/
All I had to was add "margin-bottom: 20px;" to the image class. Since it's the same value as the shadow, it leaves the shadow intact while completely removing the clipped element. Whoohoo!
Here's a JSFiddle that breaks uniquely in Internet Explorer 9. I'm hoping someone has seen this and knows how to resolve it.
http://fiddle.jshell.net/se9Kc/1/
Note that the scroll area top edge decoration, or "fader", gets clipped on the right side in IE9.
I understand it's natural to question the use of "fixed" at this point. The full page has an inset scrolling table with an absolutely-positioned header, adjacent to the search criteria. The "fader" is anchored to its non-scrolled (but still fluidly-generated) origin with position: fixed.
The defective algorithm seems to go like this:
correctly generate the visibility mask and content for the fixed element
correctly position the element content as requested
incorrectly position the element visibility mask against the left edge
Help?
After doing a bit of testing, it seems like using javascript to handle that particular css property allows it to function properly.
Remove:
position: fixed;
and add somewhere on your page:
<script>
$(.fadeTopGradient).css({'position':'fixed'})
</script>
If you would like accomplish this with css alone, I'm not 100% sure what to tell you. Though I did see a question regarding position:fixed in IE9 asked before here: position:fixed breaks in IE9
I hope this helps.
I've looked through other posts regarding CSS floats, but have not yet found an answer.
I have several div with same width (1/3 of screen). They are all set to float left. When one is longer than the others, it pushes the following blocks down.
I've made an example which you can see at http://apsam.dk/misc/float-pushdown-problem/index.php (the yellow div is pushed down by the blue div).
If I missed the answer in a post, please point me to it. I've looked throug alot.
EDIT to clarify. The question is: How to avoid that the yellow div gets pushed down.
To start a new line, please enter a div with the clear: both; attribute.
See my answer on another post here, which shows an example:
Link
Floats don't "jigsaw puzzle" together like that. Each of your floats has a height, that height is seen and honored. You can't get .yellow to ignore the height of .blue, especially in the same container. You could use positioning to move .yellow up.
Demo here
Or, you could use another div and treat it as your left column and have it contain the green and yellow divs.
Demo here
The best way to illustrate this question is with...a Fiddle! Before you visit the fiddle, notice there is text behind the grayest element, which is on top of a light gray element that has a border.
There is a main wrapping div (root), and two wrapping divs inside (wrap1 and wrap2). The problem here is that I need the content of wrap2 (highlight) to be behind the content of wrap1 (text), but in front of the background of the root.
This, however, must not change:
The HTML, the elements and wraps should be left untouched. Excluding the order of wrap1 and wrap2 inside root.
The highlight div must keep the absolute positioning.
Styling highlight with background-color is not an option, the existence of highlight is a must.
PS: the italics reference the id's of <div>s in the fiddle example, for whomever was too lazy to visit it.
I was able to display the text in front of the highlight by adding a z-index to text. (Adding the z-index to wrap1 also works.) The trick is to remember that z-index doesn't apply to statically-positioned elements, so you need to give the same div position: relative.
#text {
position: relative;
z-index: 1000;
}
(Large z-index because I've been bitten by IE not respecting low values in the past. May or may not still be an issue. ;-)
z-index can be difficult to grasp. I think somebody already answered your question, but if you want to learn more how they work, this is a pretty comprehensive guide:
http://www.onextrapixel.com/2009/05/29/an-indepth-coverage-on-css-layers-z-index-relative-and-absolute-positioning/
And also, here is a link where you can try out different z-index and how they are affected by different position properties (the main reason for difficulty)
http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp
#wrap1{position:absolute;z-index:2;}