Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 19
  1. #1
    Senior Member krystof's Avatar
    Join Date
    Jul 2005
    Posts
    155
    Member #
    10668
    Liked
    6 times
    ************************
    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.

  2.  

  3. #2
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    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.
    Hyperair

  4. #3
    Senior Member Fallout's Avatar
    Join Date
    Aug 2003
    Location
    Richmond, Virginia
    Posts
    543
    Member #
    2748
    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.

  5. #4
    Senior Member krystof's Avatar
    Join Date
    Jul 2005
    Posts
    155
    Member #
    10668
    Liked
    6 times
    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.
    Quote Originally Posted by Fallout
    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?
    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"?

  6. #5
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    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.
    Hyperair

  7. #6
    Senior Member krystof's Avatar
    Join Date
    Jul 2005
    Posts
    155
    Member #
    10668
    Liked
    6 times
    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...?

  8. #7
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    How does a table solve any of this?

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

    Code:
    <style>
    .wrapper{ width:80%; }
    </style>
    
    <div class="wrapper">
    <img src="/images/blank.gif" width="700" height="1" />
    </div>
    Wala, a fluid 80% design with a min-width of 700.
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  9. #8
    Senior Member seanmiller's Avatar
    Join Date
    Sep 2003
    Location
    Glastonbury, UK
    Posts
    868
    Member #
    3263
    Liked
    1 times
    Nice one Kyle !

    Lateral thinking... I like that :-)

    Sean

  10. #9
    Senior Member krystof's Avatar
    Join Date
    Jul 2005
    Posts
    155
    Member #
    10668
    Liked
    6 times
    Quote Originally Posted by Brak
    How does a table solve any of this?
    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.....>|

  11. #10
    Senior Member seanmiller's Avatar
    Join Date
    Sep 2003
    Location
    Glastonbury, UK
    Posts
    868
    Member #
    3263
    Liked
    1 times
    Erm... except that <table>content</table> is not valid markup.

    Sean


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:29 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com