Spans overlap when viewport is reduced

Can anyone help me with this one please ?

I've got a page

http://www.fchd.btinternet.co.uk/lgh...b/humb2005.htm

that looks OK to me (at my settings anyway!), but when I try narrowing the
viewport, some of the divs near the bottom of the screen start to overlap in
a rather ugly way.

I've tried playing around with margins and padding, making them divs that
display inline, giving them a height , giving the containing div a bottom
margin and anything else I can think of.

It's not the end of the world, but I'd like to fix it and get it looking and
behaving as I think it should without resorting to a table.

The colours on the items are there for debugging purposes, I may well revert
to not specifiying them when I've finished. Also, CSS is contained within
the file on a temporary basis only to make it easier to see if anyone can
solve the problem - normally it's on a seperate sheet.

I've got hundreds of pages like this for various leagues/seasons, some of
which I have put online when I was less worried about doing things "the
right way", so if I can get it sorted now, I'll need to go back over those.


--
Richard Rundle

Richard Rundle wrote:

Can anyone help me with this one please ?

http://www.fchd.btinternet.co.uk/lgh...b/humb2005.htm

that looks OK to me (at my settings anyway!), but when I try narrowing the
viewport, some of the divs near the bottom of the screen start to overlap in
a rather ugly way.

Add a line-height:3em to the <span> styles. When the lines wrap, the

text is placed without consideration of vertical margins or paddings.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

With neither quill nor qualm, Richard Rundle quothed:

Can anyone help me with this one please ?

I've got a page

http://www.fchd.btinternet.co.uk/lgh...b/humb2005.htm

that looks OK to me (at my settings anyway!), but when I try narrowing the
viewport, some of the divs near the bottom of the screen start to overlap in
a rather ugly way.

I've tried playing around with margins and padding, making them divs that
display inline, giving them a height , giving the containing div a bottom
margin and anything else I can think of.

It's not the end of the world, but I'd like to fix it and get it looking and
behaving as I think it should without resorting to a table.

The colours on the items are there for debugging purposes, I may well revert
to not specifiying them when I've finished. Also, CSS is contained within
the file on a temporary basis only to make it easier to see if anyone can
solve the problem - normally it's on a seperate sheet.

I've got hundreds of pages like this for various leagues/seasons, some of
which I have put online when I was less worried about doing things "the
right way", so if I can get it sorted now, I'll need to go back over those.

In addition to Joe Moe's advice, you may want to add "white-
space:nowrap;" to each discrete footer item.

--
Neredbojias
Contrary to popular belief, it is believable.

With neither quill nor qualm, Richard Rundle quothed:

Can anyone help me with this one please ?

I've got a page

http://www.fchd.btinternet.co.uk/lgh...b/humb2005.htm

that looks OK to me (at my settings anyway!), but when I try narrowing the
viewport, some of the divs near the bottom of the screen start to overlap in
a rather ugly way.

I've tried playing around with margins and padding, making them divs that
display inline, giving them a height , giving the containing div a bottom
margin and anything else I can think of.

It's not the end of the world, but I'd like to fix it and get it looking and
behaving as I think it should without resorting to a table.

The colours on the items are there for debugging purposes, I may well revert
to not specifiying them when I've finished. Also, CSS is contained within
the file on a temporary basis only to make it easier to see if anyone can
solve the problem - normally it's on a seperate sheet.

I've got hundreds of pages like this for various leagues/seasons, some of
which I have put online when I was less worried about doing things "the
right way", so if I can get it sorted now, I'll need to go back over those.

Oops, that's "Jim Moe".

--
Neredbojias
Contrary to popular belief, it is believable.

"Neredbojias" <invalid (AT) neredbojias (DOT) com> wrote

With neither quill nor qualm, Richard Rundle quothed:

In addition to Joe Moe's advice, you may want to add "white-
space:nowrap;" to each discrete footer item.

Thanks Joe and Neredbojias, that's exactly what I was looking for.

Is adding "white-space:nowrap;" a better idea than replacing spaces in the
links with &nbsp; ?

--
Richard