I have a div with border-radius set to some value (let's say 10px), and a nested div that is the full width and height of its parent.
<!-- ... -->
<style type="text/css">
div.parent {
display: block;
position: relative;
width: 100px;
height: 100px;
border-radius: 10px;
background: #0000ff;
overflow: hidden;
}
div.inner {
display: block;
position: relative;
width: 100%;
height: 100%;
background: #ff0000;
}
</style>
<!-- ... -->
<div class="parent">
<div class="inner"></div>
</div>
<!-- ... -->
I noticed that the parent does not clip the child around the rounded corners, in spite of overflow being set to hidden. Another stackoverflow thread indicates that this behavior is "by design":
How do I prevent an image from overflowing a rounded corner box with CSS3?
However, upon digging up the working draft for CSS3 backgrounds and borders...
http://www.w3.org/TR/css3-background/#corner-clipping
...I couldn't help but notice the following description under the "corner clipping" section:
Other effects that clip to the border
or padding edge (such as ‘overflow’
other than ‘visible’) also must clip
to the curve. The content of replaced
elements is always trimmed to the
content edge curve
So what am I missing? Is the content supposed to be clipped to the corners? Am I looking at outdated information? Am I doing it wrong?
If you remove position: relative; on both elements the outer element clip the child around the rounded corners. Not sure why, and if it is a bug.
It's not by design, there's an outstanding defect in Firefox about this. Should work OK in any WebKit browser. In Firefox you either have to add border radius to the contained element too, or use some sort of hack.
I came here looking for an answer because I had a similar problem in Chrome 18.
I was trying to have a rounded box with two elements inside of it - title and index number - with index number positioned absolutely at the bottom left corner of the box.
What I noticed was if I had the HTML like this, the title element would bleed outside the rounded corners (border-radius) even though overflow was set to hidden on the parent element:
<a>
<div style="overflow:hidden; border-radius:15px; position:relative;">
<div id="title" style="text-align:center;">Box Title</div>
<div id="index" style="position:absolute; top:80px;">1</div>
</div>
</a>
But if I moved the relative positioning up one parent element everything looked good:
<a style="position:relative;">
<div style="overflow:hidden; border-radius:15px;">
<div id="title" style="text-align:center;">Box Title</div>
<div id="index" style="position:absolute; top:80px;">1</div>
</div>
</a>
Just wanted to chime in on this one since I found this with a similar problem.
In a div with its overflow set to scroll, the border-radius didn't clip the content while scrolling unless the content was scrolled to the absolute top or bottom. Even then, the clipping only sometimes reappeared if I scrolled the document to the absolute top or bottom as well.
On a lark I added a transparent border to the element and that seemed to enforce the clipping on the corners. Since I already had some space around the element, I just cut that in half and applied the remainder to the border thickness. Not ideal, but I ended up with the result I wanted.
Tested in Chrome, Safari and Firefox on Mac.
Related
I have a container with a background video, and I am creating a slanted div effect by absolutely positioning a div with a triangular image at the bottom of the div.
The structure for the div:
<div class="triangle">
<img src="triangle.png" />
</div>
and the CSS:
.triangle {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.triangle img {
width: 100%
}
It works and looks perfectly fine on Chrome, Firefox, and even IE11, but on Edge there is a one pixel transparent bleed-through of the background video no matter what I do. I've tried shifting the image down a few pixels, giving it a higher z-index, adding, translating and positioning multiple white pseudo elements to cover it up, but Edge will not display the elements as flush or allow the line to be covered up by seemingly any means.
Does anyone know what is causing this or how to fix it?
Edit: Sorry for the absence, Thanksgiving!
Here is a link to the PNG triangle being used: https://res.cloudinary.com/dgeb3iekh/image/upload/v1542393468/new-slant_ga8nka.png
Here is a Codepen that reproduces the problem in Edge (for me anyway).
I have an image/link that I'm trying to absolutely position with the following:
HTML:
<div id="content">
<img id="calendar" src="/bundles/majorproductionsadisite/images/calendar.jpg" alt="calendar" />
<div class="blogEntry">
<h2>Blog title</h2>
<div>Blog text</div>
</div>
</div>
CSS:
#calendar {
position: absolute;
top: 210px;
left: 420px;
z-index: 9000;
}
In Chrome, this puts the calendar image flush to the left of the blog:
In contrast, in Firefox and IE, the calendar is positioned much further to the left:
Any suggestions on how I can get either Chrome to fall in line with the other two, or vice versa?
You need a common reference point on the page for the absolutely positioned element. Otherwise, the element is positioned relative to the browser window, so the position can change depending on the browser size, etc. Try positioning the content div relatively.
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Did you try using a CSS reset to zero out all of your margins and paddings? Resets are meant to prevent cross-browser differences as much as possible.
Why Use CSS Resets
Currently I'm working on this page (look at Figure1)
I need to make shadow on the article div and I cannot use box-shadow attribute due to browser compatibility.
So we divide the background into 3 pieces like this,
<div class="article">
<div class="background-top"></div>
<div class="background-mid"></div>
<div class="background-bot"></div>
<div class="contents">
<!-- contents -->
</div>
</div>
It was nice until we change background image to PNG from JPEG which contains light-blue background-color already.
Before we change image files I could do it with z-index property. (set middle part's height to 100% and put top/bot parts on it)
However, since I change it with PNG It seems wierd because of opacity of PNG.
Bottom line is- I need to do something like this:
But when I set middle part's height to 100% with margin-top/bottom attributes,
This is what I've got(fiddle: http://jsfiddle.net/EaBxP/) :
It should work with IE6 and I cannot just use JPEG since designer wants to do stick article with comments and shade over comments box.
Thanks in advance.
EDIT: article div's height is implicit so I cannot just set middle part's height.
Make the yellow div absolutely positioned, relative to the container. By setting both the top and bottom without specifying a height, the div will get the height of the container.
div.background-mid {
position: absolute;
top: 20px;
bottom: 20px;
left: 0px;
right: 0px;
background-color: yellow;
}
<div id="main-solutions">
<div id="main-solutions-top-left"></div>
<div id="main-solutions-top-right"></div>
<div id="main-solutions-body">
blah blah blah
</div>
</div>
css
#main-solutions {
}
#main-solutions-top-left {
position: absolute;
top: 0px;
left: 0px;
background: url('../images/Top-Left-Gray-Corner.gif') no-repeat top left;
width: 434px;
height: 15px;
}
#main-solutions-top-right {
position: absolute;
top: 0;
right: 0;
background: url('../images/Top-Right-Gray-Corner.gif') no-repeat top right;
width: 434px;
height: 15px;
}
#main-solutions-body {
background: url('../images/Gray-Gradient.jpg') repeat-x;
}
I'm expecting to see that main-solutions has two absolutely positioned divs at the top left and right with my rounded corner image, and then followed by the body with the gradient, but when I use HTML element browsers, the top-left and top-right div are not appearing at all, very confused, why are those divs being disregarded?
UPDATE (for others confused by answer):
At the root of my issue is I didn't understand that both absolute and relative define a new coordinate system for their contents, in addition to specifying the posision of the element itself. Found a good explanation here:
http://www.w3.org/TR/WD-positioning-970131#Positioned
from section 2.2
Like 'absolute' positioned elements,
'relative'ly positioned define a new
coordinate system for child elements,
with the origin located in the
position where the first child element
is rendered
Far as i'm seeing, the corners should be appearing at the top left and right of the page, since your container div doesn't have a CSS position property. Absolute-positioned elements' positions are relative to the innermost parent that has a position other than static (the default).
Try adding position: relative to the container div's CSS. It works much like the default, but (1) if you want, you can shift the div's position by some amount (which isn't extremely useful here, but still), and (2) since the position's not static anymore, absolute-positioned stuff inside the div should position itself relative to the container, rather than to the body/page.
Also, some browsers won't even display a div that has no content -- so the background for said div might not show. You'll probably want to have something in the divs. Even a single will work.
Have you considered using CSS border-radius to achieve this rather than messing around with images?
border-radius is supported by all browsers except IE, but even IE can be made to work with it with the use of a clever little thing called CSS3Pie.
(plus as a bonus, CSS3Pie also gives IE CSS gradient backgrounds, so you could kill two birds with one stone)
I want to create a headline (h2) with an image at the right-most area of the bounding box. I have the layout almost right except I can't push the image a little bit to the right of the element's bounding box -- how would I tweak my css so it is displayed correctly?
I'm trying to do something like this:
[{someHeadLineText}{dynamic space }{image}{5px space}]
where the [] indicate the total available width of my content.
Html:
<div class="primaryHeader">
<h2>News</h2>
</div>
Css:
.primaryHeader h2 {
background-color: green; /* the header looks like a box */
color: black;
background: transparent url(../images/edit.png) no-repeat right center;
border: 1px solid red;
}
I am placing the image to the right of my h2 element and centered vertically -- but how do I adjust the placement of the background image?
I'm afraid I think you can't. You can use either right or a pixel value as the image's x-position but that pixel value will always be relative to the left corner of the bounding box. Adding padding won't help either, it will just extend the bounding box further.
The only solution I know for this is either adding the shift to the image itself, or using an absolutely positioned element (with a slight offset) hovering behind the element - but that would require you know the width and height in advance.
Edit: evil, hacky idea. I have no time to try this out right now, but it should work if the h2 is a display: block.
Give the h2 a position: relative.
Place a div or other element inside the h2 with the following:
position: absolute;
left: 0px;
top: 0px;
right: 5px; /* This is the shift */
bottom: 0px;
background-image: url(...);
background-position: right center;
background-repeat: no-repeat;
z-index: -1; /* I don't know whether this will overwrite the h2's content */
this could lead to the desired effect, I'm not sure as I have not tried.
The element may overlay the h2's other content, in which case you would have to put the rest into a <span> element with position: relative and z-index: 1.
It's really hacky. Better put the padding into the image itself, much cleaner.
Can you add padding pixels in the image itself?
You could ditch the background image and use an image instead.
<div class="primaryHeader" style="padding-right: 5px;">
<img src="../images/edit.png" alt="" style="float: right;" />
<h2>News</h2>
</div>
You can look into CSS3 background positioning. It works in all the modern browsers (not IE, of course).