Absolute positioning

[Peter]

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

 

[Lauri Raittila]

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.

 

[n|ck]

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

 

[DU]

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

 

[Peter]

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

 

[Lauri Raittila]

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.

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.

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

 

[DU]

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

 

[DU]

in alt.html, Peter wrote:



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

Exactly what I thought too.

DU

 

[Peter]

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