www.webdeveloper.com
Results 1 to 4 of 4

Thread: Webpage in iFrame has black borders but not when accessing it direct?

  1. #1
    Join Date
    Apr 2014
    Posts
    13

    Question Webpage in iFrame has black borders but not when accessing it direct?

    Hi Forum People,

    I have an odd issue i need help with, for some reason the embedded page i have in an iFrame shows some odd borders when not accessed directly, see below for an example.

    I am trying to create a call system display and wanted to add stats from a WebApp that only supports IE.

    https://docs.google.com/document/d/1...it?usp=sharing

    Thanks in advance if you can help, this screen shot was taken in IE9.

    -Dan

  2. #2
    Join Date
    Apr 2014
    Posts
    13
    Broken HTML:

    Code:
    <html>
    <head>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-16">
    <LINK rel="stylesheet" type="text/css" href="../Style/msgbox.css">
    <LINK rel="stylesheet" type="text/css" href="../Style/xsltemplate.css">
    </head>
    <BODY topmargin="0" leftmargin="0" bottommargin="0" rightmargin="0">
    <table width="1051" height="" cellspacing="0" cellpadding="0" border="0">
    <tr>
    <td valign="top">
    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="1051" height="554">
    <tr>
    <td nowrap="1" width="1051" height="277">
    <table class="stateWaiting" width="1051" height="100%" border="0">
    <tr>
    <td width="1051" height="50%" align="center"><CENTER></CENTER><font face="Arial" style="font-size: 40pt">Kayleigh Adams</font></td>
    </tr>
    <tr>
    <td width="1051" height="50%" align="center"><CENTER></CENTER><B><font face="Arial" style="font-size: 40pt">Waiting</font></B></td>
    </tr>
    </table>
    </td>
    <tr></tr>
    <td nowrap="1" width="1051" height="277">
    <table class="stateWaiting" width="1051" height="100%" border="0">
    <tr>
    <td width="1051" height="50%" align="center"><CENTER></CENTER><font face="Arial" style="font-size: 40pt">Dip Patel</font></td>
    </tr>
    <tr>
    <td width="1051" height="50%" align="center"><CENTER></CENTER><B><font face="Arial" style="font-size: 40pt">Waiting</font></B></td>
    </tr>
    </table>
    </td>
    <tr></tr>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </BODY>
    </html>
    Working HTML:

    Code:
    <html>
    <head>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-16">
    <LINK rel="stylesheet" type="text/css" href="../Style/msgbox.css">
    <LINK rel="stylesheet" type="text/css" href="../Style/xsltemplate.css">
    </head>
    <BODY topmargin="0" leftmargin="0" bottommargin="0" rightmargin="0">
    <table width="625" height="" cellspacing="0" cellpadding="0" border="0">
    <tr>
    <td valign="top">
    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="625" height="285">
    <tr>
    <td nowrap="1" width="625" height="143">
    <table class="stateWaiting" width="625" height="100%" border="0">
    <tr>
    <td width="625" height="50%" align="center"><CENTER></CENTER><font face="Arial" style="font-size: 20pt">Kayleigh Adams</font></td>
    </tr>
    <tr>
    <td width="625" height="50%" align="center"><CENTER></CENTER><B><font face="Arial" style="font-size: 20pt">Waiting</font></B></td>
    </tr>
    </table>
    </td>
    <tr></tr>
    <td nowrap="1" width="625" height="143">
    <table class="stateWaiting" width="625" height="100%" border="0">
    <tr>
    <td width="625" height="50%" align="center"><CENTER></CENTER><font face="Arial" style="font-size: 20pt">Dip Patel</font></td>
    </tr>
    <tr>
    <td width="625" height="50%" align="center"><CENTER></CENTER><B><font face="Arial" style="font-size: 20pt">Waiting</font></B></td>
    </tr>
    </table>
    </td>
    <tr></tr>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </BODY>
    </html>

  3. #3
    Join Date
    Oct 2013
    Posts
    470
    You have some improperly nested <tr> and <td> tags. I'll not take the time to find all the mistakes in 1997 code, but badly nested table stuff is the gist of it.

    Hint -- this can help: http://validator.w3.org/#validate_by_input

  4. #4
    Join Date
    May 2014
    Posts
    834
    Yeah, unless that's an HTML e-mail (in which case frames are usually blocked anyways) you've got some heavy duty 1990's code in there... with the now invalid upper-case tags, tables for layout, tables for nothing, tags like CENTER and FONT that have no business on any website written after 1997, no Doctype so even IE11 is behaving like IE5 (so called "quirks mode") while non-IE browsers adhere to standards behavior... and UTF-16 without a doctype?!? Just TRYING to make it waste bandwidth in a character encoding IE is known to choke on?

    ... and with that decade and a half out of date code, it begs the question what the devil you are even bothering trying to use CSS for.

    Even if "only supporting IE" you've got a laundry-list of how not to build a website. You might want to step back and learn HTML and CSS before proceeding any further. What you have is so content lean and such a mess I couldn't even start to say what the proper markup should be... though guessing WILDLY ...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <meta
    	name="viewport"
    	content="width=device-width; height=device-height; initial-scale=1.0"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Page Title - Site Title
    </title>
    
    </head><body>
    
    <div class="widthWrapper">
    
    	<h1>Site title</h1>
    	
    	
    	<h2>Kayleigh Adams</h2>
    	<p>Waiting</p>
    	
    	<h2>Dip Patel</h2>
    	<p>Waiting</p>
    	
    <!-- .widthWrapper --></div>
    
    </body></html>
    EVERYTHING else you were doing there belonging in the external stylesheet.
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles