why the extra space before and after the ul in firefox 1.0 (ie6 renders right)?

[skeeterbug]

http://www.geocities.com/operationsengineer1/test2.htm

the extra space between the logoHeader and the menu bar occurs when i
add the <ul>. if i comment out the ul and and all the li, the 1em
space disappears in firefox.

http://www.geocities.com/operationsengineer1/test3.htm

it never shows in ie6. if i increase the margin of hmenu to 1 em,
there is no effect on the top and bottom, but the right and left are
effected. an increase to 2em adds another 1em to the top and bottom
(sides work as expected).
why does this occur and how can i get rid of it?

tia...

[skeeterbug]

cross browser compaitibility css is like looking for a pot of gold at
the end of the rainbow. it is *unbelievable* how totally difficult a
simple process should be. all i can say is... wow.

i just broke another attempt at hacking together a menu system.

the worst part? there is no rhyme or reason to the break.

i guess i'll start over... again.

i still would appreciate an answer to the problem, though. i can then
file it with all the other css snafu issues to be on guard for in the
future.

skeeterbug wrote:

http://www.geocities.com/operationsengineer1/test2.htm

the extra space between the logoHeader and the menu bar occurs when i
add the <ul>. if i comment out the ul and and all the li, the 1em
space disappears in firefox.

http://www.geocities.com/operationsengineer1/test3.htm

it never shows in ie6. if i increase the margin of hmenu to 1 em,
there is no effect on the top and bottom, but the right and left are
effected. an increase to 2em adds another 1em to the top and bottom
(sides work as expected).
why does this occur and how can i get rid of it?

tia...

[Jukka K. Korpela]

"skeeterbug" <js******@san.rr.com> wrote:

cross browser compaitibility css is like looking for a pot of gold at
the end of the rainbow. it is *unbelievable* how totally difficult a
simple process should be. all i can say is... wow.

What are you babbling about? I was just about to look at your problem, then
noticed that about an hour after you posted your message, you posted a TOFU
(Text abOve, Fullquote Under) followup to yourself. So apparently you are
just entertaining yourself and wasting everyone's time.

Besides it's obvious that you probably have missed the idea of default top
margin or padding for some elements like <ul>.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Harlan Messinger]

"skeeterbug" <js******@san.rr.com> wrote:

http://www.geocities.com/operationsengineer1/test2.htm

the extra space between the logoHeader and the menu bar occurs when i
add the <ul>. if i comment out the ul and and all the li, the 1em
space disappears in firefox.

http://www.geocities.com/operationsengineer1/test3.htm

it never shows in ie6. if i increase the margin of hmenu to 1 em,
there is no effect on the top and bottom, but the right and left are
effected. an increase to 2em adds another 1em to the top and bottom
(sides work as expected).
why does this occur and how can i get rid of it?

The general interpretation in CSS of an element's top and bottom
margins is that they represent *at least* how far that element wants
to be from the elements above and below it. Therefore, the vertical
spacing between adjacent elements is the *larger of* the bottom margin
of the upper element and the top margin of the lower element.

If the default vertical spacing between two elements is larger than
you'd like, you may need to alter the respective margins of both of
them to reduce it.

Default properties differ from browser to browser by design. HTML only
defines a document's structure. How that structure translates into
display, in the absence of overriding guidance conveyed by a
stylesheet, is a product of the judgment of the browser's creators.
W3C does suggest a default stylesheet, but it's just a suggestion.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

[skeeterbug]

harlan,

thanks for the mature response.

however, all margins were set as follows... and this includes the id
<ul>.

margin: 0em;

i still get the spacing in ff - ie renders fine.

it is my understanding that sets both the top and bottom margin for the
element to 0em. is this incorrect?

am i frustrated? yeah. spent several days trying to get a simple
layout with an hnav and a vnav. is it css' fault? nope. css is
really cool stuff.

is it the incompatible browsers' fault? i think so. having said that,
i don't want to cop out and design for just one browser as so many have
chosen to do. *believe me* when i say i know why, though.

