Re: question about css-layout

juerg oehler wrote:
> hi
> 
> i am about to use dhtml and css. therefore i studied the standards under 
> w3c.org and xhtml.com.
> 
> all the poeple is talking about changing from tables to css-layout. i 
> tried it of course - for a long time. but by now i am not able to 
> control a page with a few elements. to control means i write code and 
> get the expected result like in c/c++, perl, sql or shell.
> 
> i have found a workaround for any of showed the problems of course. but 
> before i start to thinker around, i would like to make sure, there is no 
> chance for a proper solution.
> 
> to day i was working on a example, which show the page with 3 simple 
> div-blocks enriched with some questions.
> please have a look at <http://www.ois-net.org/test/TestCSS2.html> the

> page is validated.
> i would like to present someone the example in the hope, getting the 
> correct anwsers to the questions.
> 
> so, who to (mozilla team) can i send these questions?

I gave you the "correct" answer in support.firefox but if you want
more 
at Mozilla, then try the correct group:
    mozilla.dev.tech.css

-- 
Good Luck,
Gus

hi

i am about to use dhtml and css. therefore i studied the standards under 
w3c.org and xhtml.com.

all the poeple is talking about changing from tables to css-layout. i 
tried it of course - for a long time. but by now i am not able to 
control a page with a few elements. to control means i write code and 
get the expected result like in c/c++, perl, sql or shell.

i have found a workaround for any of showed the problems of course. but 
before i start to thinker around, i would like to make sure, there is no 
chance for a proper solution.

to day i was working on a example, which show the page with 3 simple 
div-blocks enriched with some questions.
please have a look at <http://www.ois-net.org/test/TestCSS2.html> the 
page is validated.
i would like to present someone the example in the hope, getting the 
correct anwsers to the questions.

so, who to (mozilla team) can i send these questions?

thx and have fun

On 3/17/2008 10:05 PM, juerg oehler wrote:
> hi
> 
> i am about to use dhtml and css. therefore i studied the standards under 
> w3c.org and xhtml.com.
> 
> all the poeple is talking about changing from tables to css-layout. i 
> tried it of course - for a long time. but by now i am not able to 
> control a page with a few elements. to control means i write code and 
> get the expected result like in c/c++, perl, sql or shell.
> 
> i have found a workaround for any of showed the problems of course. but 
> before i start to thinker around, i would like to make sure, there is no 
> chance for a proper solution.
> 
> to day i was working on a example, which show the page with 3 simple 
> div-blocks enriched with some questions.
> please have a look at <http://www.ois-net.org/test/TestCSS2.html> the

> page is validated.
> i would like to present someone the example in the hope, getting the 
> correct anwsers to the questions.
> 
> so, who to (mozilla team) can i send these questions?
> 
> thx and have fun
> juerg (george)

Try <news:comp.infosystems.www.authoring.stylesheets> on a commercial
news server.

-- 
David E. Ross
<http://www.rossde.com/>

Go to Mozdev at <http://www.mozdev.org/> for quick access to
extensions for Firefox, Thunderbird, SeaMonkey, and other
Mozilla-related applications.  You can access Mozdev much

Unbelievable but true - I've answered and explained completely all your 
embedded questions:

>     * comment "Header": box with black border. all elements are
defined inside of this box.
>       question: why is the clock and the menublock outside of this box?

The clock image is floated, therefore out of the normal flow and outside 
of the container.
The menublock is floated, therefore out of the normal flow and outside 
of the container.
Being out of the normal flow, they don't contribute any height to the 
container.

>       expected: header box heigth has at least the size of image plus twice
margin 1em

As I said, the clock and menublock are out of the flow, so the height of 
the header box (white) is:
  1em margin +
  HBanner box (height of text plus the two .1em padding values) +
  1em margin (the two 1ems are collapsed) +
  HMenu div (two .1em padding values) +
  1em margin

>       expected: both blocks start after clock image with 1em offset.
because of 'float:left;'

Not sure what you mean. If you mean that HBanner and HMenu are to be to 
the right of the clock, then the proper markup for that layout is to 
float the clock and allow HBanner and HMenu to flow to the right of it.

>     * comment "Banner": box with red border. text is resized,
moved to the right.
>       question: are foreground and background not attributes of the same
element (node) having the same size?

Not sure what you mean. The background image size has no affect on the 
document layout.

>       question: what is the real size of the box 'banner'?

1px border + .1px padding + text height + .1px padding + 1px border
1px border + .1px padding + text width + .1px padding + 1px border

>       expected: foreground (represented by the text) and background have
one size

Visually, the text does not fill the height of the box because of 
ascender, descender and .1px paddings.

>     * comment "Menu": box with blue border. menublock (yellow
border) is outside
>       question: heigth ~3px, how get the system this result? what is the
meaning behind?

The blue box (HMenu) has the menu items floated; now out of normal flow; 
leaving only the two .1em padding values = .2em

>     question: is the problem 'image-bannerblock-menublock' a
table-problem?

No

>     question: why is the text 'banner' inside located of the div-block but
the child 'div-block' is not?

Not sure whatyou mean. The text is not floated. The menu items are floated.

>     question: if i put min-height to any value on div-block, ie7 would show
the expected picture

You use a Transitional doctype which uses IE's QUIRKY Mode of display. 
Who knows what to expect. Use Standards Mode; Strict Doctype.
If you have no need for any XML in your document, just go with HTML and 
not XHTML.

>     question: what definition has to be added, for proper work within the
css standard?

See below - CHANGES to make it work

>     question: can i use the css-style layout only if i do without
background and border?

No such restriction.

>     question: why do browser not handle foreground and background with the
same logic?

They do AFAIK.

>     question: what is the referential implementation of the css standard?

CSS 2.1
<http://www.w3.org/TR/CSS21/>


CHANGES to make it work:
1. Remove  float:left  from  div.HMenu a
2. Add  margin-left:150px;  to both  div#HBanner  and  div.HMenu
3. Add this clearing div right after the  HMenu div
    <div style="clear:left;"></div>

-- 
Gus