Dissociated navigation bar and absolute positioning

Lauri Raittila wrote:

In article Michael Rozdoba wrote:

[snip]

IE 6.0 messes it up ... It requires a height of 34em on the floated
div, rather than 23em.

Was that only problem? Then it was surprisingly easy ;-)

<g>

[snip]

How does one reduce the spacing in IE on list items? line-height
will do it, but only with silly small values which don't work in
other browsers.


I looked, and it was this good old white space bug.

[looks up ominous sounding white space bug]

:-/ Eeugh, oh dear, not seen that before. Something else to keep an eye
out for.

It works now in IE5.5, not pixel perfectly, but that could be fixed
using Tantek hack. I wouldn't bother though, as it doesn't break.
(after I changed it a bit...)

Now fine in IE6.0 too; alas not in Firebird 0.7 anymore - the footer top
border lies at about the same height as the baseline of the "Menu 3.4.1"
text.

Margin & padding don't seem to be the problem. Furthermore, adding
a border to see what's going on really confuses things, as the
added spacing then vanishes :/

Try background color or outline

[Looks up outline -> http://www.w3.org/TR/REC-CSS2/ui.html#dynamic-outlines]

Ah, I didn't know that existed. Very handy

instead border next time, they work even when border changes
relations.

I wasn't keen on using border due to positional shifts - is that what
you mean by relations (sorry, new to all this), however I didn't know
about outline.

Thanks for bringing all these problems to my awareness. Seems like
reading this group is even more of an aid to learning CSS than I expected

--
Michael
m r o z a t u k g a t e w a y d o t n e t

In article Michael Rozdoba wrote:

Lauri Raittila wrote:

In article Michael Rozdoba wrote:

[snip]

IE 6.0 messes it up ... It requires a height of 34em on the floated
div, rather than 23em.

Was that only problem? Then it was surprisingly easy ;-)

g

[snip]

How does one reduce the spacing in IE on list items? line-height
will do it, but only with silly small values which don't work in
other browsers.


I looked, and it was this good old white space bug.

[looks up ominous sounding white space bug]

:-/ Eeugh, oh dear, not seen that before. Something else to keep an eye
out for.

Then you must be new. White space bug is like margin collapsing - last
thing people understand to check. Difference is that white space bug is
actually bug, not correct behaviour ;-)

It works now in IE5.5, not pixel perfectly, but that could be fixed
using Tantek hack. I wouldn't bother though, as it doesn't break.
(after I changed it a bit...)

Now fine in IE6.0 too; alas not in Firebird 0.7 anymore - the footer top
border lies at about the same height as the baseline of the "Menu 3.4.1"
text.

Need to check that. I can't understand reason, as I don't think I changed
anythig that could change something.

Try background color or outline

