Patrick - Thanks for your detailed answer (and your patience...)
This would suggest that the fix I found exploits a (perhaps temporary) flaw in the
browser render engines. To recap for folks just joining in, here's a short description
of what I'm trying to do:
the code below should make the UL display as a horizontal row. "number one" should be
100px wide, "number two" 150px (unless i've mistyped, of course...)
This works for me, but I'd like to 'get it right' and not rely on an exploit...
======================== begin code snippet ========================
<ul id="example">
<li id="number1">number one</li>
<li id="number2">number two</li>
</ul>
ul#example {
height: 16px;
margin: 0; border: 0;
position: relative;
display: inline;
list-style-type: none;
}
ul#example li {
display: inline;
float: left;
height: 16px;
background-color: #999;
}
ul#example li#number1 {
width: 100px;
}
ul#example li#number2 {
width: 150px;
}
======================== end code snippet ========================
for anyone interested, I'm carrying this idea a step further and applying the
Gilder/Levin image replacement technique to replace 'number one/two' with icons. this
is used for the "email/pdf" links about half-way down the page at:
http://www.capstrat.com/development/cs2004/template2.html
semantically, an unordered list; visually, icons. the width-setting is important to
getting the image-replacement to work properly.
scott
-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of Patrick Lauke
Sent: Tuesday, July 13, 2004 11:34 AM
To: [EMAIL PROTECTED]
Subject: RE: [WSG] setting width for <li>s when inline
> From: Scott Reston
> Does this suggest that
> inline elements cannot have a width property at all?
Yes. Any browser that applies width specified in CSS to an inline
element (or even a block element that has been set to display:inline)
is not behaving in line with the spec.
> Can you clarify what the spec means by 'replaced'?
http://www.w3.org/TR/REC-CSS2/conform.html#replaced-element
In simplified terms, replaced elements are those that...heck...are
replaced by something else when displayed. the IMG element is replaced
with the image itself, INPUT,TEXTAREA,SELECT are replaced with UI elements
for the form widgets, OBJECT is replaced with whatever external piece
of "multimedia" (god I hate that term) you specify.
To take the example of IMG, this has an intrinsic dimension (defined just
below "replaced element" on the link above) in that the image is made up of
a fixed number of pixels, so the width/height are part of the image itself.
Although it's inline, the intrinsic width is then honoured in the display
(but again setting any width in the CSS is still ignored)
Hope this makes some kind of sense...as I'm starting to confuse myself here ;)
Patrick
________________________________
Patrick H. Lauke
Webmaster / University of Salford
http://www.salford.ac.uk
*****************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*****************************************************
*****************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*****************************************************
