************************
Updates.
My conclusion from this discussion is that a single <table> can be used to maintain min-width in IE without problems. Although for Markup Validation it is better to use a "correct" table including a single <td> and <tr> and not a "table shell." Currently I use SSI includes for navigation margins and copyright footer. Thus a single, one-cell <table> can easily be added to all pages and also removed at any time.
I also found 3 alternatives:
--IE Expressions for min-width. (A bit experimental.)
--CSS Play.com all-CSS solution for min-width in IE. (A bit complicated.)
--Jello Mold Piefecta with JavaScript. (A bit limited to a specific design.)
************************

Encouraged by comments here and elsewhere, I am attempting table-free CSS designs for my sites.

I have successfully made some basic templates. However, one thing I don't like: IE6 does not recognize "min-width" CSS. So without a table, the text and margins all crush down to nothing if a browser window is put at half-width.

The goal is a "liquid layout" that allows the text area to expand to any browser width. But also that does not reduce to 0 as the browser is made narrow.

Therefore, I have set up a template successfully that imitates "min-width" in IE6, by surrounding the main text with a table shell. Then a string of &nbsp's is used at the bottom of the page, to keep the table open to a certain "minimum width."

Click here to see my 99% table-free CSS template.

Without a table this doesn't work. But with a table, the invisible table will protect the inner text from being broken.

So far as I know, the problems with tables are:

--May affect visibility of search engines, especially using XML technology.(?)
--Makes it difficult for "accessibility" for blind persons using aural readers.(?)
--Slightly reduces downloading speed.
--Other practical reasons tables are getting obsolete? I don't know. Any comments welcome.

The Question:

Will this "table shell" have the same adverse effects as using tables for layout? And if so, what exactly are those adverse effects? Any opinions and comments welcome. Thank you.

why dont u depend on the width property of css? i think that pretty much holds elements open if anything happens, like resizing windows and stuff. you can set it like:

width: 10px;
overflow: visible.

that sets something like the min-width property. i think you can also do that with the height.

I thought that if you correctly set an XHTML dcotype and get IE to render in Standards-mode that it would correctly interpret min-width? If not, just use width: 760px; it's worked for lots of other sites, so I don't see why yours would be any different.

Thank you for the suggestions, fellas.

However, "width" is definitely not "min-width" according to w3.org, nor in my IE6 browser. "Width" sets a fixed width. I.e., if I set width:600px then that division will stay at 600px--no smaller and no wider. (I just tried it with "overflow:visible" added, and that is no different.)

The goal is a "liquid layout" that allows the text to expand to any browser width. But also that does not reduce to 0 as the browser is made narrow.

Try reducing your browser window while viewing my "hybrid" template with min-width. The text narrows slightly--then stops getting narrow. Widen again--the text widens. (This does not happen with "width:760px".) Then try the same thing with my pure CSS "liquid" template. The text is fine, so long as the browser is wide. But narrow the browser--the text falls apart. (Templates are identical except for my "hybrid" min-width solution.)

Also, I did a Google search for "internet explorer min-width."

Firstly: numerous websites contain the notice that IE "unfortunately" does not recognize min-width. A few sites "claim" to have a simple answer. I have tried them and they do not work.

Secondly: at the top of the search results is this article:

How to Use CSS to Solve min-width Problems in Internet Explorer. This article is by a world-class expert who has spent great trouble to imitate "min-width" in IE. If there were a simple solution, this man would know, and would not have bothered.
Like I say, I am skeptical that there is a simple IE min-width solution with no <table>. However, I would try this if you could tell me how? Sorry I don't even know what is an "XHTML doctype"?

xhtml doctype is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

this doctype should be put at the top of every html page, and you should follow the rules of w3c then. ie will work in wat it calls "standards-compliant" mode and some javascript functions can be different as well.

Thank you Hyperair.

I tested the "standards-compliant" doctype. It does not activate min-width in IE6. Problem not solved.

However, I am glad to learn about this doctype.

I notice that my "font-size:small" command is changed from size 3 to size 2 in "standard" mode. So if browsers start using "standard" mode, I am in trouble...? And I do not want to place this code at the top of my pages because I presume (?) this forces a download from w3.org every time there is a visit to the page...?

