Coffeehouse Thread

19 posts

Forum Read Only

This forum has been made read only by the site admins. No new threads or comments can be added.

IE and Tables....again, and again

Back to Forum: Coffeehouse
  • User profile image
    jsampsonPC

    Alright,

    I set out to make a simple page with a couple tables here and there...and I kept it REAL simple Smiley Unfortunately, my 70 or so lines of HTML, although very simple in nature, won't render properly in IE - here is the page: http://www.ChristianDudesOnline.org/crazypage/panels.htm
    and a fluid layout too
    http://www.ChristianDudesOnline.org/crazypage/panels_grow.htm
    Does anybody have any idea why this is breaking in IE, but not in FF?

    Jonathan

  • User profile image
    W3bbo

    jsampsonPC wrote:
    Alright,

    I set out to make a simple page with a couple tables here and there...and I kept it REAL simple Unfortunately, my 70 or so lines of HTML, although very simple in nature, won't render properly in IE - here is the page: http://www.ChristianDudesOnline.org/crazypage/panels.htm
    and a fluid layout too
    http://www.ChristianDudesOnline.org/crazypage/panels_grow.htm
    Does anybody have any idea why this is breaking in IE, but not in FF?

    Jonathan


    You're using percentage values for heights, this doesn't work in CSS since it has a different visual formatting model compared to tables. IE doesn't comply with spec in this regard.

  • User profile image
    jsampsonPC

    w3bbo, I removed the doctype, and now it works in both browsers - only problem is, it's not necessarily the best practice to have a page with no doctype, from my understanding...

  • User profile image
    W3bbo

    jsampsonPC wrote:
    w3bbo, I removed the doctype, and now it works in both browsers - only problem is, it's not necessarily the best practice to have a page with no doctype, from my understanding...


    You're not meant to define heights using percentage values, that's your problem.

  • User profile image
    jsampsonPC

    W3bbo wrote:
    
    jsampsonPC wrote:w3bbo, I removed the doctype, and now it works in both browsers - only problem is, it's not necessarily the best practice to have a page with no doctype, from my understanding...


    You're not meant to define heights using percentage values, that's your problem.


    Well how else can a designer specify that he wants a table/image/etc to take up 100% of it's parent space? Smiley Is this a problem with me not being compliant to the way this is suppose to be done, or with IE not being compliant to the way this is suppose to be interpreted?

  • User profile image
    jsampsonPC

    thumbtacks,

    I'm using CSS in the <table> tags too...

    From Source:

    ...
    <table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="0">
    ...

    thumbtacks wrote:

    Edit: In your first link, you don't have any style sheet declared (at least I didn't see any reference to one).


    No, no styles from a sheet - none needed. I am declaring values directly into the tags...

  • User profile image
    jsampsonPC

    thumbtacks wrote:
    Remove the following lines ir red:

    <!-- TOP OF: LightBrown Master TD -->
      <!-- Change the WIDTH of the Style below to fix the width -->
      <td style="height: 100%;">

    ...

    </td>
      <!-- BOTTOM OF: LightBrown Master TD -->
      <!-- Change the WIDTH of the Style below to fix the width -->


    Remove the <TD> tags from my html? I don't think that sounds too safe Smiley Or do you mean remove the css only?

  • User profile image
    Rotem Kirshenbaum

    What exactly are you trying to achieve in this page ? It seems like you have too many tables Tongue Out

    Rotem

  • User profile image
    jsampsonPC

    Rotem Kirshenbaum wrote:
    

    What exactly are you trying to achieve in this page ? It seems like you have too many tables

    Rotem



    View the page in FF, and you'll see what I'm trying to accomplish Smiley IE is the only hurdle needing to be crossed.

  • User profile image
    Rotem Kirshenbaum

    OK, I'll rephrase that... What is this page going to do ?
    What is it's purpose ? Is it going to be dynamic ? Static ?
    What are the requirements for this page ?

    Anyway, it looks like you have too many tables, td's and div's.
    You should try to rewrite this thing from scratch, without CSS to see what's the behavior of the tables in IE & FF.

    IMHO, you have too many CSS attributes to be able to maintain this page. That's a lot of mess. I fear that many of them are redundant.

    It would help to know how you're going to generate this page and it's content to help you further.

    Rotem

  • User profile image
    Rotem Kirshenbaum

    BTW, all those styles youre using on the table elements don't really work because your table layout is not fixed:

    <table style="table-layout:fixed"...>

    Rotem

  • User profile image
    jsampsonPC

    Just to make things more confusing: This IE version actually works...

    www.ChristianDudesOnline.org/crazypage/boxesTemplate.html

    Drag the edges of your IE/FF window to see my intended effect.

    And no changes were made to the height="100%" stuff - I am absolutely confused...

    It breaks only when I toss a DOCTYPE in there.

  • User profile image
    Jason Cox

    Problems with tables in IE? Hmm, normally for me it's the other way around even if it's valid HTML/XHTML.

  • User profile image
    jsampsonPC

    Rotem Kirshenbaum wrote:
    

    BTW, all those styles youre using on the table elements don't really work because your table layout is not fixed:

    <table style="table-layout:fixed"...>

    Rotem



    Well, they are working - check my previous post for a link to a functional copy - or do you mean, they won't work in the presence of a DOCTYPE?

  • User profile image
    Rotem Kirshenbaum

    They're irrelevant since without fixed layout the table will adjust it's size to it's content size (at least in IE, AFAIK). Setting width and height to a td without fixed layout is meaningless.

    Rotem

  • User profile image
    jsampsonPC

    Rotem Kirshenbaum wrote:
    They're irrelevant since without fixed layout the table will adjust it's size to it's content size (at least in IE, AFAIK). Setting width and height to a td without fixed layout is meaningless.

    Rotem


    I don't see why you're saying it is meaningless....it's working, I demonstrated that in one second from last post...I tried again with a fixed-layout, but that availed little...I still have the problem of the table breaking in the presence of a doctype.

    Thank you for your advice though.

  • User profile image
    Rotem Kirshenbaum

    It worked because you're setting width and height to both the content and the container. My advice to you is to remove all the CSS from the page and add it only where it's required.

    Good luck !

    Rotem

  • User profile image
    Sven Groot

    Note: in the following I'm talking about the CSS spec. This may or may not be what any browser does, but it's what's in the spec. Browsers are more likely to behave this way in strict mode, so you must have a DOCTYPE on the page for any of this to apply.

    jsampsonPC wrote:
    Well how else can a designer specify that he wants a table/image/etc to take up 100% of it's parent space?

    W3bbo is partially right. You can specify that an element has a relative height, but you can only do that if its parent has a fixed height. So this will work:
    <div style="height:500px">
       <div style="height:100%">
       </div>
    </div>

    The inner div will be 500px as well in this case. However, this does not work:
    <div>
       <div style="height:100%">
       </div>
    </div>

    It doesn't work because the height of the outer div isn't known in advance. For a box with height:auto (which is the default if you don't specify anything), its height depends on the contents. So if you use a relative height, it's height depends on the parent whose height depends on its child. That's infinite recursion, so you can never determine the height.

    You can nest percentage values no problem, but somewhere at the beginning there must be a known height.

    What you want is a special case though. You want the height to follow the height of the browser window (the viewport). Let's apply the rules I gave above. If you put a <table style="height:100%"> directly underneath body, it means body must have a specified height. So you give body height:100% too. Which means html needs a specified height. So give that height:100% too. The parent of html is the viewport, and its size is known, so this works, in all browsers.

    There are a few caveats to this approach. One is that due to the way height is calculated, any element with a margin, padding or border will end up actually higher than 100%. Second, if the content of the page is larger than what fits on the screen, your height:100% box won't grow to accomodate it (it will in IE6, but IE6 is wrong; it won't grow in IE7, Opera and Firefox).

    You can get around the second problem by using min-height in the right places instead of height. But, IE6 doesn't understand min-height (IE7 does). So if you go for that approach, you have to serve a seperate stylesheet to IE6 and lower only (for instance using conditional comments) that specifies height:100% and use min-height:100% for all other browsers. There is no good way to get around the first problem, other than picking a percentage slightly less than 100% and hoping for the best. CSS3 will have a way to solve this, but support for that is a long way off.

    If you start serving your pages as application/xhtml+xml to browsers that support it, it becomes even more complicated, because the rules for computing height on html and body change. But I won't get into that now. Smiley

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.