Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Daniel Fleetwood
Daniel Fleetwood
3,840 Points

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/1MZ3NvrSIsEY6GB_5GRnTuCuH6cwiz-l0dBTOOmrFgsg/edit?usp=sharing

Thanks in advance if you can help, this screenshot was taken in IE9, the browser i need to use really.

-Dan

Daniel Fleetwood
Daniel Fleetwood
3,840 Points

Broken HTML:

<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:

<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>

1 Answer

jeremywhiteford3
jeremywhiteford3
13,297 Points
jeremywhiteford3
jeremywhiteford3
13,297 Points

Why would you want to limit yourself to IE only?! More and more people are abandoning that horrible browser and it's not made for the majority of mobile devices (Android & Apple).

If you could link to pages instead of to an image it would be helpful to figure out.

Sorry but that html isn't good. If you're forced to used tables that's fine but all the markup (nowrap, height, width, font, center, etc) should be in css not inline. It's possible it's one of those attributes that's screwing your layout up.