horizontal menu line wrapping issue

[Carolyn Marenger]

I can't get my head around a line wrapping problem. I have a horizontal
menu in which each link is a clickable box. When there are enough items in
the menu, the boxes wrap to the next line. The problem is, there is not
enough vertical distance between the lines, resulting in boxes that
overlap.

Before you go further - I know, the colours are a bit on the glaring side.
I am working on the layout, then I will make it a little more asthetic.

http://www.marenger.com/provinggrounds/horizmenu.html

Thanks!

Carolyn

 

[Spartanicus]

I can't get my head around a line wrapping problem. I have a horizontal
menu in which each link is a clickable box. When there are enough items in
the menu, the boxes wrap to the next line. The problem is, there is not
enough vertical distance between the lines, resulting in boxes that
overlap.

http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height

 

[Carolyn Marenger]

Thanks, it is now working.

Carolyn

 

[Carolyn Marenger]

http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height

Thanks, I figured it would be something that simple. One day, I expect to
know the whole standard - by then it will probably be out of date.

Carolyn

 

[dorayme]

I can't get my head around a line wrapping problem. I have a horizontal
menu in which each link is a clickable box. When there are enough items in
the menu, the boxes wrap to the next line. The problem is, there is not
enough vertical distance between the lines, resulting in boxes that
overlap.

Before you go further - I know, the colours are a bit on the glaring side.
I am working on the layout, then I will make it a little more asthetic.

http://www.marenger.com/provinggrounds/horizmenu.html

Yes, this was an issue that was troubling me too in a different
thread, I used line-height in the css to control this behaviour
and also hopefully to try to control the length of the vertical
border, acting as separator. It was good for former to make
things more graceful on wrap but I am still not quite pleased
with the height (it is too tall!) The two aims seem to clash re a
line heighty solution. Bigger line height gives more grace on
wrap but exacerbates the separator height issue. I need to think
more about this.

http://dorayme.150m.com/test/waywardKing.html

But I am not totally happy, I think I was getting more graceful
looks in the old way I used to do this: by "|" (the shift + \
key) which was letter height and just what I wanted! But I have
already had a late night knock on the door from the new css/html
police and prefer to avoid a repeat...