|
Tania
- you're correct. The "display:inline" turns out to be, er, vestigal and the
effect works fine without it. What I was worried about is why is
"float:left" was allowing me to give the <li> a width. But... with the
"display:inline" out of the way, the <li> is a block-element, so applying
width is OK.
Is the
issue that giving an element float makes the browser treat it as a block
element?
Thanks
for bearing with me, everyone... hope someone finds this discussion
useful.
s:r
Hi Scott,
Well I'm a bit of a novice when it comes down to it, but
when I initially added the "float: left;" I removed the
"display:inline;" on both the <ul> and the <li> as I found it
un-necessary in the original code you sent. While it may be necessay in light of
other elements, is it possible to remove it on the <li> class? Would this
solve both the problem of working as you require and still remaingin within the
proper specs?
Like I said, I'm on a learning curve with CSS &
standards compliance so if I am missing something here I'd appreiate
any clarification from Patrick or any other more knowledgable
folks....
Tania
----- Original Message -----
Sent: Tuesday, July 13, 2004 11:49
PM
Subject: RE: [WSG] setting width for
<li>s when inline
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
*****************************************************
|