How does a table solve any of this?

If you want a quick, cheap hack to fix it do soemthing like this:

Wala, a fluid 80% design with a min-width of 700.

Nice one Kyle !

Lateral thinking... I like that

Sean

Hmmmm... either I am missing something, or I failed to explain...

Here for demonstration, you will find my "table shell" right
next to a <div> with a GIF, just as suggested by Brak: The Internet Explorer (IE) min-width problem & "table shell" solution.

To clarify: My "table shell" design is IDENTICAL to what Brak has suggested. EXCEPT...

Brak suggests: <div><blank gif></div>
I am using: <table><blank gif></table>

And:
1. Instead of a blank gif, I use an &nbsp; string--which is just the same.
2. The <table> works. The <div> does not work.

Here is what happens:

<div> OR <table>
|......blank gif................>|
text text text text text text text text|
text text text text text text text text|</div> OR </table>
|......browser width..................>|


<div>
|......blank gif................>|
text text text text text.........|
text text text text text.........|
text text text text text.........|</div>
|...browser width.....>|



<TABLE>
|......blank gif.................>|
text text text text text text text|
text text text text text text text|</TABLE>
|...browser width.....>|

Erm... except that <table>content</table> is not valid markup.

Sean

...Well Sean, thank you I was not sure about that.

But don't most bug fixes depend on something "invalid"? Well alright, the lack of min-width is not technically a bug... So if you want valid markup you can add <tr><td>. That however would return us to the "semantically invalid markup" of a "data cell" for page layout.

Well after all, I eat on a kitchen table... So without a "data cell," a web page can semantically be a "table"...for whatever that's worth... And Stu Nicholls of CSSplay.com has assured me that technically, the table shell does no harm and it works.

Just to be safe, I hope to fit both ends of the table shell into existing SSI includes, being used for the links margins or logos. Then if it stops working--or if Microsoft wakes up and brings IE into the 21st century--the outmoded table shell can instantly be removed from every page of my site. Such is the added benefit of its utter simplicity.

I would be utterly amazed if it was passed by the W3C checkers... CSS "hacks" are entirely different than coding entirely incorrect markup...

A little less of the sarcasm, please... we're meant to be all working together.

Sean

Sorry Sean...but I was not being sarcastic...Indeed I have proof of my ignorance. My second post in this thread:
How to use CSS to keep <form> image inline with text? (display: inline not working)

...there I am asking whether or not there is something terribly wrong with a <table> with no <td>. I saw your message as an answer. And so I thanked you for it. But in fact, I still have scant idea of the exact implications of "incorrect markup"...? (Nor do I know what it means to "be passed by w3 checkers"...? Is that something important?)

Anyway, I respect your interpretation of my post. In view of which, I am thankful for your own high level of civility.

Krystof, I think you're arguing the wrong point. It's not that a table cell without td is bad (which it is) but rather that it doesn't solve your initial problem to begin with. No matter how many tables you throw in there, you're not going to get a fluid, min-width design.

It's like trying to ask whether a Hemmingway novel is better than a Asmimov novel at gutting a fish.

The W3C is the organization that creates and defines web-based standards, including HTML, and CSS. Using the doctype alerts the page that it is indeed referencing the syntax rules created by the W3C, however does not imply that something is downloaded from W3C every time you load a page (it does not).

If you will, "checking against w3" is a way of validating your syntax and making sure you are following the rules set forth. The doctype declaration points to a file that has the rules for the markup in it - and is only downloaded when you are trying to validate a page.

No problem, Krystof. It's probably a language thing... your "kitchen table" comment came across a little arrogant... but that's fine. Thanks for the clarification.

On your other thread that you mention: do you really need one form per item? Can you not have a single form and pass parameters to it; and that form needn't be in your table at all? But that's the other thread - think about it.

Let me just try this fluid min-width thing to get my head around it a moment...

Sean

I've given this some thought and I think your issue really is that you're trying to simulate the behaviour of tables without using tables...

