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!
Related
I have the following code:
<div style="width: 100px;
overflow: hidden;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 20px;
">
2222222222222222222222111111111111111111111111113333333333333333333</div>
(XHTML 1.0 transitional)
What happens is that the padding-right doesn't appear, it's occupied by the content, which means the overflow uses up the padding right space and only "cuts off" after the padding.
Is there any way to force the browser to overflow before the padding-right, which means my div will show with the padding right?
What I get is the first div in the following image, what i want is something like the 2nd div:
image
I have the same problem with the overflow:hidden; obeying all the padding rules, except for the right hand side. This solution works for browsers that support independent opacity.
I just changed my CSS from:
padding: 20px;
overflow: hidden;
to
padding: 20px 0 20px 20px;
border-right: solid 20px rgba(0, 0, 0, 0);
Having container divs works fine, but that effectively doubles the amount of divs on a page, which feels unnecessary.
Unfortunately, in your case this won't work so well, as you need a real border on the div.
Your best bet is to use a wrapping div and set the padding on that.
I had a similar problem that I solved by using clip instead of overflow. This allows you to specify the rectangular dimensions of the visible area of your div (W3C Recommendation). In this case, you should specify only the area within the padding to be visible.
This may not be a perfect solution for this exact case: as the div's border is outside the clipping area, that will become invisible too. I got around that by adding a wrapper div and setting the border on that, but since the inner div must be absolutely positioned for clip to apply, you would need to know and specify the height on the wrapper div.
<div style="border: 1px solid red;
height: 40px;">
<div style="position: absolute;
width: 100px;
background-color: #c0c0c0;
padding-right: 20px;
clip: rect(auto, 80px, auto, auto);">
2222222222222222222222111111111111111111111111113333333333333333333</div>
</div>
Wrap the div and apply padding to the parent
.c1 {
width: 200px;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 50px;
}
.c1 > .c1-inner {
overflow: hidden;
}
<div class="c1">
<div class="c1-inner">2222222222222222222222111111111111111111111111113333333333333333333
</div>
</div>
If you have a right-adjacent element to the one in question, put padding on its left. That way the content from the left element will flow up to but not past its margin, and the left padding on the right-adjacent element will create the desired separation. You can use this trick for a series of horizontal elements which may have content that needs to be cut off because it is too long.
I have a box with padding and border. The image is sometimes too large to fit. I'd like to display the box without distorting the image (crop is fine) and keep the padding and border (matte). Here is an example:
http://jsfiddle.net/n236vh2u/
Notice the bottom padding is overwritten by the image? I tried setting z-index: 2; on the outer <a> box, setting box-sizing: padding-box;, setting two borders border: 5px solid white, 1px solid #ccc;, but none of those worked.
Split up your styles over both the div and the a:
JSFIDDLE
CSS:
#gallerysingle {
max-height: 100px;
border:1px solid #ccc;
margin: 0 11.2px 11px 0px;
padding:5px;
width:100px;
}
#gallerysingle a {
display: inline-block;
max-height: 100px;
overflow: hidden;
}
#gallerysingle img {text-align:justify;}
You can use the clip property on the image.
#gallerysingle img {
text-align:justify;
position: absolute;
clip: rect(0px, 100px, 100px, 0px);
}
Note, that it has to be positioned absolute for doing so. Therefore you will have to set the height of the a tag fixed to 100px.
#gallerysingle a {
overflow:hidden;
display: inline-block;
max-height: 100px;
border:1px solid #ccc;
margin: 0 11.2px 11px 0px;
padding:5px;
width:100px;
height: 100px;
}
See it in action – jsfiddle
Update
To answer the question of browser support for this property, i did some more research:
Being a CSS 2.1 property, clip browser support appears to be fairly good. This MDN page says it is working in all major browsers since way back.
I've also done some testing on mobile showing it works with android 4.1 stock browser and mobile firefox as well as ipad 1 safari.
Also note, that this property is deprecated. MDN suggest to use clip-path instead. But apparently browser support for clip-path is not sufficient yet. So i would stick to clip for now until clip-path is widely supported. The syntax for clip-path appears to be the same, just exchange the property name.
I'm seeing a rendering issue for a 2px dotted border similar to CSS dotted border issue in adjacent columns in a table rendered as dash in Chrome but on desktop Safari and Chrome. I tried several widths and it happens in all of them
This is a sample:
the vertical line ending has the same issue but it's out of the picture.
Sample:
http://jsfiddle.net/bcdQQ/
This issue happens if the width is not divisible by the border-width.
This works:
http://jsfiddle.net/bcdQQ/5/ (i made it a little bit bigger, for better sight)
#prodpre {
border-bottom: #555 5px dotted;
height: 20px;
margin: 0px 0px 2px 0px;
padding-bottom: 10px;
width: 505px;
}
So, the only possibility to catch this issue, would be a javascript solution, which corrects the width of the div, so it is divisible by the border-width (cause it is dynamically in your example).
could you put it in a smaller container div with overflow hidden?
I can't reduce size of textarea using mouse although I didn't specify minimum width and height. In Firefox everything is ok. This question was asked here: Can't reduce size of resizable textarea in Chrome, but I couldn't find suitable answer, maybe someone can help me.
This is my mark up:
<textarea id="textarea" name="textarea"></textarea>
and CSS:
textarea{
width: 90%;
height: 400px;
border: 2px dashed black;
border-radius: 12px;
background-color: transparent;
font-family: Purisa;
font-size: 23px;
padding: 5px;
margin: 20px auto auto auto;
outline: none;
border-color: black;
}
Google Chrome has a some kind of restriction to show content properly to user. Because of that they edited the default actions of resizing on <textarea>. In older versions of chrome there was no restriction.
So if you use height min-height will be your height. So you need to set min-height and max-height only. Height overrides min-height in Chrome.
Here is a simple fiddle: http://jsfiddle.net/gAr72/1/
Edit:
You can see Firefox will work same as Chrome in this fiddle. Height is risky for design btw. Unlimited resizing always breaks the design. So limiting height and width is good option.
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.