I'm having a bit of trouble getting Chrome to honor the border radius on child elements.
Here's the setup:
<div class='wrapper'>
<img id='sosumi' src='http://images.apple.com/safari/images/overview_hero.jpg' />
</div>
if the wrapper is a positioned element (e.g. position: relative) and has a border-radius, then the border radius will not be applied to the img content.
it doesn't have to be an image, either. any content that fills the background.
Here's a reduced example page that shows off the problem. View in Safari, Mobile Safari, Firefox, or IE and the corners of the image will be clipped to the round corner. Viewed in Chrome the image overflows the corner (despite the overflow:hidden css) and looks ugly.
Have a look:
https://dl.dropbox.com/u/433436/no-rounding/index.html
The question:
Is there some workaround for this that's not too insane? Does anyone know why this affects one WebKit based browser and not others? Perhaps this is coming to update in Chrome soon?
You need to remove the position: relative
If your really need position relative then you can double wrap your element:
HTML:
<div class="outer">
<div class="wrapper">
<div class="inside">
</div>
</div>
</div>
CSS:
.outer {
position: relative;
}
.wrapper {
width: 100px;
height: 100px;
overflow: hidden;
border: 3px solid red;
border-radius: 20px;
}
.inside {
width: 100px;
height: 100px;
background-color: #333;
}
http://jsfiddle.net/eprRj/
See these related questions:
Forcing child to obey parent's curved borders in CSS
CSS Border radius not trimming image on Webkit
How to make CSS3 rounded corners hide overflow in Chrome/Opera
Try giving the child elements a border-radius of half of that given to the parent element.
From this answer: https://stackoverflow.com/a/5421789/187954
Just add in
.wrapper:first-child{
border-radius:20px;
}
You will have to adjust the radius though depending on your border thickness and take this off the child.
I would also add in prefixes for the older supporting browsers -moz- etc..
Adding display: block; or display: inline-block; to the parent element could solve it.
Related
I have noticed a tiny rendering issue across borwsers, and i was wondering if anyone knew how to fix it.
This does not happen when the browser is full screen or maximized but rather only when the browser is resized to a smaller window. I have noticed it on Chrome,Firefox and opera for now.
image of rendering issue
So what I have here is a nested DIV.
Here is my Scss code so you can see what I am describing:
<div class="parent">
<div class="child"></div>
</div>
.parent {
width: 600px;
height: 400px;
border: 1px solid black;
margin: auto;
padding: 0;
overflow: hidden;
.child{
width: 100%;
height: 50px;
background: #000;
}
}
You will see in the image there is a small white space between the parent div and child div.
the white space is circled in red.
So does anyone know what causes this minor issue?
This may be caused by a whitespace in your html between the parent and child. You could test this by removing all whitespace and seeing it if fixes the problem, so instead of this:
<div>
<h1>Title here</h1>
</div>
you could try:
<div><h1>Title here</h1></div>
If this doesn't work, a quick fix might also be to add a 1px negative margin on the child ( margin-left: -1px)
I am trying to achieve an effect where I can diagonally crop an image in a way that is displayed below. I am aware of clip path as a solution but it would not be suitable in this scenario since it is not supported by certain browsers which are essential for this particular task. (IE and Edge)
Additionally, the cropped edge would need a black border which adds on to the complexity of what I am trying to do. Having searched for answers and coming up with anything, any suggestions would be appreciated.
Maybe you could overlay the image with a rotated element (div or something) that you give a border and white background. This solution would work if you're okay with a solid background color.
Another solution, depending on your requirements, could be to simpy use a .png image with transparency.
Yes you can, it's a bit tricky to get the sizes of the divs correct. But here's generally how to do it:
HTML:
<div id="outerwrapper">
<div id="innerwrapper">
<div id="content">
<span>asdf</span>
</div>
</div>
</div>
CSS:
#content {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(-60deg);
transform-origin: 50% 50%;
position: relative;
}
#content span {
position: relative;
top: 30px;
left: 30px;
}
#innerwrapper {
border-right: solid 3px black;
overflow: hidden;
width: 100px;
height: 100px;
}
#outerwrapper {
transform: rotate(60deg);
transform-origin: 50% 50%;
width: 120px;
height: 120px;
overflow: hidden;
}
Fiddle:
https://jsfiddle.net/ywfpeve8/
To explain this:
You have a div that contains the content itself. In this example it's just a span, but it can be anything. (I put it in to see that in the end everything is horizontal again)
You rotate that content div to some degree that suits you.
You place that div in a wrapper with a different size where you can position your content in. That div has an overflow: hidden, to crop all that content that is outside of the inner wrapper box. That wrapper then also has the border where you want the crop to be highlighted.
That inner wrapper is placed in an outside wrapper that rotates the same amount at the content div, but backwards, leaving you with the original 0 degree alignment of the content. This div again has overflow: hidden to crop that inner wrapper again so that you can hide the other "crop edges" that you want to be invisible. In my example code I didn't to the correct dimensions and positionings as it takes a bit to get right. But if you have an image with a white background, that shouldn't be very hard anymore to get things right.
Bonus: the background of the top-level element (that element that holds the outerwrapper can have any background at all and you won't see a rectangular box at the bottom right corner (for this example) as everything just happens with overflow: hidden and without bars that go over the content to hide it :)
When adding a border-radius on an iFrame's parent div, the border doesn't perfectly fit the iFrame, even when they are assigned the same width and height values.
I've added arrows pointing to the visual gaps in the resulting image below. Screenshot is from the latest version of Chrome (March, 2016).
HTML Code:
<div class="mapFrame">
<iFrame class="googleMap" src="http://maps.google.co.uk/maps?q=sanfrancisco&output=embed" width="500" height="400"></iFrame>
</div>
CSS Code:
.mapFrame
{
border-style: solid;
border-width: 6px;
border-color: #ffffff;
box-shadow: 0px 0px 20px #000000;
margin: auto;
border-radius: 80px;
overflow: hidden;
width: 500px;
height; 400px;
position: relative;
}
Result:
Have you tried .mapFrame iframe {border: none}? From my computer (also latest chrome), it appears to be the default iframe border. You might also consider making the iframe display:block as inline elements tend to have line height and letter spacing that throws off pixel exact rendering.
Border radius isn't well supported or consistent yet. If you want the desired effect, try using DIV's around the element and use graphics instead, with an overflow of hidden in your CSS. You might want to look into the sliding doors technique if you're iframe varies in height.
http://www.alistapart.com/articles/slidingdoors/
Hope this helps.
Good luck!
I can't seem to get the background of a <legend> element to be transparent. See this jsFiddle: http://jsfiddle.net/hWZa6/ (tested in Chrome and Firefox)
The effect I am trying to accomplish is actually moving the <legend> element below the top border of the containing <frameset> element, but nothing I do makes the top border complete. It is always missing the bit of the line where the legend would be, whether I try to use transparency or position:
http://cl.ly/image/1W043h0I3f0A/Edit%20this%20Fiddle%20-%20jsFiddle.jpg
How can I make the area of border where the legend WOULD be, complete?
You can add position:absolute to the legend. Optionally add position:relative to the fieldset so you can move things around.
You can position it off the screen,
position:absolute; left:-999em;
Or your favorite offsetting technique that's compatible with screenreaders and such. ( Perhaps investigate boilerplate's image replacement styles )
Try this, just hide the fieldset border and wrap the element in a div with a border. http://jsfiddle.net/hWZa6/15/
<div id="wrapper">
<fieldset>
<legend>Test</legend>
The top border is never fully visible, despite the legend being set <code>visibility: hidden</code>.
<div id="A">
<div id="B">Upon applying <code>visibility: hidden</code> this div becomes transparent, and the red div behind it is fully visible.</div>
</div>
</fieldset>
</div>
fieldset { border: none; }
#wrapper { border: 1px solid black; }
legend { display: block }
#A { background-color: red; width: 300px; height: 150px; padding: 10px;}
#B { background-color: blue; width: 400px; height: 100px;}
Use this CSS for the legend element.
legend { margin-left: -9999px; }
If you don't want to, or can't change the HTML, and you don't need the legend text to be visible, you can turn the display off.
legend { display: none; }
If you do have control over the HTML, then #user1289347's solution would work, though it requires adding wrapper elements.
I have a site that I'm working on, and one of the requirements is that it cannot use any client side scripting (jQuery/JavaScript). And since I'm not that great with CSS, I'm a little stuck here.
I have a simple div, which should have a "border image". But I can't use the CSS border-image since it doesn't work with IE (already tested), and I can't get two different images for top and bottom to work with background-image: - so now I'm left wondering what I can do...
Below is what it should look like, both the arrow-looking things are 2 png files:
Is there any way to accomplish this? By using just 1 div, and 2 images? Without JavaScript, and also maintaining cross-browser compatibility (with some exceptions, like ie6<)?
This works in: IE9, Firefox, Chrome, Opera and Safari
CODE:
<style>
#Container {
width: 400px;
height: 400px;
margin-left: auto;
margin-right: auto;
border:1px solid #000000;
}
.boxTop {
position: relative;
left: 100;
top: 100;
width: 200px;
height: 10px;
background-color:#00CC00;
/*place background image css code here and remove line above*/
}
.box {
position: relative;
left: 100;
top: 100;
width: 200px;
height: 200px;
background-color:#CC0000;
}
.boxBtm {
position: relative;
left: 100;
top: 100;
width: 200px;
height: 10px;
background-color:#0000CC;
/*place background image css code here and remove line above*/
}
</style>
<div id="Container">
<div class="boxTop"></div>
<div class="box"></div>
<div class="boxBtm"></div>
</div>
Darcey's solution is very good. The box div with 3 divs inside, the middle one for content and the other 2 for the images (with css property background-image).
If you don't want to modify your html you could try playing with css :before and :after
Example
If the block has fixed height and width just set background one image and paddings. If it has fixed width use #Mr. Alien's solution. And if it has fixed height crop image horizontaly and make background repeat-x. If both width and height are dynamic i'd suggest to use 2-3 additional divs anyway (i know you want to avoid it), i dont think playing with :before and :after is better.
First solution: use just gradients. No images, no extra elements or even pseudo-elements.
Of course, gradients are not supported by IE9 and older, so another solution would be to use multiple backgrounds.
IE8 and older don't support multiple backgrounds the CSS3 way, but you could use AlphaImageLoader filter as fallback for these browsers.