You're floating your right hand bar right, hence it is always going to move whatever you do - anchored to the right hand of the visible window...

Have you thought of using Javascript, perhaps, to resize your central content element dynamically depending on the size of the visible window? That would seem an avenue worth exploring...

Failing that, there's an alternative CSS solution here
http://www.webreference.com/programming/min-width/
which looks pretty good to me and doesn't rely on IE Quirks mode.

Sean

Yes this sums it up. And I have decided just to use one proper table or none at all. Thank you again, Kyle and Sean. I am learning some major things about proper code. Some updates:

--A Jello Mold Piefecta method uses a brief JavaScript for both min-width and max-width. However, the CSS is rather exacting for beginners, and I doubt it allows much freedom of layout. The inventor John replied to my email. He suggests a demo with all CSS in the <head> and then to join the CSS-discuss.org email list re "Using table for min-width in IE?"

--I stumbled on an article that explains thoroughly about HTML vs. XHTML doctypes and the INCREASING value of proper code and syntax validation.
Recommended for most:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
And for those who really know XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Also essential: Markup Validation and CSS Validation.

--Stephen Poley of Web Matters also recommends to move away from "small/medium/large" font sizes, in favor of percent (%). However the <body> font size percentage (%) must be specified and I need to experiment with results for IE6 "text view" toggling. (Poley argues for 100%-for-the-body. I find this convincing as I am instintively wary of broad tinkering.)

However, all of these people also report that ONE table for a page "probably" does not interfere significantly with accessibility or a modern layout. Therefore, probably it is just as well to add <tr> and <td>. Thus avoid the "incorrect markup" question.

PS. About the "display:inline" forms-image bug. Each form must be individual because each represents a "BUY NOW" PayPal button that needs to go next to a product description. However, I simply put any "display:inline" form button always at the very beginning of a line of text. Then the bug disappears.

PPS. The Webreference article that Sean just listed is the same one that I first listed, by Stu Nichols of CSS Play. Also, according to "John" who invented the "Jelly Mold" JavaScript solution--the Nichols all-CSS solution does depend on "quirks" mode. (?)

And so my two specialists--John and Stu--do not agree but when do they ever...heh. Well all I know is that both solutions are a bit complicated for me. Rule of thumb: better not to use anything that you can not fix yourself...

hey by the way, did you check out your 99% css page in firefox? it looks a little messed up.

(Thank you Rasberry. I will check that out.)
Another min-width solution using "expressions":
Sources:
--Zcorpan in Accessibility Forum discussion.
--Zcorpan's demonstration.
--Detailed Explanation.

Code:

<head>
<style type="text/css">
   div {max-width:40em; min-width:20em; }
  </style>
  <!--[if lte IE 6]>
   <style type="text/css">
    div {
    width:expression(
     (d = document.compatMode == "CSS1Compat" ? document.documentElement : document.body) &&
     (d.clientWidth > 55 * parseInt(d.currentStyle.fontSize) ? "40em" :
      d.clientWidth < 28.3 * parseInt(d.currentStyle.fontSize) ? "20em" : "auto"));
    }
   </style> 
  <![endif]-->
</head>

However, as my window widens in Zcorpan's min-max-width.htm......the max-width does not kick in right away......then suddenly everything snaps back to the "max." So I removed the max-width section.

After experimenting this is the result:
--Changing the "20em" does not seem to do anything in my IE6.
--However if I change the "28.3," that changes the min-width.
--So I just put both numbers the same. Example for 40em minimum:

(d.clientWidth < 40 * parseInt(d.currentStyle.fontSize) ? "40em" : "auto")

This works! In my IE6 anyway. And looks nice and simple! However:

--Uneasy to use something I don't understand.
--I was just convinced to set my "body" text-size:100% to enable appropriate text-size toggling in IE6 with % text sizing. Otherwise the text zooms from miniscule to huge. However the comments in Zcorpan's min-max-width.htm source say: "Note also that you can't specify font-size for html or body."
--After substantial forum discussions, I have decided that a single table with a single table cell is not a problem.

I.e.--Zcorpan's min-width solution is very interesting. However I just doubt that I can take the time to adopt it right now.