Stylesheets - Problem with overflow on inline list

Author

Problem with overflow on inline list

steve.higgins@tesco.net

2007-04-04, 6:22 pm

Hi All,

I'm trying to present a list of short text items in an inline style,
flowing over more than one line if necessary. Each item should be in a
fixed-width box. The following code does most of what I want except
for the fact that the list item width isn't honoured and the items
that flow onto the second and subsequent lines actually overlap the
first line (because the top-margin isn't being honoured).

<html>
<head>
<title>Joblist</title>
<style>

#joblist {
list-style: none;
margin-left: 5%;
width: 80%;
border: 1px solid #ccc;
padding: 5px 5px;
}

#joblist li {
display: inline;
border: 1px solid gray;
background-color: #eee;
padding: 2px 5px;
margin: 2px 5px;
width: 75px;
}

</style>
</head>
<body>

<ul id="joblist">
<li>FTD21</li>
<li>MSD10</li>
<li>SAD01</li>
<li>SAD13</li>
<li>SAD59</li>
<li>SAD64</li>
<li>SAD69</li>
<li>SAD70</li>
<li>SKD*</li>
<li>SKW*</li>
<li>STD63</li>
<li>STD64</li>
<li>TRD04</li>
<li>TRD07</li>
<li>TRD19</li>
<li>RMD196</li>
</ul> 

</body>
</html>

If you remove the "display: inline;" instruction you'll see the kind
of effect I'm after but without the actual inline behaviour.

Can anyone suggest a reason why I'm getting this result?

Thanks

Steve

Jukka K. Korpela

2007-04-04, 6:22 pm

Scripsit steve.higgins@tesco.net:

> The following code does most of what I want except
> for the fact that the list item width isn't honoured

According to CSS specifications, the width property does not apply to inline
elements.

As a workaround, set float: left for the list items, and set clear: both for
the element after the list.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

zzpat

2007-04-04, 6:22 pm

Jukka K. Korpela wrote:
> Scripsit steve.higgins@tesco.net:
>
>
> According to CSS specifications, the width property does not apply to
> inline elements.
>
> As a workaround, set float: left for the list items, and set clear: both
> for the element after the list.
>

If you use float left you'll probably lose the border in #joblist

#joblist {
list-style: none;
margin-left: 5%;
border: 1px solid #ccc;
padding: 5px 5px;
}