Help, bizarre Mozilla absolute position <div> problem

Discussion in 'Javascript' started by nick, May 8, 2004.

  1. nick

    nick Guest

    In the web site http://greywolfdesign.com , there is a pop-up menu (when
    mouse over 'Portfolio' menu item), it always works well when using IE (6).

    However, when using Mozilla 1.6, the popup works well for all the pages
    except the 4 pages which can be opened by click the menu link in the
    popup. In these four pages, the popup will always be shown at the
    leftmost of its parent div (flow) instead of under the 'Portfolio' menu
    item.

    When tracing the javascript code, I found the the ....style.left and
    ....style.top cannot be set a value, and it causes the problem. However,
    for all other pages, the values can be set.

    36 function showPopup(id, menuid) {
    37 clearTimeout(mTimeout[id]);
    38 var loc = getElementPosition(menuid);
    39 var popup = document.getElementById(id);
    40 popup.style.position = "absolute";
    41 //
    42 popup.style.top = loc.top + 15;
    43 //
    44 popup.style.left = loc.left;
    45 //
    46 popup.style.display = 'block';
    47 }

    That's the statements 42, 44 don't work in the problem four pages, but
    they work for all other pages. The differents is the four pages may have
    a few dreamweaver created javascript routines....

    Or can it be a bug of Mozilla?
    nick, May 8, 2004
    #1
    1. Advertising

  2. nick wrote:
    <snip>
    > 42 popup.style.top = loc.top + 15;
    > 43 //
    > 44 popup.style.left = loc.left;
    > 45 //
    > 46 popup.style.display = 'block';
    > 47 }
    >
    > That's the statements 42, 44 don't work in the problem four
    > pages, but they work for all other pages. The differents is
    > the four pages may have a few dreamweaver created javascript
    > routines....
    >
    > Or can it be a bug of Mozilla?


    No, as usual it is a case of Mozilla doing what it is supposed to do and
    IE being tolerant of errors. The properties of the - style - object are
    assigned values that correspond with the values used in CSS, and all non
    zero CSS length values (which include top and left) as specified to
    require a type of unit; px, em, pt, %, etc. So non-zero length values
    assigned without units are meaningless in CSS terms, and CSS requires
    implementations to ignore properties and values that it does not
    understand. Mozilla is ignoring the properties as it is supposed to.

    The balance of probability is that the reason that Mozilla is not
    ignoring the assignments all of the time is that the pages where you
    have a problem are defined in such a way that the browser is put into
    "standards" mode, where Mozilla is very strict about the interpretation
    of CSS according to the published standards, and the pages that "work"
    are such that the browser goes into "quirks" mode and re-produces some
    of the erroneous behaviour exhibited by earlier versions and/or other
    browsers.

    There is a short description of handling the assigning of values for
    positioning elements cross-browser, using CSS units where appropriate,
    at:-

    <URL: http://jibbering.com/faq/faq_notes/misc.html#mtCSSUn >

    Richard.
    Richard Cornford, May 8, 2004
    #2
    1. Advertising

  3. nick

    nick Guest

    Richard Cornford wrote:

    > nick wrote:
    > <snip>
    >
    >>42 popup.style.top = loc.top + 15;
    >>43 //
    >>44 popup.style.left = loc.left;
    >>45 //
    >>46 popup.style.display = 'block';
    >>47 }
    >>
    >>That's the statements 42, 44 don't work in the problem four
    >>pages, but they work for all other pages. The differents is
    >>the four pages may have a few dreamweaver created javascript
    >>routines....
    >>
    >>Or can it be a bug of Mozilla?

    >
    >
    > No, as usual it is a case of Mozilla doing what it is supposed to do and
    > IE being tolerant of errors. The properties of the - style - object are
    > assigned values that correspond with the values used in CSS, and all non
    > zero CSS length values (which include top and left) as specified to
    > require a type of unit; px, em, pt, %, etc. So non-zero length values
    > assigned without units are meaningless in CSS terms, and CSS requires
    > implementations to ignore properties and values that it does not
    > understand. Mozilla is ignoring the properties as it is supposed to.
    >
    > The balance of probability is that the reason that Mozilla is not
    > ignoring the assignments all of the time is that the pages where you
    > have a problem are defined in such a way that the browser is put into
    > "standards" mode, where Mozilla is very strict about the interpretation
    > of CSS according to the published standards, and the pages that "work"
    > are such that the browser goes into "quirks" mode and re-produces some
    > of the erroneous behaviour exhibited by earlier versions and/or other
    > browsers.
    >
    > There is a short description of handling the assigning of values for
    > positioning elements cross-browser, using CSS units where appropriate,
    > at:-
    >
    > <URL: http://jibbering.com/faq/faq_notes/misc.html#mtCSSUn >
    >
    > Richard.
    >
    >

    Thanks very much, also, i found difference cause the working and
    non-working one is the DOCTYPE

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    This one will make javascript ignore (not assign) the value without unit.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    But this one will assume the unit is px and it works.

    I found VS.Net also use the late one... and IE just works, is the late
    one a better choice?
    nick, May 8, 2004
    #3
  4. nick

    nick Guest

    nick wrote:

    > Richard Cornford wrote:
    >
    >> nick wrote:
    >> <snip>
    >>
    >>> 42 popup.style.top = loc.top + 15;
    >>> 43 //
    >>> 44 popup.style.left = loc.left;
    >>> 45 //
    >>> 46 popup.style.display = 'block';
    >>> 47 }
    >>>
    >>> That's the statements 42, 44 don't work in the problem four
    >>> pages, but they work for all other pages. The differents is
    >>> the four pages may have a few dreamweaver created javascript
    >>> routines....
    >>>
    >>> Or can it be a bug of Mozilla?

    >>
    >>
    >>
    >> No, as usual it is a case of Mozilla doing what it is supposed to do and
    >> IE being tolerant of errors. The properties of the - style - object are
    >> assigned values that correspond with the values used in CSS, and all non
    >> zero CSS length values (which include top and left) as specified to
    >> require a type of unit; px, em, pt, %, etc. So non-zero length values
    >> assigned without units are meaningless in CSS terms, and CSS requires
    >> implementations to ignore properties and values that it does not
    >> understand. Mozilla is ignoring the properties as it is supposed to.
    >>
    >> The balance of probability is that the reason that Mozilla is not
    >> ignoring the assignments all of the time is that the pages where you
    >> have a problem are defined in such a way that the browser is put into
    >> "standards" mode, where Mozilla is very strict about the interpretation
    >> of CSS according to the published standards, and the pages that "work"
    >> are such that the browser goes into "quirks" mode and re-produces some
    >> of the erroneous behaviour exhibited by earlier versions and/or other
    >> browsers.
    >>
    >> There is a short description of handling the assigning of values for
    >> positioning elements cross-browser, using CSS units where appropriate,
    >> at:-
    >>
    >> <URL: http://jibbering.com/faq/faq_notes/misc.html#mtCSSUn >
    >>
    >> Richard.
    >>
    >>

    > Thanks very much, also, i found difference cause the working and
    > non-working one is the DOCTYPE
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    > "http://www.w3.org/TR/html4/loose.dtd">
    > This one will make javascript ignore (not assign) the value without unit.
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    > But this one will assume the unit is px and it works.
    >
    > I found VS.Net also use the late one... and IE just works, is the late
    > one a better choice?

    Also I found that using the doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD
    HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">, the
    height: 100% doesn't work in Mozilla too. So I guess <!DOCTYPE HTML
    PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> should be better..
    nick, May 8, 2004
    #4
  5. On Sat, 08 May 2004 01:02:04 -0400, nick <> wrote:

    > nick wrote:


    [snip]

    >> Thanks very much, also, i found difference cause the working and
    >> non-working one is the DOCTYPE
    >>
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    >> "http://www.w3.org/TR/html4/loose.dtd">
    >> This one will make javascript ignore (not assign) the value without
    >> unit.
    >>
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    >> But this one will assume the unit is px and it works.
    >>
    >> I found VS.Net also use the late one... and IE just works, is the late
    >> one a better choice?


    In my opinion, you shouldn't use either. Transitional mark-up shouldn't be
    used for modern pages. Move to Strict HTML and CSS (drop elements like
    FONT and CENTER, and attributes like bgcolor and align).

    Out of the two DTDs above, the former is better. Some browsers will not
    actually interpret the DTD correctly and switch into "Standards mode"
    without the URI.

    As I said above, you should really use

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    and validate your pages (see <URL:http://validator.w3.org/>).

    > Also I found that using the doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD
    > HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">, the
    > height: 100% doesn't work in Mozilla too.


    What are you trying to set to 100% height? Have you considered the fact
    that it shouldn't work according to the specifications?

    > So I guess <!DOCTYPE HTML PUBLIC
    > "-//W3C//DTD HTML 4.01 Transitional//EN"> should be better..


    I'd say it means your code is still broken.

    Mike

    --
    Michael Winter
    d (replace ".invalid" with ".uk" to reply)
    Michael Winter, May 8, 2004
    #5
  6. nick <> writes:

    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    > "http://www.w3.org/TR/html4/loose.dtd">
    > This one will make javascript ignore (not assign) the value without unit.
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    > But this one will assume the unit is px and it works.
    >
    > I found VS.Net also use the late one... and IE just works, is the late
    > one a better choice?


    Not in my opinion. The first one triggers standards mode, the second
    quirks/compatability mode. Quirks mode is made for compatability with
    old, badly written pages, and it implements many of the flaws of IE
    version 4. That means that old pages written for IE 4 will show as the
    author intended. You should *not* make new, badly written pages. New
    pages should be written according to the appropriate standards, and
    should be displayed in standards mode. That will make them much more
    forwards compatible than writing for a seven year old browser's
    flaws and quirks.

    In this case, add the "px" unit to your lenghts and be standards compliant:
    popup.style.top = (loc.top + 15) + "px";
    popup.style.left = loc.left + "px";

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, May 8, 2004
    #6
  7. nick

    nick Guest

    Michael Winter wrote:

    > On Sat, 08 May 2004 01:02:04 -0400, nick <> wrote:
    >
    >> nick wrote:

    >
    >
    > [snip]
    >
    >>> Thanks very much, also, i found difference cause the working and
    >>> non-working one is the DOCTYPE
    >>>
    >>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    >>> "http://www.w3.org/TR/html4/loose.dtd">
    >>> This one will make javascript ignore (not assign) the value without
    >>> unit.
    >>>
    >>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    >>> But this one will assume the unit is px and it works.
    >>>
    >>> I found VS.Net also use the late one... and IE just works, is the
    >>> late one a better choice?

    >
    >
    > In my opinion, you shouldn't use either. Transitional mark-up shouldn't
    > be used for modern pages. Move to Strict HTML and CSS (drop elements
    > like FONT and CENTER, and attributes like bgcolor and align).
    >
    > Out of the two DTDs above, the former is better. Some browsers will not
    > actually interpret the DTD correctly and switch into "Standards mode"
    > without the URI.
    >
    > As I said above, you should really use
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >
    > and validate your pages (see <URL:http://validator.w3.org/>).
    >
    >> Also I found that using the doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD
    >> HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">,
    >> the height: 100% doesn't work in Mozilla too.

    >
    >
    > What are you trying to set to 100% height? Have you considered the fact
    > that it shouldn't work according to the specifications?
    >

    I want to create a white box in the grey background, and the white box
    will be 100% of the browser window (there will be a little bit margin)
    when resize. Is it a bad requirement?

    >> So I guess <!DOCTYPE HTML PUBLIC
    >> "-//W3C//DTD HTML 4.01 Transitional//EN"> should be better..

    >
    >
    > I'd say it means your code is still broken.
    >
    > Mike
    >
    nick, May 8, 2004
    #7
  8. nick <> writes:

    > I want to create a white box in the grey background, and the white box
    > will be 100% of the browser window (there will be a little bit margin)
    > when resize. Is it a bad requirement?


    The web is not paper. Why do you wan't to stop the document at the bottom
    of the viewport, and not allow it to overflow? What happens if the content
    can't fit in the space available?

    Anyway, it's doable. You just have to avoid the collapsing of margins:
    ---
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style type="text/css">
    body,html {
    height:100%; padding-top:0px;
    padding-bottom:0px;
    }
    html {
    margin-top: -1px;
    margin-bottom: -1px;
    }
    body {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin-top:0px;
    margin-bottom:0px
    }

    .bottom { position:absolute; bottom:0px; }

    </style>
    </head>
    <body>
    <div class="bottom" style="border:4px solid green; background:#c0ffc0;
    left:0px; right:0px; text-align:center;">
    Hello World
    </div>
    <h1>Test</h1>
    </body>
    </html>
    ---

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, May 8, 2004
    #8
  9. nick

    nick Guest

    Lasse Reichstein Nielsen wrote:

    > nick <> writes:
    >
    >
    >>I want to create a white box in the grey background, and the white box
    >>will be 100% of the browser window (there will be a little bit margin)
    >>when resize. Is it a bad requirement?

    >
    >
    > The web is not paper. Why do you wan't to stop the document at the bottom
    > of the viewport, and not allow it to overflow? What happens if the content
    > can't fit in the space available?
    >
    > Anyway, it's doable. You just have to avoid the collapsing of margins:
    > ---
    > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    > "http://www.w3.org/TR/html4/loose.dtd">
    > <html>
    > <head>
    > <style type="text/css">
    > body,html {
    > height:100%; padding-top:0px;
    > padding-bottom:0px;
    > }
    > html {
    > margin-top: -1px;
    > margin-bottom: -1px;
    > }
    > body {
    > border-top: 1px solid black;
    > border-bottom: 1px solid black;
    > margin-top:0px;
    > margin-bottom:0px
    > }
    >
    > .bottom { position:absolute; bottom:0px; }
    >
    > </style>
    > </head>
    > <body>
    > <div class="bottom" style="border:4px solid green; background:#c0ffc0;
    > left:0px; right:0px; text-align:center;">
    > Hello World
    > </div>
    > <h1>Test</h1>
    > </body>
    > </html>
    > ---
    >
    > /L

    Thanks, in fact, i want a <div> with a minimum 100% height and it can
    grow. I want to this because the content of each page is different and
    I want to make it a uniform min 100% height (minimum).
    nick, May 9, 2004
    #9
    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. Luqman
    Replies:
    1
    Views:
    654
    Luqman
    Feb 7, 2006
  2. david graham

    IE5.5 and absolute position of a div

    david graham, Sep 11, 2003, in forum: HTML
    Replies:
    11
    Views:
    904
  3. Tamlyn Rhodes
    Replies:
    3
    Views:
    969
    Andy Dingley
    Feb 26, 2004
  4. Luigi Donatello Asero

    <div class="position"> and <div class" section">

    Luigi Donatello Asero, May 6, 2006, in forum: HTML
    Replies:
    31
    Views:
    1,194
    Toby Inkster
    May 7, 2006
  5. David Smithz
    Replies:
    5
    Views:
    679
    Jonathan N. Little
    May 22, 2006
Loading...

Share This Page