Finally... (after several days of study) I have discovered how to embed iframes into an html5 document and to avoid the validation errors, the scroll bar which inevitably presents itself, the issue with the deprecated "scrolling=no" and "marginwidth="0" and "marginheight=0" syntax.
Part One: Turning off the Scrolling Bar
First, I read a page on the web, (this page) which explained to prevent scrolling.. EDIT the file or (plural) FILE(S) which are embedded and load inside the frame, to turn off scrolling. It is futile to edit the main page itself. You do this:
That syntax "overflow: hidden" is necessary to place in each html file which will be embedded and loaded inside an iframe.
<style type="text/css">html {overflow:hidden} body {scrollbar-arrow-color: #ffffff; font-family: verdana; scrollbar-darkshadow-color: #000000; scrollbar-base-color: #050f2d; background-color: #00000} a {color: #535dcd; text-decoration:none}</style>
Once done, your html will not display a scroll-bar inside the iframe.
Part Two: Setting the margins for the iframe syntax to align iframes.
I have blogger to thank for the rest. When I uploaded an image earlier today, I took a second look at the syntax and thought it might work for embedding iframes too. I played with the code and re-wrote it to work to use in an html5 document. It worked, and I got my HTML5 validation scan to give the code a 100% valid rating.
Below, I have plucked a large section out of a web page I have been working on that includes FIVE iframes... each of them are coded slightly differently, for their position and different sizes. I am leaving in the end of the <tr> and <td> markers so its possible to get an idea how the iframe is positioned in correlation to the rest of the html and other iframes.
/snipped....
<tr>
<td colspan="2" style="width:500px">
<div class="separator" style="text-align: middle">
<iframe src="http://example.com/folder/example-01.html" style="margin-bottom: 0em; margin-left: 0em; margin-right: 0em; height:780px; width:520px; border:0px;"></iframe></div>
</td>
</tr></table>
</td>
<td style="vertical-align:top; width: 300px">
<div class="separator" style="text-align: center; width: 325px">
<iframe src="http://example.com/folder/example-02.html" style="margin-bottom: 0em; margin-left: 0em; margin-right: 20px; height:960px; width:260px; border:0px;"></iframe></div><hr style="float:center; padding:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<div class="separator" style="text-align: middle">
<iframe src="http://example.com/folder/example-03.html" style="margin-bottom: 0em; margin-left: 5px; margin-right: 0em; height:100px; width:310px; border:0px;"></iframe>
</div>
<hr style="float:center; margin-top:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" /><div class="separator" style="text-align: middle">
<iframe src="http://example.com/folder/example-04.html" style="margin-bottom: 0em; margin-left: 0em; margin-right: 0em; height:720px; width:300px; border:0px;"></iframe></div><div class="separator" style="text-align: middle">
<iframe src="http://example.com/folder/example-05.html" style="margin-bottom: 0em; margin-left: 0em; margin-right: 0em; height:1080px; width:300px; border:0px;"></iframe></div></td>
</tr>
</table>/snipped...
Generated by CSE HTML Validator Lite v15.06 (https://www.htmlvalidator.com/)
1. Comment: Congratulations! There were no errors or warnings. NOTE: Checking is limited compared to paid editions. Visit freehtmlvalidator.com for more information.
2. Comment: HTML5 document detected.
3. Comment: 0 errors, 0 warnings, 0 messages, 3 comments.
This is not saying you won't have to tweak your iframe with more relevant syntax, it's contents or something.. but I worked with the code where it is "good enough" that all my iframes are now working by following those two steps. I suppose I could try stripping the whole table structure back down to the bone, and double-checking the measurements (i.e., the pixels mathematically adding up perfectly) then re-writing the site all over again, which I'm not doing due to time constraints, but on Firefox and Chrome, and my 4.4.2 Kitkit Android, the frames work, and there's no scrolling bars. Good luck!
Days Earlier...
First I'll uptrack on to the solution I found for alignment of iframes during my attempt at achieving a perfect HTML5 document that passes the validator.
I could not get my iframes to align properly, at all. Needless to add (if reading over the other problems which HTML5 pointed up in my coding which I had to correct), but the HTML5 syntax doesn't allow the same methods (i.e., <center>coding</center> as in times past.
My frame was not perfectly aligned center or would not align to the left more to make it even out as it was supposed to do. I was not taking into consideration the PIXEL WIDTH of the <td> or other frames in that <td> cell.
<td style="width:300px">
The cell was marked to accomodate frames no bigger than "width:300px". My frame was "width:260px". Therefore, it was getting thrown off, and aligning far to the right. I tried several attempts at re-coding that did not work to align it evenly. It was aligned far to the right.
After some web surfing, reading, taking notes and experimenting, this code seems to work for my problem.
NOTE: I just mentioned how the <td> cell and other frames in it were "width:300px" but this odd frame out was only 260px... which is 40 pixels short of the measurement. Therefore, I am compensating with the margins. See below:
<td style="vertical-align:top; width: 300px">
<div style="float: middle; width:300px; height:960px; background: #000000; font-size: 11px; border: 0px #000818 solid; overflow:hidden">
<iframe src="http://example.com/folder/testing260pixelwidthiframe.html" marginheight="0" marginwidth="0" scrolling="no" style="height:960px; width:260px; margin-left:20px; margin-bottom:0px; margin-top:0px; margin-right:0px; overflow:hidden; padding:0px; border:0px; float:middle"></iframe>
</div><hr style="float:center; padding:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<iframe src="http://example.com/folder/300pixelwidthiframenoproblem.html" marginheight="0" marginwidth="0" scrolling="no" style="background: #000000; height: 100px; width: 300px; padding: 0; margin: 0 auto; border: 0; float: center; overflow: hidden"></iframe>
<hr style="float:center; margin-top:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" /></td>
Cell width=300 pixels minus the 260 pixels of my oddly sized iframe. That left 40 pixels falling short.. half (20) of the number on the left alignment and half (20) of that number on the right alignment should align it correctly. So I added 20 pixels to the "margin-left:20px;" syntax. All I know is, it finally solved my problem aligning an iframe with HTML5.
Here's a screenshot when I set the "margin-left:60" to 60 pixels... the frame went way off on the right. The red arrow is pointing that out. So I reduced the frame's "margin-left:60px" value to 20pixels and it aligned center in the frame.
Here's the same frame properly aligned, 20 pixels on the right margin and 20 pixels on the left margin, in a 300 pixel width <td> cell.
Earlier yesterday...
I'm upgrading my old html pages to html5 standards and could not figure out how to get the iframe to align, until resorting back to the outdated and obsolete marginheight="0" marginwidth="0" and "scrolling="no" syntax which is still supported in most browsers, thankfully ... but not recommended.
The coding is suppose to be corrected through a CSS file, which I really did not want to do, and have not yet attempted to remedy, but even when adding those elements other issues arose with HTML5 syntax and how it displays in Firefox.
Namely, I've tinkered with the coding for many hours on two of my old html pages and when I edited, and made all the <div> the same width, the margins seemingly finally fell together and displaying on Firefox as though the margins tightened up with a more seamless display.
Here are my two test pages (One) and (Two). I wanted to align them perfectly where changes between pages would reflect the same proportions but nada.
I've been at this for hours surfing the web and trying to find some example to go by (either the CSS coding example and then an example demonstrated with sample HTML) so that I might actually go about properly aligning iframes within HTML5 compliant standards... but nada.
So I've been forced to wing it the best I can, here.It seems to have finally aligned correctly, at least on Firefox within the allotted <td>'s and Chrome shows it working as well.
Here's what I've ended up with and I'm fully aware it has errors in the code according to the HTML5 compliant Validator
<td style="vertical-align:top; float: middle">
<div style="float: middle; width:300px; height:960px; background: #000000; font-size: 11px; border: 0px #000818 solid; overflow:hidden">
<iframe src="http://example.com/folder/abc3.html" marginheight="0" marginwidth="0" scrolling="no" style="height:960px; width:260px; margin-left:40px; margin-bottom:0px; margin-top:0px; margin-right:0px; overflow:hidden; padding:0px; border:0px; float:middle"></iframe>
</div><hr style="padding:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<iframe src="http://example.com/folder/abc3.html" marginheight="0" marginwidth="0" scrolling="no" style="background: #000000; height: 100px; width: 300px; padding: 0; margin: 0 auto; border: 0; float: left; overflow: hidden"></iframe>
<hr style="margin-top:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" /><div style="float: center; width:300px; height:720px; background: #000000; font-size: 11px; border: 0px #000818 solid; overflow:auto; overflow-x:hidden">
<iframe src="http://example.com/folder/abc3.html" marginheight="0" marginwidth="0" scrolling="no" style="width: 300px; height: 720px; padding: 0; margin: 0 auto; border: 0; float: left; overflow: hidden"></iframe>
</div></td>
On the overall, this: receiving a minimal number of warnings and errors whilst transitioning my old HTML pages over to HTML5 compliant syntax isn't that bad... I'm down to about four, which I understand now "why" I'm getting the errors. I'm using the free version of CSE Validator Lite. It scans the document and makes recommendations for coding that should be used under HTML5 compliant standards. Thanks to fixing numerous issues, it began detecting the document as an "HTML5 document". Not bad.
When I recently downloaded the newest version of Validator, (being accustomed to good old fashioned 2000 era HTML coding) the onslaught of "warnings" and "errors" looked pretty Greek to me, but I decided I might better brush up on my HTML5 coding skills.HTML Validation Services are also available at these links which I also used to test errors and warnings on my coding (same thing the CSE HTML Validator was telling me all in all) :
If you want to be made to feel completely awful about coding skills, just drop your web-based URL into this validator and watch as scores of coding errors flow forth in the results. Nice.
http://htmlhelp.com/tools/validator/Or, try this one who verifies if your document is valid for all practical purposes:
http://www.freeformatter.com/html-validator.htmlAnd lastly, try this validator for a thorough analysis of source code.
https://html5.validator.nu/Validator message export
Generated by CSE HTML Validator Lite v15.061. Warning in line 21 at character 2: This table doesn't appear to have the same number of columns in each of its 2 rows. Number of columns in each row (starting with the first row): 2 (line 22), 1 (line 174). Note that for the purposes of this message, a table cell with a "colspan" or "rowspan" value greater than 1 is considered to be multiple cells.
2. Error in line 154 at character 65: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.
3. Error in line 160 at character 59: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.
4. Error in line 164 at character 59: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.
5. Error in line 168 at character 65: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.
6. Comment: HTML5 document detected.
7. Comment: This document contains tables nested to 5 levels. Too many nested tables may cause significant performance problems and may reduce the ability of browsers to render and display the document properly. This message appears when there are nested tables more than 3 levels deep.
8. Comment: 4 errors, 1 warning, 0 messages, 3 comments.
UPDATE
I've been reviewing my code for possible tweaks I can make, i.e., replacing some of the "nested tables" with divs, and my errors are down to these issues ... and, the frame is now aligning correctly in both pages.
Generated by CSE HTML Validator Lite v15.06 (https://www.htmlvalidator.com/)
1. Error in line 150 at character 65: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.
2. Error in line 161 at character 59: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.
3. Error in line 165 at character 59: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.
4. Error in line 169 at character 65: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.
5. Comment: HTML5 document detected.
6. Comment: This document contains tables nested to 4 levels. Too many nested tables may cause significant performance problems and may reduce the ability of browsers to render and display the document properly. This message appears when there are nested tables more than 3 levels deep.
7. Comment: 4 errors, 0 warnings, 0 messages, 3 comments.
UPDATE
I removed all the elements contained within the HTML section by section and stripped down the coding to reveal the table structure by itself. I saw several improvements that could be made and implemented those. Now, all the table related errors are gone and the pages appear to be validated HTML5 documents.
Generated by CSE HTML Validator Lite v15.06 (https://www.htmlvalidator.com/)
1. Error in line 151 at character 65: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.
2. Error in line 164 at character 59: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.
3. Error in line 168 at character 59: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.
4. Error in line 172 at character 65: Instead of the "marginheight" attribute, use the CSS "margin" properties. More: This "iframe" tag uses one or more entirely obsolete (in HTML5) attributes which must not be used in HTML5 documents. The HTML5 obsolete attributes for "iframe" include: "align", "allowtransparency", "datafld", "datasrc", "frameborder", "hspace", "longdesc", "marginheight", "marginwidth", "scrolling", and "vspace". This message is displayed up to 5 times.
5. Comment: HTML5 document detected.
6. Comment: 4 errors, 0 warnings, 0 messages, 2 comments.
