Doctype and iframes

Forum Moderators: open

Message Too Old, No Replies

Doctype and iframes

Getting them to work together

MatthewHSE

4:57 pm on Sep 25, 2003 (gmt 0)

Hi everyone,

I have a page that must utilize an iframe. Too bad there's not a way around it, but in this particular case it's all that will do the job.

The problem is, I can't figure out how to get the iframe to show properly on the page if I include any kind of doctype. I started with strict, just not thinking about the frame. The iframe didn't show at all. So, I switched to the frameset doctype. Now the iframe shows, but it's absurdly short (like maybe 20px). That's despite the fact that the height is set to 100%, and it's in a table cell that's a good 200px tall.

So how can I get the iframe and the doctype to agree?

Thanks,

Matthew

jimbeetle

5:13 pm on Sep 25, 2003 (gmt 0)

Hey Matthew,

Guess I should really read what's on the board before posting a new topic. I have a related question on iframe height [webmasterworld.com].

Didn't think much about doctype when I was playing around but used HTML 4.01 transitional. Haven't checked it widely, works ok in IE.

Jim

MonkeeSage

5:30 pm on Sep 25, 2003 (gmt 0)

All of the XHTML DTDs I tested worked fine with this page, here is the last one I tested (only one I didn't test of the four is the framset DTD, because iframes are supposed to be inline and work with standard DTD AFAIK)...

<?xml version="1.0" encoding="ISO-8859-1"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
  
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
  <meta http-equiv="Content-Type"  
     content="text/html; charset=ISO-8859-1" /> 
  <title>Simple &lt;iframe&gt; test</title> 
  <style type="text/css"> 
  <!-- 
  table { 
   border-collapse: collapse; 
   cell-padding: 0px; 
   cell-spacing: 0px; 
  } 
  iframe { 
   frame-border: none; 
   border: none; 
   padding: none; 
   margin: none; 
  } 
  td { 
   width: 70%; 
   height: 400px; 
   border: 2px dashed gray; 
   padding: none; 
   margin: none; 
  } 
  #headwrap { 
   text-align: center; 
   padding: 10px; 
   width: 30%; 
  } 
  --> 
  </style> 
</head> 
<body> 
<table class="example" width="100%" height="100%"> 
  <tr> 
   <td id="headwrap"> 
     <h1>WW!</h1> 
   </td> 
   <td> 
     <iframe src="http://www.webmasterworld.com/" 
         width="100%" height="100%"> 
      <div> 
        You browser doesn't support or  
        hasn't enabled iframes! 
      </div> 
     </iframe> 
   </td> 
  </tr> 
</table> 
</body> 
</html>

Jordan