Margins, background problem...

[dorayme]

I have put up at http://dorayme.150m.com/test1/main.html
something to illustrate something that puzzles me. I found I
could get rid of the white space below and above the inline list
by assigning negative bottom margin to the the banner div and
same for top margin for the content div. I can also, of course,
be rid of it by assigning suitable colours to backgrounds. But I
would rather like to understand what is going on here. The body
or html element is white by default and it presumably is shining
through. What is it shining through, precisely, if anything?

I put a green (#CFC ) background for #navStrip in the css to try
to find out what exactly it is that is white! It does not show up
- except, surprise, surprise, in what we might as well call a
deprecated browser (IE 5 Mac) and then only covering the top
white space above the menu strip, not the bottom! In all my
modern browsers there is just the white space.

I tried this green bg to various things to try to track down what
is going on but so far have failed. Any ideas?

Is the inline link mark up and css not kosher? I don't know.

 

[Wÿrm]

"dorayme" <[email protected]> kirjoitti
viestissä:[email protected]...

white space below and above the inline list

I suggest you should use FireFox and it's DOM Inspector when you are
searching reasons for weird spaces etc.

try

ul
{
margin: 0;
padding: 0;
}

to get rid of space below and above that inline list.

<snip>

 

[dorayme]

"dorayme" <[email protected]> kirjoitti
viestissä:[email protected]...


I suggest you should use FireFox and it's DOM Inspector when you are
searching reasons for weird spaces etc.

try

ul
{
margin: 0;
padding: 0;
}

to get rid of space below and above that inline list.

<snip>

Yes, this certainly works as a solution. ie. instead of my

#navStrip ul {
....
margin-left: 0;
padding-left: 0;
....

}

better is

#navStrip ul {
....
margin: 0;
padding: 0;
....

}

It is more elegant than either of my solutions, well done, Wÿrm.

There is a learning curve prob about DOM! I am still puzzled as
to what exactly in terms of elements, background and stuff, this
setting of margin and padding addresses. What was the margin of
what by default before? I WANT to peer into the WHOLE TRUTH with
clarity.

 

[Wÿrm]

What was the margin of what by default before?

If it's not mentioned in w3 specs then it depends from the browser, atleast
in this UL case if my memory serves me right. Right now I'd not give it that
much credit though, considering I'm having flu and plenty enough fever.

I WANT to peer into the WHOLE TRUTH with clarity.

You can't handle the truth! ) Well, but truth depends from the point of
view so, install lotsa lotsa different browsers and start (vain) search of
the truth, if things are not mentioned in W3 specs how something should be
implemented or set as default..

Anyway, have fun with learning CSS and stuff, I'm off to kitchen make lots
of hot tea and then back under the blanket to recover from this flu...

<snip>

 

[Leonard Blaisdell]

What was the margin of
what by default before? I WANT to peer into the WHOLE TRUTH with
clarity.

Different browsers set different stuff to default. And that's the WHOLE
TRUTH Do I get a joke?

leo

 

[Stan McCann]

I have put up at http://dorayme.150m.com/test1/main.html
something to illustrate something that puzzles me. I found I
could get rid of the white space below and above the inline list
by assigning negative bottom margin to the the banner div and
same for top margin for the content div. I can also, of course,
be rid of it by assigning suitable colours to backgrounds. But I
would rather like to understand what is going on here. The body
or html element is white by default and it presumably is shining
through. What is it shining through, precisely, if anything?

I put a green (#CFC ) background for #navStrip in the css to try
to find out what exactly it is that is white! It does not show up
- except, surprise, surprise, in what we might as well call a
deprecated browser (IE 5 Mac) and then only covering the top
white space above the menu strip, not the bottom! In all my
modern browsers there is just the white space.

I tried this green bg to various things to try to track down what
is going on but so far have failed. Any ideas?

Is the inline link mark up and css not kosher? I don't know.

If I'm looking at the right thing, the <style> element way down the
page? That is not supposed to be outside of the <head>.

As for your white space, I think it has to do with
#navStrip ul { background-color: silver; text-align: left; margin-left:
0; padding-left: 0; border-bottom: 1px solid gray; }. Notice you don't
set a top/bottom margin. Try margin:0 instead of margin-left:0.

