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"
Related
I have several videos on my website and wish them to be displayed at a certain size. All is working fine, except that for some bizarre reason 3px is added to the left of each video tag.
I've tested the following with margin-right set to 0 and there is still 3px of white-space visible, even though Firebug doesn't register it.
How can I fix this issue? Thanks.
Here is the HTML I am using -
<video class="video-preview" controls="">
<source type="video/mp4" src="http://localhost/wp-content/uploads/2014/05/Everyone-Bat-Out-of-Hell.mp4"></source>
Sorry, your browser is old and doesn't support the HTML5 'video' tag. Sucks to be you...
</video>
And here is the the CSS -
video{
background-color: #FFFFFF;
cursor: pointer;
vertical-align: middle;
}
#gallery .video-preview{
height: 118px;
margin-right: 20px;
margin-bottom: 20px;
width: 210px;
}
As a video element is inline by default, white space between tags are rendered with a space between them. Much like if you had <span>a</span> <span>b</span> it would be rendered as:a b. Therefore if you have the following:
<video>....</video>
<video>....</video>
<video>....</video>
There will be a space rendered between each of the video elements. Fiddle
The quickest and some what dirty solution, is to put the next open tag next to the closing tag:
<video>....</video><video>
....</video><video>
....</video>
Fiddle
There are other options depending on your layout. You could add a negative right margin to the video element. Thoug this is not always consitent accross browsers.
The next option is to make the video elements block and float them left.
video
{
display:block;
float:left;
}
Fiddle
You may need some further tweaking with this approach depending on your layout.
I'm using an iFrame on the following website for the Online Booking system as shown below:
http://www.marandy.com/one2onev2
The iFrame should only display a scroll bar on the y-axis. In Firefox, IE and Safari this is working as expected, however in Google Chrome this is still showing both scroll bars (y & x).
Here is the code:-
HTML
<div id="main-online-booking">
<iframe id="main-online-frame" class="booking-dimensions" src="http://www.marandy.com/one2oneob/login-guest.php" frameborder="0"></iframe>
<div id="main-online-user">
<img alt="One 2 One Account" id="img-onlinebooking-acc" src="images/account.png" />
<img alt="One 2 One Guest" id="img-onlinebooking-guest" src="images/guest.png" />
</div>
</div>
CSS
#main-online-booking {
height: 488px;
border-bottom: 6px #939393 solid;
border-left: 6px #939393 solid;
border-right: 6px #939393 solid;
z-index: 4;
background-color: #fff;
}
#main-online-frame {
overflow-x: hidden;
frameBorder: 0;
height: 488px;
}
The overflow-x: hidden property appears to only not be working in Google Chrome on iFrames, any suggestions?
Add in Your iframe scrolling="no" and increase height #main-online-frame.......
On page inside your iframe (http://www.marandy.com/one2oneob/login-guest.php), add this html {overflow-x: hidden; overflow-y: auto;}.
And check initial height of page inside iframe. Make sure that initial height fits in height of iframe.
I ran into this same issue where Chrome was not applying overflow-x:hidden correctly, but all other browsers were. It wasn't an iFrame, but rather a div. I struggled with this for about 4 weeks and finally found that if I simply apply position:relative to that same div, it will work properly. Hopefully this is helpful to someone.
It seems logical that if you want a 1px wide black border around an iframe, you apply same rule as if you want the border around anything else. But this code doesn't work:
#myiframe{
border:1px solid black;
}
The border goes on the left and top of the iframe, sometimes (unpredictably) the bottom of it, but never the right of it. Why would it not just apply it consistently around the iframe??
I only have this problem in Google Chrome.
Try to add this..
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
outline:none;
outline:none and appearance:none will delete default browser appearance.
As pointed out in the comments on the question, I was on an out-of-date Chrome version. On the latest stable version, there is no bug.
try to wrap a DIV
html
<div class="wrapper">
<myiframe>
</div>
css
.wrapper {
float:left;
border:1px solid #000;
}
We can get unique border around our iFrame, by using attribute frameBorder.
So try <iframe src="" frameBorder="1"/>
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
i' m making a website that have to work with all browsers.
I' ve tested IE, FF, Opera, Chrome and solved a lot of thing related to CSS and jQuery compatibility... but the last thing is making me crazy :(
Safari doesn' t work as it should on the vertical div scrollbar. It is blocked at the bottom of div at the first access. Zooming in/out the page is the only way to unlock it... then it works...
I have this CSS (just a part of it) :
html, body {
margin: 0px 0px 0px 0px;
font-family: "Trebuchet MS", sans-serif;
background-color:#FFF2E6;
height:100%;
overflow:hidden;
}
#content {
margin-top:5px;
margin-left:170px;
position:fixed;
float:right;
width:88%;
height: 85%;
display:inline;
overflow:auto;
background-color:#E5E5E5;
}
#main_content {
position:static;
width:99.8%;
height: 85%;
}
The HTML page (just the interested block) :
<div id="main_content">
<div id="menu">
<p>Menu</p>
... menu block ...
</div>
<div id="content"><p>Content</p></div>
</div>
Is there any way to solve the Safari div scroll stuck problem?
Thanks very much for your help and sorry for my english.
Just a lucky shot, not sure if it will work:
try using zoom:1; in your #content css block. Although its not an widely 'supported' tag but I recall that it did miracles for some css in IE, perhaps it will work for Safari too.
Sorry if I am wrong.
The problem is that I have a PHP generated page that is printed in the #content div via Ajax functions, well, this page has some iframe tags for files upload (the only working trick to upload a file in a jQuery/Ajax context..) These iframe had the src property set to src='#' what made Safari stuck on a simple div scrolling...
So if you encounter a problem like this just remember to fix your iframe src="#" to iframe src=".