i ended up pulling a layout off the web that does work in both ff and
ie. i will learn how it works (and maybe why mine didn't) as soon as i
have time to go through it in detail - i lost several days working
through a multitude of browser quirks only to inevitably find that more
were waiting in shadows.

i haven't set up my hnav or vnav yet, so i may end up breaking that
layout, too - and be right back at square one.

thanks for the help - it isn't wasted. we all learn and someone,
somewhere will set margin: 0em; for all their elements and still get an
improper spacing as i did in one browser.

this forum may be able to solve their problem - or highlight another in
long line of browser quirks.

Harlan Messinger wrote:

"skeeterbug" <js******@san.rr.com> wrote:

http://www.geocities.com/operationsengineer1/test2.htm

the extra space between the logoHeader and the menu bar occurs when iadd the <ul>. if i comment out the ul and and all the li, the 1em
space disappears in firefox.

http://www.geocities.com/operationsengineer1/test3.htm

it never shows in ie6. if i increase the margin of hmenu to 1 em,
there is no effect on the top and bottom, but the right and left are
effected. an increase to 2em adds another 1em to the top and bottom
(sides work as expected).
why does this occur and how can i get rid of it?
The general interpretation in CSS of an element's top and bottom
margins is that they represent *at least* how far that element wants
to be from the elements above and below it. Therefore, the vertical
spacing between adjacent elements is the *larger of* the bottom

margin of the upper element and the top margin of the lower element.

If the default vertical spacing between two elements is larger than
you'd like, you may need to alter the respective margins of both of
them to reduce it.

Default properties differ from browser to browser by design. HTML only defines a document's structure. How that structure translates into
display, in the absence of overriding guidance conveyed by a
stylesheet, is a product of the judgment of the browser's creators.
W3C does suggest a default stylesheet, but it's just a suggestion.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

[skeeterbug]

(strip all atittude from post)

jukka, thanks for the answer.

i thought i had set hnav's ul margin to 0em with the following:

#hnav ul {
.....
margin: 0em;
....
}

it seems reasonable to believe that this would do the trick for <ul
id="hnav">, no?

i added in

ul {
.....
margin: 0em;
....
}

and everything works perfect.

is this expected behavior for #hnav ul not to style the hnav ul (if ff,
anyway) so that styling all uls is required?
isn't this counterintuitive?

[skeeterbug]

interestingly enough, when viewed in ff1, there is a left margin to the
<ul>, but ie6 displays no margin.

i had a problem where both ff1 and ie displayed a margin (lists have a
default margin, as they normally should), but i solved that in both
browsers. now the two browsers interpret the code differently.

[Harlan Messinger]

skeeterbug wrote:

Please don't top-post, as you've already been asked. My comments below,
and my positioning of them, illustrate the benefits of placing responses
after the particular points that they address. Imagine if I had just
typed all my sentences at the top of the message, and left it to you
(and everyone else) to figure out what parts of your remarks each of
them referred to.

however, all margins were set as follows... and this includes the id
<ul>.

margin: 0em;

i still get the spacing in ff - ie renders fine.
I don't get it--I'm looking at both your pages in both browsers, and in
each browser the colored blocks stay the same when I switch back and
forth between the two pages. Nothing moves. The only thing that happens
is that the buttons disappear and reappear. In other words, I don't see
what space it is that you say appears in one case but not in the other.
Again, I get this result in both IE6 and Firefox.

it is my understanding that sets both the top and bottom margin for the
element to 0em. is this incorrect?
It sets *all* the margins. Top, right, bottom, left.

am i frustrated? yeah. spent several days trying to get a simple
layout with an hnav and a vnav. is it css' fault? nope. css is
really cool stuff.

is it the incompatible browsers' fault? i think so. having said that,
i don't want to cop out and design for just one browser as so many have
chosen to do. *believe me* when i say i know why, though.
You don't need to cop out. It's a nuisance, but it's an art, and we all
have to deal with it. As time goes on you'll develop an arsenal of
tricks that you'll apply without thinking much about it.

