I have an IFRAME with overflows hidden in the css and html. It works in Firefox, but not Chrome/Safari
Why is this?
Right, how about:
<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe>
as in the scrolling="no"
http://jsfiddle.net/neSBS/
After a pretty big research I've done on this subject I would like to post my answer, which I suggest, could be an addition to Joonas's answer:
<style>
iframe {
overflow:hidden;
}
</style>
(...)
<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe>
I think, both scrolling and overflow:hidden should be provided, although this solution won't work in a combination of Chrome and HTML5 doctype. scrolling attribute is deprecated in HTML5 and the overflow property doesn't affect iframes in Chrome. I assume, the latter is a bug, since the HTML5 specification says clearly:
In addition, HTML5 has none of the presentational attributes that were in HTML4 as their functions are better handled by CSS:
(...)
- nowrap attribute on td and th.
- rules attribute on table.
- scrolling attribute on iframe.
- size attribute on hr.
- type attribute on li, and ul.
(...)
It's said clearly - in HTML5 scrolling should be replaced by CSS overflow.
<style>
iframe::-webkit-scrollbar {
display: none;
}
</style>
As found on - Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar
Strange but - transform: rotate(0.00001deg); for div with overflow:hidden; helps for me.
Just width: 99.99%; did the trick for me.
I had this problem in Chrome but not in Firefox.
Use overflow-y:hidden; then the vertical scroll will be hidden.
Related
Say I have the following code:
<style>
iframe
{
border:none;
}
div
{
border: 1px solid;
padding: 10px;
}
</style>
<div>
<iframe></iframe>
</div>
If I view this in any modern browser there is no border around the iframe. But If I view it using IE8 or 7 then the border remains. How can I make the border disappear for older, crappier browsers?
I am also having a few other styling issues with the iframe, so bonus points for anyone can provide a good link that goes over cross browser styling of iframes.
You need to add the following to the iFrame. It's can't be done with just CSS for older browsers:
frameborder="0"
I have a Youtube HTML iframe embed in my page, this is the code:
<iframe src="http://www.youtube.com/embed/gI2eO_mNM88?rel=0&autohide=1&color=white&showinfo=0&theme=dark&wmode=transparent&hd=1" width="470" height="264" frameborder="0" allowfullscreen webkitAllowFullScreen></iframe>
If I press play I get an dotted 1px outline in IE9+8. I have this in my CSS:
embed,
object {
outline: 0;
overflow: hidden
}
But that doesn't seem to help. It doesn't get an outline in Chrome or FF (both latest versions). I also tried putting the iframe in a div with the same dimensions as the iframe and giving that div overflow: hidden, but no luck either.
I've created a fiddle for this case: http://jsfiddle.net/keaukraine/UmTZy/
As you can see, outline appears inside iframe element. You cannot affect styling of elements inside iframe since it is beyond scope of your web page.
A rather ugly solution is to place iframe the way it hides 1px of it's outline. I've placed it inside slightly smaller div and positioned it so it hides this outline. If this solution is OK for you, you can see it in this fiddle: http://jsfiddle.net/raQEH/
Give your iframe an id="iframe" and try this :
#iframe:active, #iframe:focus {
border: none;
outline: none;
}
Try border:0; if outline didn't work.
I just posted this problem at the youtube dev forum. Hope they can solve this from their site
https://groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/gqt_G5d8HYM%5B1-25%5D
http://dl.dropbox.com/u/18795563/BLOGDESIGNNEW/index.html
In FireFox, Why is there no margin on the left of the hgroup in the header? It works fine in Chrome and Safari. How do i make it work in FireFox?
I believe the problem is that the hgroup's default display setting is inline. Setting it to block will fix your problem with the margin.
#topheader hgroup {
display:block;
}
This looks like a margin to me.
after inspecting the html code of your page, I figured out the following issue in #topheader hgroup css:
overflow: visible:; Remove the column from the end of visible. i.e. overflow: visible;
Which version of Firefox? Firefox4 DOES show the margin but FF3.x may not because it does not have built-in styles for the new HTML5 elements. You must add 'display:block' for proper rendering.
Margin does not work in most case. and that is becaus it should calculate distance with elements outside. and this is dificult.
you should try padding instead of margin:
#topheader hgroup {
padding: 1em;
overflow: visible;
}
also change : to ; ;)
this will work in every browsers.
Even After setting the frameborder attribute in the iframe to 0 there is still some white space present around the iframe border (unlike the original url/link page). Is there any other way to get rid of the white space or some white must be presented around the iframe as it is within the webpage (or part of it) and it cannot be the whole page? Thank you.
Maybe that whitespace is actually the outside margin of the document loaded in the <iframe>. Try styling the loaded document with:
html, body {
border: 0px;
margin: 0px;
padding: 0px;
}
Apply below to iframe
display: block
By adding this CSS we can make iframe in full screen
body,html
{
background-color:#DDEEDD;
padding:0px;
margin:0px;
height:100%;
width:100%;
overflow:hidden;
}
iframe
{
margin:0;
padding:0;
border:none;
overflow:hidden;
background-color:#DDEEDD;
}
try this:
<iframe bgcolor=#FFFFFF frameborder=0 vspace=0 hspace=0 marginwidth=0 marginheight=0 width=100%
height="340"
src="myframe.html">
</iframe>
Simply add style="margin: 0 0 0 0" inside <iframe > tag.
example:
<iframe src="http://www.yahoo.com" style="margin: 0 0 0 0"></iframe>
If you want margin, you must add 'px' after number
(Thanks to "Inspect Element" tool of Safari Browser) this solved my solution.
Frederic's proposal solved my problem: howto get rid off the white border in a fullscreen slideshow for safari browser. Perfect! Many thanks, wimsch [Since I couldn't add a comment on his answer [[< 50]]: I put it here to let him know my gratitude]
try this
<iframe src="....." style="position:absolute;"></iframe>
I ran into a similar problem: I had the iframe inside a figure tag, and there was some white space between the iframe and the figcaption element.
<figure>
<iframe></iframe>
<!-- white space was here -->
<figcaption></figcaption>
</figure>
In my case simply adding iframe { display:block } solved the issue.
how can i set minimal height for div? But it have to resize with new data.
min-height works fine... except in IE.
The way to fix it and therefore use it everywhere is importing ie7.js
div#name
{
height: 60px;
height: auto !important;
min-height: 60px;
}
This should work across browsers including IE
You want the CSS property min-height. You'll need to be careful of not great browser support (particularly older versions of IE, shockingly enough).
div#foo {
min-height:10em;
}
in ie6.css or prepend with * html selector ( hack warning )
div#foo { height:10em; }
Since MSIE6 doesn't support min-height.