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!


    Peter, Mar 9, 2005
    1. Advertisements

  2. 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, Mar 9, 2005
    1. Advertisements

  3. Peter

    n|ck Guest

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

    DU Guest

    ..bottomline {

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

    Bug 105286: viewport used as containing block for absolutely positioned
    elements instead of root (percentage height, %, bottom)

    Comment #58
    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."

    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
    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

    2- Writing Efficient CSS (in particular the Guidelines for Efficient CSS

    DU, Mar 10, 2005
  5. Peter

    Peter Guest

    Isn't the #wrapper the "initial containing block"? Or does it need to be
    positioned explicitly?
    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.
    I don't think I'm naming incorrectly, could you give an example?
    These are also leftovers from designing the site, they will be fixed
    Thanks for your comments, the sites you mentioned are pretty usefull for
    future reference.

    Peter, Mar 10, 2005
  6. 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.
    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.
    If he can't understand what your class means, it is usually problem
    Lauri Raittila, Mar 10, 2005
  7. Peter

    DU Guest

    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, Mar 10, 2005
  8. Peter

    DU Guest

    Exactly what I thought too.

    DU, Mar 10, 2005
  9. Peter

    Peter Guest

    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, Mar 11, 2005
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.