I also noted an <img> with width="100px" height="75px". px is
understood. I don't remember for certain if this is an error but the
px is certainly unneeded.

 

[dorayme]

If it's not mentioned in w3 specs then it depends from the browser, atleast
in this UL case if my memory serves me right. Right now I'd not give it that
much credit though, considering I'm having flu and plenty enough fever.
snip

Anyway, have fun with learning CSS and stuff, I'm off to kitchen make lots
of hot tea and then back under the blanket to recover from this flu...

OK you have flu and I hope you get better soon. But the moment
the flu subsides, I want that you should ponder what I said about
how IE Mac showed the green bg to the #navStrip (stuck in there
to see what might be going on) only above the strip. not below.
The bg to the #navStrip div is green, so why is the default white
of the body (or is it the html?) showing through under the strip?
Is Mac IE partly showing what no other browser sniffs out (rather
than it being a bug or vagary of IE Mac). I know, there is no
"practical" problem!

Tea eh? In Witness, John Book (Harrison Ford) was just recovering
from a life threatening injury. Gathered around him were the
Amish elders, one of whom (the Amish "doc") said to him "Keep
drinking my teas" (he had made up some formulas for his
condition). The Pennsylvanian detective turned to the lovely
Rachel (who was looking after him) and whispered that she should
tell him his teas tasted awful. She replied that he will soon be
able to tell him himself...

 

[dorayme]

Different browsers set different stuff to default. And that's the WHOLE
TRUTH Do I get a joke?

leo

Yes, you too get to keep that joke I sent. You are a good person,
Leo, gooder than good can be. (Do you want one just for yourself?
well... ok... how about... hang on... what about ....

http://dorayme.150m.com/jokes/shepherdYuppie.html

)

But - seriously - I still do not know _what_ it is that is set to
_what_ by default! There is remarkable consistency to the way the
modern browsers render this ... er ... problem.

 

[dorayme]

If I'm looking at the right thing, the <style> element way down the
page? That is not supposed to be outside of the <head>.

I think you might be referring to something that the free domain
puts there. The problem I put up is independent of this, it shows
up off line. In my markup, I have my <head> ... <link

As for your white space, I think it has to do with
#navStrip ul { background-color: silver; text-align: left; margin-left:
0; padding-left: 0; border-bottom: 1px solid gray; }. Notice you don't
set a top/bottom margin. Try margin:0 instead of margin-left:0.

I also noted an <img> with width="100px" height="75px". px is
understood. I don't remember for certain if this is an error but the
px is certainly unneeded.

Yes, I usually don't put px in pics, I must have been trying to
be on best behaviour (how pathetic is this eh?) in order not to
distract commentators from concentrating on my prob by any lack
of units!.

As for the rest, yes, there is no practical problem. You are
right about setting margin. It is not super important I guess,
just I am puxxled (let me leave this typo in) as to _what_ is
defaulted to _what_. Did the ul have (in so many browsers) a
default margin of about 14px top and bottom? I say 14 because
that is the figure I found that got rid of it in setting negative
margins to bottom of #banner div and top of #content div!

 

[Stan McCann]

I think you might be referring to something that the free domain
puts there. The problem I put up is independent of this, it shows
up off line. In my markup, I have my <head> ... <link
rel="stylesheet" type="text/css" href="main.css"> ... </head>

I wondered about some of that code. It just didn't seem like what I
would expect from you. That's why I didn't say anything about it. I
thought maybe you were rewriting someone else's code working your way
down the page as I've often done.

I'm not sure what you mean by "inline link mark up and css" then.

Yes, I usually don't put px in pics, I must have been trying to
be on best behaviour (how pathetic is this eh?) in order not to
distract commentators from concentrating on my prob by any lack
of units!.

I'm not beyond mistakes either. BTDTGTTS.

