Jump to content

How to get an iframe with no borders ?


vmars316

Recommended Posts

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

  • 2 weeks later...

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 by vmars316
Link to comment
Share on other sites

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 by vmars316
Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...