vmars316 Posted January 3, 2018 Share Posted January 3, 2018 Hello & Thanks, I am trying to get an iframe with no borders without specifying exact width: These aren't working : <iframe seamless height="100%" width="100%" src="buttons_iframe.html" ></iframe> <iframe seamless="seamless" height="100%" width="100%" src="buttons_iframe.html" ></iframe> Pls, what is the proper way ? Thanks Link to comment Share on other sites More sharing options...
Ingolme Posted January 3, 2018 Share Posted January 3, 2018 You can remove the border using CSS as in this example: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe_frameborder_css Link to comment Share on other sites More sharing options...
vmars316 Posted January 5, 2018 Author Share Posted January 5, 2018 Foxy Mod Thanks Link to comment Share on other sites More sharing options...
vmars316 Posted January 19, 2018 Author Share Posted January 19, 2018 (edited) Hello & Thanks, Yes, the <iframe> is working , But shows up as very small height & width . My attempts to get height:100%; are not working . I whittled down my code. Can you take a look at my code & see what's the prob . Thanks <!DOCTYPE html> <head> <!-- http://vmars.us/index.html http://vmars.us/default.html --> <title> vmars.us.html </title> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <style type="text/css"> /* html5 semantics tags */ article, aside, div, figure, footer, header, hgroup, menu, nav, p, section, summary{ display: block; } html { height: 100%; } #thumbwrap { } .thumb img { } .thumb span { } } body { font-size: 18px; line-height:1.25em; height: 100%;} iframe {height: 100%; } table { border-style: solid; border-color: #5A697D; border-width: 20px; } #tdLeft { text-align: center; height:100%; width:25%"; } #tdRight { text-align: left; height:100%; width:75%"; } h1, h2, h3 {font-size:22px;} </style> </head> <body style="background-color:#000000"> <!-- <body style="color:#FFFFFF"> --> <!-- =======================================TOP TABLE======== --> <table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2" > <tbody> <tr> <!-- ============================================== --> <td id="tdLeft" style="background-color:#D3DDEB; text-align:center; " > <!-- <div id="topLeft" style="text-align:center;"> --> <br> <iframe src="buttons_iframe.html" style="border:none; "> </iframe> <!-- </div> <!-- id="topLeft" --> </td> <!-- https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe_frameborder_css --> <td id="tdRight" style="text-align: center; " bgcolor="#FFFFFF"> <div id="TopRightImage" style="text-align:center;"> <img src="http://vmars.us/javascript/images/Welcome-gold.png" alt="SmileyFace.png" width="150" height="35"> </div> <!-- TopRightImage --> <div id="TopRightContent" style="text-align:center;"> <br><br> ************************************ , <br><br> ============================= . <br><br> ********** <br><br> ============================= . <br><br> ************************************ : <br><br> <a href="http://vmars.us/freeware/clipLog/clipLog-Help.html" target="_blank">clipLog/clipFind : Personal Information Manager</a> <br><br> <a href="http://vmars.us/freeware/myFavs/myFavs_Help.html" target="_blank">myFavs : Internet Bookmark Manager</a> <br><br> <a href="http://vmars.us/freeware/mySort/mySort_Help.html" target="_blank">mySort : Handy Text Sorter</a> <br> <br>"All things in moderation , except for love and forgiveness" <br> </div> <!-- TopRightContent --> </td> </tr> </tbody> </table> <br> <!-- ============================================== --> </body> </html> Edited January 19, 2018 by vmars316 Link to comment Share on other sites More sharing options...
dsonesuk Posted January 20, 2018 Share Posted January 20, 2018 Get rid misplaced '}', double quote after width. Height with percentage value unit won't work, it has to be unit of 'px' or 'vh'. Link to comment Share on other sites More sharing options...
vmars316 Posted January 20, 2018 Author Share Posted January 20, 2018 (edited) 21 hours ago, dsonesuk said: Get rid misplaced '}', double quote after width. Height with percentage value unit won't work, it has to be unit of 'px' or 'vh'. Thanks , got rid of '}' & width "" : Width is working fine now . How come this page can use html { height: 100%; https://www.w3schools.com/cssref/tryit.asp?filename=trycss_dim_height_percent Also , on same page they are showing Resize values . Theoretically , could I likewise calculate a Resize value , then plug this absolute value into "td height: value" ? ? Also , I am using css .thumb:hover, .thumb:hover span { . It works fine when not using <iframe . But when I use <iframe , instead the hover object and <img show up side by side . Is there a way to get hover working ? Thanks Edited January 20, 2018 by vmars316 Link to comment Share on other sites More sharing options...
vmars316 Posted January 23, 2018 Author Share Posted January 23, 2018 Please respond , Thanks Link to comment Share on other sites More sharing options...
dsonesuk Posted January 23, 2018 Share Posted January 23, 2018 (edited) Height 100%, for browser viewport height won't work unless all direct parents have height: 100% up to and including html element, OR you give the closest parent height: 100vh; which is viewport height. any margins, padding borders will be addition to this height. html->body height: 100% OK! table direct child of body has no height: 100% FAIL! it will collapse, td height will collapse to content height. resize? depending how you implement it, try it see hover effect of iframe src page? from parent main page? you don't you apply css directly on the iframe src page itself. Quote instead the hover object and <img show up side by side . Don't know why that would happen? Edited January 23, 2018 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now