Differences in rendering elements between Mozilla/Firefox and IE

Discussion in 'Javascript' started by Sergey Ilinsky, Jan 31, 2005.

  1. Well, while working on a rich ui with DHTML I discovered the following
    problem:
    Mozilla/Firefox seems to be wrong when rendered elements with sizes
    given in percents and that are placed into another elements with
    percentage sizes, if the content overflows them (of course, overflow is
    set to the value of "scroll")

    To check the written above please use the given below code

    <table style="" height="50%" width="100%">
    <tbody>
    <tr><td height="25%"><br /></td></tr>
    <tr><td height="50%"><div id="eContainer"
    style="width:100%;height:100%;overflow:scroll;"><br />a<br />a<br />a
    <br /> a<br />a<br />a<br />a<br />a<br />a<br /> a<br />a<br />a<br
    />a<br />a<br />a<br />a<br />a </div></td></tr>
    <tr><td height="25%"><br /></td></tr>
    </tbody>
    </table>

    You see, that DIV element got much more than 0.5*0.5=0.25 = 25% of the
    available document height. Moreover, this element doesn't offer you to
    scroll its content.
    Why? Can somebody give an explanation and a hint how to get the same
    behaviour way that IE has (IE renders a layer with 25% height)?
    Why does Mozilla/Firefox render elements proper way when the content
    doesn't overflow?
    Sergey Ilinsky, Jan 31, 2005
    #1
    1. Advertising

  2. Sergey Ilinsky

    kaeli Guest

    OT: Re: Differences in rendering elements between Mozilla/Firefox and IE

    In article <>,
    enlightened us with...
    > <table style="" height="50%" width="100%">
    > <tbody>
    > <tr><td height="25%"><br /></td></tr>
    > <tr><td height="50%"><div id="eContainer"
    > style="width:100%;height:100%;overflow:scroll;"><br />a<br />a<br />a
    > <br /> a<br />a<br />a<br />a<br />a<br />a<br /> a<br />a<br />a<br
    > />a<br />a<br />a<br />a<br />a </div></td></tr>
    > <tr><td height="25%"><br /></td></tr>
    > </tbody>
    > </table>
    >
    > You see, that DIV element got much more than 0.5*0.5=0.25 = 25% of the
    > available document height.


    It isn't supposed to get 25% of the DOCUMENT height.
    It is relative to its container - which is not the document. It's the table
    cell. You're probably looking at this in IE quirks mode, since I don't see a
    doctype. Don't expect different browsers to render the same when you don't
    give a doctype with a URL.

    Also, you might want to validate your html. I'm pretty sure there is no
    attribute "height" for table. And the height attribute of TD is deprecated.
    http://www.w3.org/TR/html401/struct/tables.html#h-11.2.1

    The above will render differently depending on the doctype. Which you didn't
    mention.

    BTW, this has nothing to do with javascript, so it's OT here. You'd get
    better answers at comp.infosystems.www.authoring.* groups.

    --
    --
    ~kaeli~
    A little rudeness and disrespect can elevate a meaningless
    interaction to a battle of wills and add drama to an
    otherwise dull day.
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
    kaeli, Jan 31, 2005
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?UnlhbiBBbmRlcnNvbg==?=

    Differences in aspx page rendering between environments

    =?Utf-8?B?UnlhbiBBbmRlcnNvbg==?=, Feb 7, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    430
    Steve C. Orr [MVP, MCSD]
    Feb 7, 2005
  2. SpaceGirl
    Replies:
    12
    Views:
    790
    SpaceGirl
    Jun 21, 2004
  3. Damaeus
    Replies:
    3
    Views:
    539
    Blinky the Shark
    Jul 22, 2004
  4. Replies:
    1
    Views:
    3,473
    Beauregard T. Shagnasty
    Dec 1, 2005
  5. Aaron Freeman
    Replies:
    1
    Views:
    1,165
    Toby Inkster
    Mar 22, 2006
Loading...

Share This Page