As for the rest, yes, there is no practical problem. You are
right about setting margin. It is not super important I guess,
just I am puxxled (let me leave this typo in) as to _what_ is
defaulted to _what_. Did the ul have (in so many browsers) a
default margin of about 14px top and bottom? I say 14 because
that is the figure I found that got rid of it in setting negative
margins to bottom of #banner div and top of #content div!

I didn't do any testing or anything. That was just the only thing I
could see that looked like it could have contributed. More than
likely, the margin varied/varies between browsers. I've often had too
much space for my liking both above and below <ul>.

 

[dorayme]

just snip...

I wondered about some of that code. It just didn't seem like what I
would expect from you. snip
I'm not sure what you mean by "inline link mark up and css" then.

I simply meant the way I used "display: inline;" in the the css
and the associated markup in the html. Was wondering if there was
something about the way I made the list go in a horizontal line
rather than vertically (as perhaps more traditional for <ul>s)
that caused the puzzling white space above and below - besides my
not putting "margin:0"

I didn't do any testing or anything. That was just the only thing I
could see that looked like it could have contributed. More than
likely, the margin varied/varies between browsers. I've often had too
much space for my liking both above and below <ul>.

That's ok, Stan. As I said, margin:0 fixes the practical problem.
But I am not a purely practical person (though I do use a
chainsaw now and again). About browsers, I can only repeat that
the modern ones are rather consistent about the phenomena
puzzling me. And that IE Mac was the only one that actually
showed a bit of the diagnostic background green I put in. (To be
quite frank, I have not tested all browsers...)

I don't suppose anyone at all has been able to see the pale green
background with any Windows browsers? It looks like this in IE
Mac: http://dorayme.150m.com/test1/listPuzzler.png

This is the effect that http://dorayme.150m.com/test1/main.html
has on Mac IE

Is there any chance that everyone at alt.html could take the day
off and all work solidly on this for me? Where the blazes is my
mate Mark Parnell? Does he think he can just swan off somewhere
on hols or something without keeping in touch? Just because I did?

Is a "layer" thing going on re the phenemena I see (the green
showing up above but not below the strip of horiz. links?). You
know, that creepy stuff about z indices?

 

[Wÿrm]

"dorayme" <[email protected]> kirjoitti
viestissä:[email protected]...

The bg to the #navStrip div is green, so why is the default white
of the body (or is it the html?) showing through under the strip?

From logical point of view, maybe mac IE used PADDING on top, and MARGIN on
bottom to make space on UL. That way background of #navStrip would have
been on top part of UL, and page background or something on bottom of it.
Any way, sometimes it's good NOT to try think too much you know. Think less,
do more

Tea eh?

I drink enough tea and coffee in a day to drown average size elephant ;P
Mainly because I don't have beer always, if I would have, I would happily
stick on beer instead It cures anything ;P

she should tell him his teas tasted awful.

Well, if tea was for medicine, if medicine would taste too good it would
maybe make patient stay "ill" longer? Worse it taste quicker you wanna
heal..

<snip>

 

[Mark Parnell]

Deciding to do something for the good of humanity, dorayme

I don't suppose anyone at all has been able to see the pale green
background with any Windows browsers?

Not on IE4, 5, 5.5 or 6, Opera 5, 6, 7.5 or 8.5 or Firefox 1.5.

Is there any chance that everyone at alt.html could take the day
off and all work solidly on this for me? Where the blazes is my
mate Mark Parnell?

*waves* I'm still here. I just haven't had much to say. The others
solved your problem without my help.

Does he think he can just swan off somewhere
on hols or something without keeping in touch? Just because I did?

I did have last week off, yes. But that's because my daughter had
surgery.

Is a "layer" thing going on re the phenemena I see (the green
showing up above but not below the strip of horiz. links?). You
know, that creepy stuff about z indices?

Nothing to do with layers. Well, not really anyway.

IE5 Mac expands div#navStrip to the height of the ul, plus it's margins.
All the other browsers (correctly) make the height of div#navStrip the
height of the ul, without adding the margins.

