Absolute positioning

Discussion in 'HTML' started by Peter, Mar 9, 2005.

  1. Peter

    Peter Guest

    I've got a problem in Firefox using absolute positioning on a div within
    a relative box. The div is positioned bottom right which seems to work
    OK in most browsers, including Safari. Firefox (1.0 & 1.01) however
    seems to remember it's last position when a new page loads.
    If the new page is taller than the previous page the box will stay in
    it's original position. A reload fixes the problem.

    I've searched on bugs related to absolute / relative positioning but
    these came up empty.

    The website is http://www.estetika.org, the box appears on all pages, at
    the bottom righthand side.

    If someone knows what I can do to fix this, I'd be gratefull!

    thanks,

    Peter
    Peter, Mar 9, 2005
    #1
    1. Advertising

  2. in alt.html, Peter wrote:

    > The website is http://www.estetika.org, the box appears on all pages, at
    > the bottom righthand side.


    You mean the box with fontsize too small to read? Indicates content that
    you could just leave away, and there is no reason to keep it there,
    especially because neither your xhtml or css is valid. You could start
    fixing problem by using correct code.

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
    Lauri Raittila, Mar 9, 2005
    #2
    1. Advertising

  3. Peter

    n|ck Guest

    Peter wrote:
    > I've got a problem in Firefox using absolute positioning on a div within
    > a relative box. The div is positioned bottom right which seems to work
    > OK in most browsers, including Safari. Firefox (1.0 & 1.01) however
    > seems to remember it's last position when a new page loads.
    > If the new page is taller than the previous page the box will stay in
    > it's original position. A reload fixes the problem.


    Seems to work fine for me in Firefox 1.0.1 unless I'm misunderstanding you...
    n|ck, Mar 10, 2005
    #3
  4. Peter

    DU Guest

    Peter wrote:

    > I've got a problem in Firefox using absolute positioning on a div within
    > a relative box. The div is positioned bottom right which seems to work
    > OK in most browsers, including Safari. Firefox (1.0 & 1.01) however
    > seems to remember it's last position when a new page loads.
    > If the new page is taller than the previous page the box will stay in
    > it's original position. A reload fixes the problem.


    ..bottomline {
    position:absolute;
    bottom:0;
    right:0;
    }

    That's the consequence of the way (implementation) bottom: 0 was
    implemented.

    Bug 105286: viewport used as containing block for absolutely positioned
    elements instead of root (percentage height, %, bottom)
    https://bugzilla.mozilla.org/show_bug.cgi?id=105286

    Comment #58
    https://bugzilla.mozilla.org/show_bug.cgi?id=105286#c58
    explains this:
    "CSS2.1 section 10.1 clearly says that the containing
    block of absolutely positioned elements that don't have a positioned
    ancestor is the initial containing block, which the working group agrees
    is, for desktop browsers, the viewport."


    >
    > I've searched on bugs related to absolute / relative positioning but
    > these came up empty.
    >
    > The website is http://www.estetika.org, the box appears on all pages, at
    > the bottom righthand side.
    >
    > If someone knows what I can do to fix this, I'd be gratefull!
    >
    > thanks,
    >
    > Peter



    A few comments on your webpage code, in particular your CSS code.

    - You misuse CSS code in several ways. For starters, your external
    stylesheet has 623 lines of code (hundreds of declarations) when the
    markup has 5 times less code.

    - You misname styled elements. The best identifiers for class and id
    attributes are the ones which describe what are the content for these
    elements for, what they do, not how they are styled.
    e.g.: .pink {color: fuchsia;} // is very bad way to create a rule
    while
    strong, .ImportantNotice, .Warning {font-weight: bolder; font-size:
    125%;} // is a lot better for site maintenance purposes

    - Your CSS code entirely ignore default browser css values; your CSS
    code ignore inheritance. You declare margin:0 and padding:0 a few dozens
    of times for elements which never have default margin and padding for
    such elements. I think you misunderstand how layout works (block-level
    elements, pos. elements, etc); so you end up over-constraining,
    over-declaring elements and rules.

    I highly recommend you:
    1- StyleSheet perfection: How to write the perfect style sheet - always
    looks perfect, whatever the browser; easy to maintain; quick to download
    http://www.richinstyle.com/masterclass/perfection.html

    2- Writing Efficient CSS (in particular the Guidelines for Efficient CSS
    section):
    http://www.mozilla.org/xpfe/goodcss.html

    DU
    --
    The site said to use Internet Explorer 5 or better... so I switched to
    Mozilla 1.7.6 :)
    DU, Mar 10, 2005
    #4
  5. Peter

    Peter Guest

    DU wrote:
    > Peter wrote:
    >
    >> I've got a problem in Firefox using absolute positioning on a div
    >> within a relative box.

    >
    > That's the consequence of the way (implementation) bottom: 0 was
    > implemented.
    >
    >
    > block of absolutely positioned elements that don't have a positioned
    > ancestor is the initial containing block, which the working group agrees
    > is, for desktop browsers, the viewport."
    >
    >
    >>

    Isn't the #wrapper the "initial containing block"? Or does it need to be
    positioned explicitly?
    >
    > A few comments on your webpage code, in particular your CSS code.
    >
    > - You misuse CSS code in several ways. For starters, your external
    > stylesheet has 623 lines of code (hundreds of declarations) when the
    > markup has 5 times less code.


    True to a certain extent, all leftovers from the design process, these
    will be fixed. But not the entire css-file is used on every page.

    > - You misname styled elements.


    I don't think I'm naming incorrectly, could you give an example?

    > - Your CSS code entirely ignore default browser css values;
    >


    These are also leftovers from designing the site, they will be fixed
    >
    > DU


    Thanks for your comments, the sites you mentioned are pretty usefull for
    future reference.

    Peter
    Peter, Mar 10, 2005
    #5
  6. in alt.html, Peter wrote:
    > DU wrote:


    > Isn't the #wrapper the "initial containing block"? Or does it need to be
    > positioned explicitly?


    No. Initial containing block is something very important, and is quite
    undefined by specs. Most browsers think that viewport is ICB, at least
    when it suits for them.

    > > A few comments on your webpage code, in particular your CSS code.
    > >
    > > - You misuse CSS code in several ways. For starters, your external
    > > stylesheet has 623 lines of code (hundreds of declarations) when the
    > > markup has 5 times less code.

    >
    > True to a certain extent, all leftovers from the design process, these
    > will be fixed.


    You should have it fixed before asking help. Nobody likes to debug such
    CSS, especially not for free.

    What I did was locate the element, fix fontsize, read element, push those
    links and get plenty of errors. That was enaugh to tell me that your code
    was bad.

    > > - You misname styled elements.

    >
    > I don't think I'm naming incorrectly, could you give an example?


    If he can't understand what your class means, it is usually problem

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
    Lauri Raittila, Mar 10, 2005
    #6
  7. Peter

    DU Guest

    Peter wrote:

    >> - You misname styled elements.

    >
    >
    > I don't think I'm naming incorrectly, could you give an example?
    >


    Good naming: menu, header, submenu, etc... because these identifiers
    describe the related document content

    Bad naming (IMO): content, dropshadow, websiteoverviewitem,
    graphicsoverviewitem, graphic, right, bottomline, floatleft10px
    because these identifiers do not describe efficiently the related
    document content.

    DU
    --
    The site said to use Internet Explorer 5 or better... so I switched to
    Mozilla 1.7.6 :)
    DU, Mar 10, 2005
    #7
  8. Peter

    DU Guest

    Lauri Raittila wrote:

    > in alt.html, Peter wrote:
    >


    >>>- You misuse CSS code in several ways. For starters, your external
    >>>stylesheet has 623 lines of code (hundreds of declarations) when the
    >>>markup has 5 times less code.

    >>
    >>True to a certain extent, all leftovers from the design process, these
    >>will be fixed.

    >
    >
    > You should have it fixed before asking help. Nobody likes to debug such
    > CSS, especially not for free.
    >


    Exactly what I thought too.

    DU
    --
    The site said to use Internet Explorer 5 or better... so I switched to
    Mozilla 1.7.6 :)
    DU, Mar 10, 2005
    #8
  9. Peter

    Peter Guest

    DU wrote:
    > Lauri Raittila wrote:
    >
    >> in alt.html, Peter wrote:
    >>

    >
    >>>> - You misuse CSS code in several ways. For starters, your external
    >>>> stylesheet has 623 lines of code (hundreds of declarations) when the
    >>>> markup has 5 times less code.
    >>>
    >>>
    >>> True to a certain extent, all leftovers from the design process,
    >>> these will be fixed.

    >>
    >>
    >>
    >> You should have it fixed before asking help. Nobody likes to debug
    >> such CSS, especially not for free.

    >
    >
    > Exactly what I thought too.


    The leftovers consisted of some margin declarations that were set to
    zero. The css is not overcomplicated IMHO. I didn't think it would
    cause inconvenience to anyone. If it did I'm sorry.

    Peter
    Peter, Mar 11, 2005
    #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. John A Grandy
    Replies:
    0
    Views:
    522
    John A Grandy
    Nov 17, 2004
  2. Rob R. Ainscough
    Replies:
    2
    Views:
    1,648
    Rob R. Ainscough
    Feb 7, 2006
  3. Fred Nelson
    Replies:
    1
    Views:
    2,446
    Christopher Reed
    Feb 21, 2006
  4. Matt Beckwith

    Absolute Positioning (CSS Question)

    Matt Beckwith, Jul 18, 2003, in forum: HTML
    Replies:
    4
    Views:
    1,817
  5. Jules
    Replies:
    6
    Views:
    1,337
    John C
    Nov 7, 2003
Loading...

Share This Page