"Lauri Raittila" <lauri@raittila.cjb.net> schrieb im Newsbeitrag
news:MPG.1a6ce4511a68c9eb989da4@news.cis.dfn.de...[color=blue]
> In article Markus Ernst wrote:[color=green]
> > "Lauri Raittila" <lauri@raittila.cjb.net> schrieb im Newsbeitrag
> > news:MPG.1a6a5d2cbd083c14989d9a@news.cis.dfn.de...[/color]
>[color=green][color=darkred]
> > >[/color][/color][/color]
http://gogle.de/groups?threadm=MPG.1...ews.cis.dfn.de[color=blue]
>[color=green]
> > Thank you for pointing me to this very interesting thread.[/color]
>
> I made a webpage about that subject finally, and managed to invent 2 more
> ways to vertically center in process...
>
http://www.student.oulu.fi/~laurirai/www/css/middle/
>
> One of those worked in all browsers I tested, and that is the one that
> breaks most likely, when em/px ratio is different...
>
> But I think I have made some mistake, as it seems strange how badly
> Mozilla renders three of the examples. So if someone would look it with
> something else than 1.4 mozilla, I would like to hear.[/color]
Netscape 7.0 (I am sorry I don't find out on which Mozilla version it is
based):
- Line-height: Image 2 px below middle
- Absolute positioning: Text 2 px below middle
- Table-cell: different height (seems to behave like border-box model)
- Padding and negative margin: as absolute positioning
- Relative positioning and negative margin: Broken (Text on top, image
overlaps top)
- Absolute positioning and negative margin: as absolute positioning
I also have installed Mozilla 1.0, seems to behave exactly the same.
[color=blue][color=green]
> > As IE does not
> > support the line-height solution I did the real cross-browser thing - I
> > added the white space to the images so that they all have the same[/color][/color]
height[color=blue][color=green]
> > and the visible part is where I want it to be.[/color]
>
> Well, Adding them just right amount of margin would have been good too.[/color]
Yes but it is more complicated to handle as it is necessary to calculate the
extra space for every single image and apply it as inline style.
[color=blue]
> Anyway, more steps are taken toward ease of use in CSS3.[/color]
As a user of graphic layout softwares I am looking forward to using the
border box model :-). Nowadays it is impossible to mix percent values with
other values. A width or height of 100% and a padding of 2em causes a
scrollbar. This will be much better with a border-box model.
A really huge improvement would be calculating CSS:
#menu {
width:20em;
}
#contents {
margin: 2em;
border: solid 3px;
width: (100% - 20em - 4em - 6px);
}
Or even better with reference to other elements:
#menu {
width:20em;
min-width:200px /* width of logo graphic */
}
#contents {
margin: 2em;
border: solid 3px;
width: (100% - #menu.width - 4em - 6px);
}
Will need a lot of CPU power of course...
--
Markus