i ended up pulling a layout off the web that does work in both ff and
ie. i will learn how it works (and maybe why mine didn't) as soon as i
have time to go through it in detail - i lost several days working
through a multitude of browser quirks only to inevitably find that more
were waiting in shadows.
Maybe that's why I got the result above.

i haven't set up my hnav or vnav yet, so i may end up breaking that
layout, too - and be right back at square one.

thanks for the help - it isn't wasted. we all learn and someone,
somewhere will set margin: 0em; for all their elements and still get an
improper spacing as i did in one browser.

this forum may be able to solve their problem - or highlight another in
long line of browser quirks.

Harlan Messinger wrote:

"skeeterbug" <js******@san.rr.com> wrote:

http://www.geocities.com/operationsengineer1/test2.htm

the extra space between the logoHeader and the menu bar occurs when
i
add the <ul>. if i comment out the ul and and all the li, the 1em
space disappears in firefox.

http://www.geocities.com/operationsengineer1/test3.htm

it never shows in ie6. if i increase the margin of hmenu to 1 em,
there is no effect on the top and bottom, but the right and left are
effected. an increase to 2em adds another 1em to the top and bottom
(sides work as expected).
why does this occur and how can i get rid of it?

The general interpretation in CSS of an element's top and bottom
margins is that they represent *at least* how far that element wants
to be from the elements above and below it. Therefore, the vertical
spacing between adjacent elements is the *larger of* the bottom

margin

of the upper element and the top margin of the lower element.

If the default vertical spacing between two elements is larger than
you'd like, you may need to alter the respective margins of both of
them to reduce it.

Default properties differ from browser to browser by design. HTML

only

defines a document's structure. How that structure translates into
display, in the absence of overriding guidance conveyed by a
stylesheet, is a product of the judgment of the browser's creators.
W3C does suggest a default stylesheet, but it's just a suggestion.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

[Michael Rozdoba]

skeeterbug wrote:

i thought i had set hnav's ul margin to 0em with the following:

#hnav ul {
....
margin: 0em;
...
}

it seems reasonable to believe that this would do the trick for <ul
id="hnav">, no?

No.

#hnav ul selects any unnumbered list inside an element with id hnav.

You meant ul#hnav

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

[skeeterbug]

Michael Rozdoba wrote:

No.

#hnav ul selects any unnumbered list inside an element with id hnav.

You meant ul#hnav

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

mike, thanks. it moved the menu left, but cause some other issues
(probably due to my inconsistent call outs).

so, ul#hnav is different than #hnav ul. i learned something good and
will do some research on it. thanks again.

[skeeterbug]

>>I don't get it--I'm looking at both your pages in both browsers, and
in
each browser the colored blocks stay the same when I switch back and
forth between the two pages. Nothing moves. The only thing that happens

is that the buttons disappear and reappear. In other words, I don't see

what space it is that you say appears in one case but not in the other.

Again, I get this result in both IE6 and Firefox.<<

the top and bottom margins were fixed by styling the "ul" tag instead
of the "#hnav ul" tag.

the next problem was an inconsistent ul left-margin. that was resolved
by changing "#hnav ul" to "ul#hnav". some other formats were lost, but
that's likely due to conflicting style methods.

[skeeterbug]

>>You don't need to cop out. It's a nuisance, but it's an art, and we
all
have to deal with it. As time goes on you'll develop an arsenal of
tricks that you'll apply without thinking much about it.<<

....and like all arts, it takes time to get into the flow... that's
what i'm learning. i'm working through data validation now... but i
have learned some good stuff that will benefit me - and hopefully
others - going foward.

you can sign me up for someone who wants browsers to adhere to
consistent standards, though! i'm sure that list is a long one...;-)

[^demon]

Something to keep in mind. You don't need to double post (as previously
asked). Also, minor updates like that are even less needing of a double
post.

Post 1: Thanks for the idea, I'll look into it.
Post 2: It worked. Yay!

That kind of stuff is useless.