PDA

View Full Version : iframe and CSS


Drakius
Jul 21st, 2010, 03:06 PM
I've got a little problem with my iframe, more precisely, frameborder. As you can see, my HTML is nearly fully validated, except for that pesky frameborder issue.


<!doctype html>
<head>
<link rel="stylesheet" type="text/css" href="../styles/default.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Supplier Training</title>
<script src="../includes/Common/common.js" type="text/javascript"></script>
</head>

<body>

<div ID="maincontainer">


<div ID="leftheader">
<img src="../Images/Common/header-left.jpg" alt="" width="34" height="115" /> <br />
</div>

<div id="mainbackground">
<div id="leftcolumn">
<img src="../Images/EN/logo_en.gif" alt="CN Logo" />
<hr class="linestyle" />
<ul class="leftcontent">
<li class="nobullet"><a href="index.asp" class="list"><span class="style1">Supplier Training</span><img src="../Images/Common/nav_arrow.gif" id="arrowselected" /></a></li>
</ul>
<hr class="linestyle" />
</div>


<div ID="rightheader">

<img src="../Images/Common/top-logo-shadowtest.jpg" id="shadow" /><div id="topnav">
<a href="http://www.cn.ca/en/contacts.htm">Contacts</a><a href="http://www.cn.ca/en/about-cn.htm">About CN</a><a href="http://www.cn.ca/en/sitemap.htm">Site Map</a><a href="../FR/index.asp" class="bluelink">Français</a></div>
<img src="../images/EN/DTL_Banner_EN.gif" alt="header" /></div>
<br />
<div id="maincolumn4">
<iframe src="../../../TMS3.5StudentSites/DTL/DTLLogin.aspx?BodyOnly=1&amp;languageCode=EN" id="myiframe" onload="resizeIframeToFitContent(this)" frameborder="0"></iframe>
</div>

<div id="maincolumn3">
<div id="contact">
<p id="contactinner">Contact Us</p>
</div>
<div id="questions">
<p>Richard Masterton<br />514-697-9888<br /><a href="mailto:[email protected]" class="bluelink3">[email protected]</a></p>
<hr id="linestyle1" />
</div>
</div>
</div>

<div id="bottomnav2">
<div id="footernav">
<ul>
<li><a href="#" class="list2">Terms &amp; Conditions</a></li>
<li><a href="#" class="list2">Privacy</a></li>
<li><a href="#" class="list2">About CN</a></li>
<li><a href="#" class="list2">RSS</a></li>
</ul>
</div>
<div id="copyright"><p>© 2010, Canadian National Railway Company</p></div>
</div>
</div>

</body>
</html>


It tells me it's obsolete in HTML5 and to use CSS. Alright that's fine, but it doesn't work. The only attribute that's valid for borders in css is 'border' and that does not work no matter how I put it, 0px, none, etc... nothing makes the 3D border disappear. Am I missing something here?
_Aerospace_Eng_
Jul 21st, 2010, 03:18 PM
No you aren't missing anything. Yes its right. frameborder was thrown out in strict doctypes including html5. The question I have for you is why the need for an iframe? Is it because you don't want to have to edit every page if you make one change? If that is the case then there are better alternatives like using php includes.
Drakius
Jul 21st, 2010, 03:31 PM
Well no, I don't really want to use it so to not change anything from page to page. I'm just using it to drop an external page in. If there's an other way to do it, I'm open to suggestion. I just thought it was the simplest way, it would be too, if it weren't for that frameborder issue.
_Aerospace_Eng_
Jul 21st, 2010, 03:48 PM
Okay so the page you are trying to put there is on the same server I'm assuming? Will the iframe ever load pages that are from other sites? If not then you may be able to use a server side include in place of the iframe like so...


<!-- #include virtual="../../../TMS3.5StudentSites/DTL/DTLLogin.aspx?BodyOnly=1&amp;languageCode=EN" -->
But your page my need to be changed to an aspx page. If you still want go the iframe way you either ignore the fact that frameborder is invalid because its the only way to get rid of it in IE. The CSS border:0; on an iframe does work in other browsers. I just tested it in Firefox and it worked.

You could also use javascript to set the border for IE. Keep the CSS border:0; for the iframe as it does work like I mentioned and add this within the head tags of your page.

<script type="text/javascript">
window.onload = function()
{
document.getElementById('myiframe').setAttribute('frameborder','0');
}
</script>
If you have other window.onload stuff just add this line to it

document.getElementById('myiframe').setAttribute('frameborder','0');
Drakius
Jul 21st, 2010, 03:59 PM
Thank you for the reply. I really appreciate the help.

I've tried your suggestion, but none worked. The onload javascript looked like it had potential too, too bad it didn't work. I really don't know, I'll just keep the frameborder in there for now. The website does look all broken up in IE8 without compatibility view on, but I don't think that frameborder is the issue. Even when I have it with a frame, it's broken. I'll go work on that issue now. Thanks again Aerospace.
_Aerospace_Eng_
Jul 21st, 2010, 04:02 PM
The JS I gave you will work if you have no other onloads but since you haven't given us a link to your page we can't tell.