ansaurus

Question

Concerns - Table layout, iFrames, code deprecation

Answer 1

+1 A:

It would probably be best to move to css styles if you are concerned about deprecation. You can still use the table layout if you are more comfortable though I prefer floating divs.

Jeremy 2009-04-17 16:53:30

I have a version of this running with pure CSS. It is unfortunate that the left iFrame sometimes disappears in IE for no apparent reason.I suppose as long as:and<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">are supported, the lame table solution will do the trick.I feel lazy about not getting the CSS to work in IE. Thank you for the reply!

Fred Wilson 2009-04-17 17:47:20

You are going to get very different results if you use the first doctype (incomplete - essentially the same as no doctype) vs. the second doctype. Floats with percentages and overflow:auto or overflow: scroll should give you approximately the same results without tables.

Traingamer 2009-04-17 18:19:29

You are right.. there were some different results! :o)The original pure CSS solution worked really well until the day my client opened the page in IE7 on Vista Home Basic. The left iFrame was just not there. On every other browser, including IE7 on Vista Ultimate (and it was the same browser version too!) it worked fine. The only way to quiet the client in a pinch was to quickly revert to the lame table solution. Bleh.. and thanks for the comment!

Fred Wilson 2009-04-17 18:40:22

Answer 2

+2 A:

I don't see anything that's going to be removed from any browser in the next few (or several) years.

The table tag is a valid and needed set of tags. Without it, there's no way to display tabular data.

What happened was people started exploiting it to display very intricate layouts which ended up being impossible to maintain.

No one's going to shoot you for using tables in the fashion you're using. It's super simple, and does the job whily you're developing, so consider it simply an iteration. Iterative development is good. Once you figure out a CSS-based layout, the code here is simple enough to replace.

cloudhead 2009-04-17 19:38:33

Yeah, the lazy coder in me agrees with you. It is a very simple layout and I just think that if IE played a little more nicely with the spec, I'd just go with pure CSS. With a bit more knowledge, I might be able to isolate the bug.. it's just so random I fled back to tables. ;)

Fred Wilson 2009-04-17 23:16:47

Answer 3

A:

Deprecation means that the features will not be present in future version of (X)HTML. So far all the browsers are supporting old versions of HTML, but I wouldn't rely on that myself.

All of what you're doing and much more can be done with CSS, without using hacks. Going through the exercise will help you maintain relevant skills. The page you have right now takes two extra HTTP requests to display; whether this is a concern depends how many people are requesting the page.

Scott 2009-04-17 19:53:44

I agree that maintaining the relevant skills is very important. In this application, iFrames seem to work best due to the workflow spec'd for the app. Each side has grids that lead to forms, etc., and they need to work without refreshing the whole page. I'd put the iFrames in a DIV, but a bug in IE (and IE only) makes this a serious pain because the left iFrame will sometimes disappear for no apparent reason. Apologies if I am missing the point.

Fred Wilson 2009-04-17 23:14:20

Answer 4

+1 A:

To my knowledge, there is no danger of the tag becoming deprecated. And I have it from a very good source!

see http://stackoverflow.com/questions/755795/are-iframes-html-obsolete

Peter 2009-04-18 09:23:22

Answer 5

A:

Follow up:

The original code above does not play well at all in Safari due to the [td height="100%"] being pretty much unsupported.

So to get Safari to render, a CSS solution actually does work best. I guess Safari takes the high road and deprecates things like this - which is not inherently bad.

It does make me wonder how much I should be worrying about Safari when it seems that many websites don't support it, or at least not officially. But, that is a different discussion.

Oddly, in order to get a CSS version of the original post working, I had to resort to some Javascript in order to get the iFrames to size with the page.

Thanks for the advice and help. Additional comments are appreciated, especially if I am missing something that should be obvious.

Anyway, here is a version of the code using a CSS solution:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
    <title>Artists and Albums</title>
<link rel="stylesheet" type="text/css" href="/includes/generalStyles.css">
<style>
html,body{margin:0;padding:0;height:100%}
body{font: 76% arial,sans-serif;height:100%}

div#header h1{height:120px;line-height:80px;margin:0;
  padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#footer{background: #333;color: #FFF;height:25px}
div#footer p{margin:0;padding:5px 10px}
div#container{height:100%;}
div#wrapper{width:100%; margin-left: auto; margin-right: auto;}
div#contentLeft{float:left;width:48%;height:100%}
div#contentRight{float:right;width:48%;height:100%}}

div#footer{clear:both;width:100%}
</style>

<script type="text/javascript" src="/includes/jquery-1.2.6.min.js"></script>
</head>

<body>
<div id="container">
<div id="header">Header Goes Here with lots of jQuery stuff.</div>
<div id="wrapper">
<div id="contentLeft">
<iFrame id="frameLeft" src="artists.php" width="100%" height="100%" frameborder="0"></iframe>
</div>
<div id="contentRight">
<iFrame id="frameRight" src="albums.php" width="100%" height="100%" frameborder="0"></iframe>
</div>
</div>
<div id="footer"><p>Footer</p></div>
</div>
<script type="text/javascript">
    $(document).ready(function(){

     $(function(){   
      matchHeight();
      function matchHeight() {    
       var mainHeight = $("#container").outerHeight() - $("#header").outerHeight() - $("#footer").outerHeight();
       $('#wrapper').height(mainHeight);
      }
      $(window).resize(matchHeight);
      var f = setTimeout(matchHeight(),5000); //for Firefox.
     });
    });
</script>
</body>
</html>

Fred Wilson 2009-04-23 19:08:57

ansaurus

tags:

views:

answers:

Concerns - Table layout, iFrames, code deprecation

related questions