Change the background colour on #containerMain instead of #navStrip to
#CFC and you'll see your green on the other browsers as well.

Incidentally, you don't need #navStrip at all - just move all those
styles to the ul (you'll need to add an id to the ul instead).

 

[Mark Parnell]

Deciding to do something for the good of humanity, Wÿrm

From logical point of view, maybe mac IE used PADDING on top, and MARGIN on
bottom to make space on UL. That way background of #navStrip would have
been on top part of UL, and page background or something on bottom of it.

I just assumed Mac IE was wrong, but you're most likely right - it
probably just uses padding instead of margin on the ul. <g>

 

[Nik Coughlin]

I'm not beyond mistakes either. BTDTGTTS.

For some reason that looked like BIGTITS when I saw it out of the corner of
my eye.

What is it?

I'm guessing 'But That Doesn't Take G... T... To See'?

Gin and Tonic?

I give up.

 

[Nik Coughlin]

For some reason that looked like BIGTITS when I saw it out of the
corner of my eye.

What is it?

I'm guessing 'But That Doesn't Take G... T... To See'?

Gin and Tonic?

I give up.

I should have checked Google before hazarding a guess... 'Been there, done
that, got the t-shirt'.

I dunno, I kind of like 'But that doesn't take gin & tonic to see!' better.

 

[Mark Parnell]

Deciding to do something for the good of humanity, Nik Coughlin

What is it?

http://40tude.com/dialog/ ;-)

 

[dorayme]

Deciding to do something for the good of humanity, dorayme


Not on IE4, 5, 5.5 or 6, Opera 5, 6, 7.5 or 8.5 or Firefox 1.5.

So IE Mac is odd man out...

I did have last week off, yes. But that's because my daughter had
surgery.

Ah, you have good reason then. Best of luck on family thing...

IE5 Mac expands div#navStrip to the height of the ul, plus it's margins.
All the other browsers (correctly) make the height of div#navStrip the
height of the ul, without adding the margins.

Change the background colour on #containerMain instead of #navStrip to
#CFC and you'll see your green on the other browsers as well.

Yes, but this would mask the prob I was puzzled about. I think I
better go away on this and think of how to better express what
puzzles me in it's bare essentials. But thanks for addressing
it...

Incidentally, you don't need #navStrip at all - just move all those
styles to the ul (you'll need to add an id to the ul instead).

It is just set-up legacy, I make all the main divs for the
general logic, fill them and strip them later. You are right re a
final working site.

(BTW, I said that the safricans are very dangerous customers and
it is proving to be so lately)

 

[dorayme]

From logical point of view, maybe mac IE used PADDING on top, and MARGIN on
bottom to make space on UL. That way background of #navStrip would have
been on top part of UL, and page background or something on bottom of it.
Any way, sometimes it's good NOT to try think too much you know. Think less,
do more

You are right about thinking too much! I have been looking at the
computed values for css in the DOM inspector (a recent toy I am
learning about) and find it interesting. It is a clue to browser
default css. But one needs to deduce a few things for this.

I have no practical problem, it is instructive to me to know what
gives in various situations. If you are right about the above,
how would you show it to be right?

I better find out the simplest and best way to inspect browser
css defaults (what it, in its wisdom, provides if not over-ridden
by the website maker). I expect there is no simple and general
way to do this for browsers.

 

[Mark Parnell]

Deciding to do something for the good of humanity, dorayme

So IE Mac is odd man out...

Sounds like it.

Ah, you have good reason then. Best of luck on family thing...

Thanks. She's recovered well.
^^^^
8-O Did I really write that? For shame!

*bangs head on desk repeatedly*

(BTW, I said that the safricans are very dangerous customers and
it is proving to be so lately)

Indeed. Haven't been following it that closely, actually. It's hard when
it's Over There.

Though our TV just found its[1] way into a cupboard, so wouldn't be
watching much even if it was here anyway.

[1] Hah! Got it right that time.