[Looks up outline -> http://www.w3.org/TR/REC-CSS2/ui.html#dynamic-outlines]

Ah, I didn't know that existed. Very handy

OTOH, they only work on Opera AFAIK.

I wasn't keen on using border due to positional shifts - is that what
you mean by relations[*] , however I didn't know
about outline.

Borders also affect on margin collapsing.

Thanks for bringing all these problems to my awareness. Seems like
reading this group is even more of an aid to learning CSS than I expected

I don't think there is any other way to learn CSS well exept try and
error and serious spec reading. Much easier to read this group.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Lauri Raittila wrote:

In article Michael Rozdoba wrote:

[white space bug]

Then you must be new.

Very. Been meaning to learn HTML for years, but just got into it a few
weeks ago when I had to write an assignment for a basic HTML
introductory course. I got a bit carried away & when I discovered CSS,
couldn't resist using it, even though it wasn't part of the course (hope
I don't get marked down).

The result's at http://osiris.sunderland.ac.uk/~cd2mro/. I'm still
tinkering with it, so the latest version is at
http://osiris.sunderland.ac.uk/~cd2mro/final/

White space bug is like margin collapsing - last thing people
understand to check. Difference is that white space bug is actually
bug, not correct behaviour ;-)

Easy to tell them apart - if it's in IE there seems to be a 99% chance
it's a bug; if it's Gecko & Opera, almost certainly is the spec.

Need to check that. I can't understand reason, as I don't think I
changed anythig that could change something.

Sorry I can't help - could it be anything to do with differing default
values for something that's not been specified explicitly? I'm afraid
when I said it previously worked in Firebird, I just meant it looked
okay (ie no overlap & not an overly large gap between navigation bar &
footer) - I didn't do a comparison of positioning down to the pixel
level (that doesn't usually bother me, so I don't look or aim for it). I
reckon I would have noticed a difference of over an em, mind you.

If you have the original version & put it back on the server, I'll have
another look, if you don't have the time or a gecko based browser handy.

[the joy of outline]

OTOH, they only work on Opera AFAIK.

[checks]

Bum. You're right of course; ignored by IE6.0 & Firebird 0.7 :-(

[snip]

Borders also affect on margin collapsing.

Ah, okay.

I do read the spec, but only as & when I have time or a problem. Bits of
it are sinking in, but I'm not yet familiar with much of it. It is a
surprisingly easy to read document though.

Thanks for bringing all these problems to my awareness. Seems like
reading this group is even more of an aid to learning CSS than I
expected

I don't think there is any other way to learn CSS well exept try and
error and serious spec reading. Much easier to read this group.

Combined, they work well. I certainly had a lot of "fun" getting my
small assignment to work as I intended & I only caught the peekaboo bug
after the submission date.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

In article Michael Rozdoba wrote:

Lauri Raittila wrote:
In article Michael Rozdoba wrote:

[white space bug]

Then you must be new.

Very. Been meaning to learn HTML for years, but just got into it a few
weeks ago when I had to write an assignment for a basic HTML
introductory course. I got a bit carried away & when I discovered CSS,
couldn't resist using it, even though it wasn't part of the course (hope
I don't get marked down).

It really don't make sence to tech HTML whitout CSS. After all, it takes
4 hours to tech basics of html to 13 year old newbie. If that 13 year old
is interested, he'll learn it by himself. (it is harder to tech to
someone older, they want to make webpages just like all others in net
unfortunately).

The result's at http://osiris.sunderland.ac.uk/~cd2mro/. I'm still
tinkering with it, so the latest version is at
http://osiris.sunderland.ac.uk/~cd2mro/final/

You should em unit for navigation bar width. Now it breaks on small
window sizes... At least min-width.

Make plentiful use of whitespace. Narrower columns of text, clearly
delimited with empty space, either side, are much easier to read.

There is a limit. If it goes under 40-50 chars, it starts to be too
short. Max-width is better than big margins (but don't work on IE). Big
margins should be done using percentages, so that they dont take overly
much space on smaller window. And if window is bigger, they take more
space.

White space bug is like margin collapsing - last thing people
understand to check. Difference is that white space bug is actually
bug, not correct behaviour ;-)

Easy to tell them apart - if it's in IE there seems to be a 99% chance
it's a bug; if it's Gecko & Opera, almost certainly is the spec.

White space bug also applies to Opera and Gecko, but less often (and even
more hard to think times). And sometimes something that look like white
space bug is really white space feature...

Need to check that. I can't understand reason, as I don't think I
changed anythig that could change something.

Sorry I can't help - could it be anything to do with differing default
values for something that's not been specified explicitly? I'm afraid
when I said it previously worked in Firebird, I just meant it looked
okay (ie no overlap & not an overly large gap between navigation bar &
footer) -

I didn't do a comparison of positioning down to the pixel
level (that doesn't usually bother me, so I don't look or aim for it). I
reckon I would have noticed a difference of over an em, mind you.

I don't care pixel perfectness much either, but it is challenge. That
layout would have been much easier to do whiout being pixel perfect.

If you have the original version & put it back on the server, I'll have
another look, if you don't have the time or a gecko based browser handy.

Well, I checked it now and noticed that I had but margin between footer
and other content to wrong place. Also happened in Opera, I just didn't
notice as my content was too long.

It was on margin-top on footer, and of course it doesn't affect to space
between float and cleared element.

Ah, okay.

I do read the spec, but only as & when I have time or a problem. Bits of
it are sinking in, but I'm not yet familiar with much of it. It is a
surprisingly easy to read document though.

Yes, especially compared to HTML spec. I have not seen any CSS tutorial
etc that I would think is clearer than spec. Even if, or maybe just
because there is lots of totally undefined things.


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

It seems "Lauri Raittila" wrote in
comp.infosystems.www.authoring.stylesheets in article
<MPG.1a752df7e89d2f6a989df0 (AT) news (DOT) cis.dfn.de>:

In article Michael Rozdoba wrote:
Lauri Raittila wrote:
Try background color or outline

[Looks up outline -> http://www.w3.org/TR/REC-CSS2/ui.html#dynamic-outlines]

Ah, I didn't know that existed. Very handy

OTOH, they only work on Opera AFAIK.

A quick test shows that Mozilla 1.4 doesn't support them.

But for debugging purposes, Mozilla does have DOM inspector, and in
that mode displays a box around any selected element.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

Lauri Raittila wrote:

In article Michael Rozdoba wrote:

[snip]

It really don't make sence to tech HTML whitout CSS.

I'm inclined to agree.

After all, it takes 4 hours to tech basics of html to 13 year old
newbie. If that 13 year old is interested, he'll learn it by himself.

We had about 12 hours (it ought to have been 18), plus our own time;
this module was one of three, forming one semester of a part time
Foundation degree course running over 3 years.

(it is harder to tech to someone older, they want to make webpages
just like all others in net unfortunately).

Grown ups are often annoying

The result's at http://osiris.sunderland.ac.uk/~cd2mro/. I'm still
tinkering with it, so the latest version is at
http://osiris.sunderland.ac.uk/~cd2mro/final/


You should em unit for navigation bar width. Now it breaks on small
window sizes... At least min-width.

At the time I was happy to get something that looked reasonable much of
the time. Now I don't like a lot of what I did, but would have to start
from scratch to change it, so that will have to wait for my next experiment.

For the time being I've added a min-width to the navigation bar & main
h2 headers. I tried a fixed width, but didn't like how it looked at
small sizes.

Shame one can't specify min & max values for properties
other than width - margin & padding would be useful. Shame even
min-width doesn't work in IE :/

| Make plentiful use of whitespace. Narrower columns of text, clearly
| delimited with empty space, either side, are much easier to read.


There is a limit. If it goes under 40-50 chars, it starts to be too
short.

Generally, I'd agree.

Max-width is better than big margins (but don't work on IE).

As a means to limit text width, I think I'd go along with that.

Big margins should be done using percentages, so that they dont take
overly much space on smaller window. And if window is bigger, they
take more space.

Definitely agreed.

A min, norm & max triple for margins would be handy.

It might be useful to be able to specify sizes as a function of other
object sizes, but I wouldn't want to introduce complexity for the same
of it.

White space bug is like margin collapsing - last thing people
understand to check. Difference is that white space bug is
actually bug, not correct behaviour ;-)

Easy to tell them apart - if it's in IE there seems to be a 99%
chance it's a bug; if it's Gecko & Opera, almost certainly is the
spec.


White space bug also applies to Opera and Gecko,

:-/

I know they have bugs, obviously, but that seems an unnecessary one, not
that I've ever tried to write a parser for HTML.

but less often (and even more hard to think times). And sometimes
something that look like white space bug is really white space
feature...

Complexity can make things interesting.

[snip]

I don't care pixel perfectness much either, but it is challenge. That
layout would have been much easier to do whiout being pixel perfect.


I can imagine

[snip]

Well, I checked it now and noticed that I had but margin between
footer and other content to wrong place. Also happened in Opera, I
just didn't notice as my content was too long.

It was on margin-top on footer, and of course it doesn't affect to
space between float and cleared element.

Okay, I'll take your word for it

Glad to see it sorted.

I do read the spec, but only as & when I have time or a problem.
Bits of it are sinking in, but I'm not yet familiar with much of
it. It is a surprisingly easy to read document though.


Yes, especially compared to HTML spec. I have not seen any CSS
tutorial etc that I would think is clearer than spec. Even if, or
maybe just because there is lots of totally undefined things.

Undefined in the spec?

I've looked at a couple of CSS books, but not found anything I've liked
so far. I've the new version of Meyer's Definitive Guide to CSS on order
& am hopeful it will be a worthwhile purchase.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

Lauri Raittila wrote:

Example (that is not tested on IE, propably needs some tweaking):
http://www.student.oulu.fi/~laurirai/www/css/splitmenu/

Thanks, I haven't had time to test your solution yet (I've been busy on
some other stuff these days), but it looks great ! Exactly what I needed.

Rather make your footer narrower. I'm not big fan of over long navigation
menus, but this seems good way to do one.

Me neither, but the point is that this solution provides many

interesting positioning possibilities (one top-level navigation bar,
plus two-level navigation list, three-level single menu, horizontal tabs
with sub-options, plus one single-level dissociated list, etc.): this is
why I wanted to give it a try.

Thanks a lot for your help.

Vincent.