Help with CSS margin collapse

am 29.08.2007 12:24:06 von sevillad

Hi,

I'm using an inline ul to get a horizontal menu, but it's long so it
takes two lines, and when I try to add some spacing between them with
margin, it doesn't work. I've searched and read something about margin
collapse, they always say that one solution is to add border/padding
but it hasn't worked. The code is below, it's the menu3 that is giving
me trouble (notice how the black boxes intersect).

On a related note, if I change margin to 0, in Firefox 2 there's still
some horizontal distance between the boxes, whereas in IE 6 they are
tightly packed. Is it because of something funny in my code that is
treated differently? (I don't understand much about adding style to
"ul", to "ul li", to "ul li a" and so on, I've just experimented until
it looked right).

Thanks in advance,

David

www.w3.org/TR/html4/loose.dtd">

Personal page of David Sevilla: Mathematics - Research

Personal Page of David Sevilla

Hello!

Re: Help with CSS margin collapse

am 29.08.2007 12:48:08 von rf

"sevillad" wrote in message
news:1188383046.716474.265510@r29g2000hsg.googlegroups.com.. .
> Hi,
>
> I'm using an inline ul to get a horizontal menu, but it's long so it
> takes two lines, and when I try to add some spacing between them with
> margin, it doesn't work.

line-height.

Please do not post code. Post a URL.

--
Richard.

Re: Help with CSS margin collapse

am 30.08.2007 11:15:01 von sevillad

Hi,

On Aug 29, 12:48 pm, "rf" wrote:
> "sevillad" wrote in message
>
> news:1188383046.716474.265510@r29g2000hsg.googlegroups.com.. .
>
> > Hi,
>
> > I'm using an inline ul to get a horizontal menu, but it's long so it
> > takes two lines, and when I try to add some spacing between them with
> > margin, it doesn't work.
>
> line-height.
>
> Please do not post code. Post a URL.
>
> --
> Richard.

Thanks, it's solved. I would also like to understand why adding border
or padding didn't work, since it seems to be a common solution.

On a related note, I don't really know where to add CSS when I have
elements inside other elements (in my case, I have a UL, and LI's
inside, and in each one there's an A). And now that I'm at it, should
I wrap those A's in DIVs or P's for the sake of meaningful code?

Thanks a lot,

David

Re: Help with CSS margin collapse

am 30.08.2007 11:52:25 von rf

"sevillad" wrote in message
news:1188465301.212877.74360@o80g2000hse.googlegroups.com...
> On Aug 29, 12:48 pm, "rf" wrote:

>> line-height.

> Thanks, it's solved. I would also like to understand why adding border
> or padding didn't work, since it seems to be a common solution.

I assume you mean margin, not border. Margin and padding work differently
for inline elements. Put this:
* {border: solid 1px pink;}
at the very top of your CSS. You will see exactly which real estate each
element is taking up, and you will see that the margin and/or padding
applied to the now inline

elements actually escapes outside the

can quite happily live inside a

. No need for more.

--
Richard.

Re: Help with CSS margin collapse

am 31.08.2007 12:08:10 von sevillad

Hi,

> > On Aug 29, 12:48 pm, "rf" wrote:

> Have a good read in the specs about the visual layout model.

I definitely will, it seem complicated when I did some time ago, but
it seems it's important enough.

> > And now that I'm at it, should
> > I wrap those A's in DIVs or P's for the sake of meaningful code?
>
> No. Why would that make the code more meaningful? There lies the way of div
> soup :-) The can quite happily live inside a

. No need for more.

Thanks. I was asking because in the old days I used to think that

was the same as
, until I started reading about content vs. style.

David

Re: Help with CSS margin collapse

am 31.08.2007 12:50:16 von rf

"sevillad" wrote in message
news:1188554890.060885.86210@q3g2000prf.googlegroups.com...
> Hi,
>
>> > On Aug 29, 12:48 pm, "rf" wrote:
>
>> Have a good read in the specs about the visual layout model.
>
> I definitely will, it seem complicated when I did some time ago, but
> it seems it's important enough.

It's imperative if you are going to be doing advanced stuff, and changing

s from block to inline is IMHO somewhat advanced.

It's also hard going, but worth it. Don't worry if you don't get it all at
once, as you won't. I still re-read it from time to time and surprise myself
with bits that I had forgotten, or missed last time.

>> > And now that I'm at it, should
>> > I wrap those A's in DIVs or P's for the sake of meaningful code?
>>
>> No. Why would that make the code more meaningful? There lies the way of
>> div
>> soup :-) The can quite happily live inside a

. No need for more.

Further, if you were to wrap those s in

s you would be probably quite
surprised at the resultant layout. Please try it, and see if you can explain
what is happenning :-) Hint:

is a block level element. Remember to leave
those borders switched on. Perhaps specify a different coloured border for

elements.

> Thanks. I was asking because in the old days I used to think that

> was the same as
, until I started reading about content vs. style.

Think of a poem. Each stanza is, well can be construed to be, a

. A
block, with blank space before and after. However the stanza is comprised of
definite lines, broken by a
, that is, break the line box here. Just
don't think that multiple
s will (or should) produce blank space. A line
(box) can only (logically) be broken once, even though most browsers
disagree.

--
Richard.

Re: Help with CSS margin collapse

am 31.08.2007 21:53:01 von dorayme

In article ,
"rf" wrote:

> A line
> (box) can only (logically) be broken once, even though most browsers
> disagree.

Can it? Do they?

0123456789

, depending on where it is inserted in the line above,
does this:

(1) It breaks the box that existed and creates another box on a
new line either one with characters in it or one with no
characters in it; the latter, a box that is brimming with mere
potentiality.

(2) It then operates on this second box and breaks it.

In all of this is a breaking of one thing, followed by a breaking
of another thing. There is no double breaking of one line and so
the question of whether it is logical to break a line twice does
not arise to be logical or not logical.

Browsers, unlike, earthlings, see into the virtual world more
clearly. A box with nothing in it is still a box to them. They
are happy with boxes that do not have positive dimensions. In
fact, some browsers probably recognise boxes that have negative
dimensions, but let us not go into that murky world.

Browsers also like it when earthlings think like they do and they
like it when they are given shorthand instructions in advance. I
have heard browsers purring contentedly on being double breaked.

--
dorayme